javascript - Using D3 in Rails ActiveAdmin -

i building application in ruby-on-rails 4. have designed administration site using activeadmin. works great add chart index pages using d3.js through rendering of partial. have been impressed d3.js library, realy new @ have been trying developments training.

i have not found thsi specific case on internet try nice tutorial : using d3 in rails. have included d3.js library followinh tutorial. partial looks this:

#app/views/admin/_chart.html.erb <h3>hello world!</h3> <svg id="graph"></svg> 

and admin user.file looks :

#app/admin/user.rb collection_action :data, method: :post     respond_to |format|           format.json {             render :json => [1,2,3,4,5]           }      end   end 

then have script below in assets/javascript/graph.js:

$.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," + * 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"); } 

when display page, partial correctly load (at least title) , there room chart, empty. have no error in console may not upload graph.js file or data may not transfered chats. or both. anyway, don't know why neither understand, appreciated. thank you

s.

[edit]

i have changed route in route.rb file:

resources :users     collection     ...     :data , :defaults => { :format => 'json' }     end end 

then changed name of js file graph.js users.js. then, changed url : 'users/data':

    $.ajax({                type: "get",                contenttype: "application/json; charset=utf-8",                url: 'users/data',                datatype: 'json',                success: function (data) {                    draw(data);                },                error: function (result) {                    error();                }            }); ... 

this way can display chart in application's index page. however, still cannot display in activeadmin... wondering if because haven't correctly include d3 in activeadmin (within vendor folder) or if route problem.

ok, found way dispaly simple d3 bar chart in active admin pages.

this did display chart in /admin/users page:

#app/admin/user.rb  activeadmin.register user ...   collection_action :data, :method => :get       respond_to |format|       format.json {         render :json => [1,2,3,4,5]       }       end   end  #app/views/admin/_charts.html.erb  <h3>user chart</h3> <svg id="graph"></svg> <script type="text/javascript"> $.ajax({            type: "get",            contenttype: "application/json; charset=utf-8",            url: 'users/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," + * 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"); } </script> 

then, display dashboard :

#app/admin/dashboard.rb  activeadmin.register_page "dashboard" ...   section     div       render 'admin/users/charts'     end   end ... end 

i hope usefull you. now, going try pass data kind of chart.