Q:

How do i use d3.js to create a bar chart in my Rails5 app

I keep getting this error in my terminal.
I followed this tutorial http://www.overfitted.com/blog/?p=302
Started GET "/data" for ::1 at 2016-07-26 21:55:43 +0100
ActionController::RoutingError (No route matches [GET] "/data"):
  actionpack (4.2.6) lib/action_dispatch/middleware/debug_exceptions.rb:21:in call'
  web-console (2.3.0) lib/web_console/middleware.rb:28:inblock in call'
  web-console (2.3.0) lib/web_console/middleware.rb:18:in catch'
  web-console (2.3.0) lib/web_console/middleware.rb:18:incall'
  actionpack (4.2.6) lib/action_dispatch/middleware/show_exceptions.rb:30:in call'
  railties (4.2.6) lib/rails/rack/logger.rb:38:incall_app'
  railties (4.2.6) lib/rails/rack/logger.rb:20:in block in call'
  activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:inblock in tagged'
  activesupport (4.2.6) lib/active_support/tagged_logging.rb:26:in tagged'
  activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:intagged'
  railties (4.2.6) lib/rails/rack/logger.rb:20:in call'
  actionpack (4.2.6) lib/action_dispatch/middleware/request_id.rb:21:incall'
  rack (1.6.4) lib/rack/methodoverride.rb:22:in call'
  rack (1.6.4) lib/rack/runtime.rb:18:incall'
  activesupport (4.2.6) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in call'
  rack (1.6.4) lib/rack/lock.rb:17:incall'
  actionpack (4.2.6) lib/action_dispatch/middleware/static.rb:120:in call'
  rack (1.6.4) lib/rack/sendfile.rb:113:incall'
  railties (4.2.6) lib/rails/engine.rb:518:in call'
  railties (4.2.6) lib/rails/application.rb:165:incall'
  rack (1.6.4) lib/rack/content_length.rb:15:in call'
  puma (3.6.0) lib/puma/configuration.rb:225:incall'
  puma (3.6.0) lib/puma/server.rb:578:in handle_request'
  puma (3.6.0) lib/puma/server.rb:415:inprocess_client'
  puma (3.6.0) lib/puma/server.rb:275:in block in run'
  puma (3.6.0) lib/puma/thread_pool.rb:116:inblock in spawn_thread'
Rendered /Users/omorhefere/.rvm/gems/ruby-2.3.1@rails5.0/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/_trace.text.erb (1.1ms)
  Rendered /Users/omorhefere/.rvm/gems/ruby-2.3.1@rails5.0/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/routing_error.text.erb (40.3ms)
Here is my code:
My controller
    class MeController < ApplicationController
    def index

    end

    def data
     respond_to do |format|
      format.json {
       render :json => [1,2,3,4,5]
        }
     end
    end

 end

MY JAVASCRIPT
      $.ajax({
       type: "GET",
       contentType: "application/json; charset=utf-8",
       url: 'data',
       dataType: 'json',
       success: function (data) {
           draw(data);
       },
       error: function (result) {
           error();
       }
   });

function draw(data) {
 var color = d3.scale.category20b();
 var width = 420,
    barHeight = 20;

 var x = d3.scale.linear()
    .range([0, width])
    .domain([0, d3.max(data)]);

 var chart = d3.select("#graph")
    .attr("width", width)
    .attr("height", barHeight * data.length);

 var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function (d, i) {
              return "translate(0," + i * barHeight + ")";
          });

 bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 1)
    .style("fill", function (d) {
               return color(d)
           })

 bar.append("text")
    .attr("x", function (d) {
              return x(d) - 10;
          })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .style("fill", "white")
    .text(function (d) {
              return d;
          });
}

function error() {
  console.log("error")
}

MY ROUTES
       get 'me/data', :defaults => { :format => 'json' }

I have added this to my application.js file.

A:

i think you just need to change the url in your ajax code to "me/data".
hope that work.
$.ajax({
       type: "GET",
       contentType: "application/json; charset=utf-8",
       url: 'me/data',
       dataType: 'json',
       success: function (data) {
           draw(data);
       },
       error: function (result) {
           error();
       }
   });

