Rails + charts.js: Jak wypełnić tablicę JavaScript wartością z bazy danych?

Chciałbym użyć wykresów wizualizacyjnych Google do wyświetlania informacji na wykresie.Rails + charts.js: Jak wypełnić tablicę JavaScript wartością z bazy danych?

funkcji JavaScript do ustawiania wartości na wykresie wygląda następująco:

function drawLineChart(chartType) { 

    if(chartType == undefined) { 
     chartType = 'data1'; 
    } 

    var data = { 
     data1: [ 
      ['Year', 'Sales', 'Expenses'], 
      ['2004', 1000,  400], 
      ['2005', 1170,  460], 
      ['2006', 660,  1120], 
      ['2007', 1030,  540] 
     ] 
    }; 

    ... 
}

Moim problemem jest to, że nie wiem jak wypełnić tablicę tak z wartościami z bazy danych - każda wskazówka?

Thanks a lot

Źródło

2013-09-16 user984621

Musisz osadzić javascript w ERB. Jeśli nazwiesz plik chart.js.erb, będziesz mógł uzyskać dostęp do logiki Model z javascript poprzez erb. Wadą tej metody jest to, że javascript musi być kompilowany na każdym widoku strony, a nie jako statycznie skompilowany zasób. Może to spowolnić ładowanie strony i należy szukać alternatywnej trasy, jeśli strona będzie silnie traffickowana.

Przykład

chart.js.erb

function drawLineChart(chartType) { 

    if(chartType == undefined) { 
    chartType = 'data1'; 
    } 

    var data = { 
    data1: [ 
     <%= Model.all.map { |m| [m.year, m.sales, m.expenses] }.unshift(['Year', 'Sales', 'Expenses']) %> 
    ] 
    }; 

    ... 
}

Alternatywnie, można utworzyć żądania AJAX, który zapełnia tablicę na stronie obciążenia przez sterownik API. Ta metoda umożliwiłaby statyczną kompilację zasobów, ale jest nieco bardziej złożona.

Źródło

2013-09-16 15:41:33 Eugene

Oto, co zrobiłem w moim projekcie 4 miesiące temu. Zwróć szczególną uwagę na kod. Jeśli używasz Ruby on Rails, można uzyskać dane z kontrolera wpisując ten <% = @get_data_from_controller_here%>

<html> 
<head> 
<title></title> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart1); 
     google.setOnLoadCallback(drawChart2); 
     function drawChart1() { 
     var data = google.visualization.arrayToDataTable([ 

      ['Work',  <%= @get_data_from_controller_here1 %>], 
      ['Eat',  <%= @get_data_from_controller_here2 %>], 
      ['Commute', <%= @get_data_from_controller_here3 %>], 
      ['Watch TV', <%= @get_data_from_controller_here4 %>], 
      ['Sleep', <%= @get_data_from_controller_here5 %>] 
     ]); 

     var options = { 
      title: 'My Daily Activities', 
      chartArea:{left:5, top:20,width:"100%",height:"100%"}, 
      height: 500, 
      width: 500, 
      is3D: true 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById('piechart_3d1')); 
     chart.draw(data, options); 
     } 

     function drawChart2() { 
     var data = google.visualization.arrayToDataTable([ 

      ['Work',  <%= @get_data_from_controller_here11 %>], 
      ['Eat',  <%= @get_data_from_controller_here22 %>], 
      ['Commute', <%= @get_data_from_controller_here33 %>], 
      ['Watch TV', <%= @get_data_from_controller_here44 %>], 
      ['Sleep', <%= @get_data_from_controller_here55 %>] 
     ]); 

     var options = { 
      title: 'My Daily Activities', 
      chartArea:{left:5, top:20, width:"100%",height:"100%"}, 
      height: 500, 
      width: 500, 
      is3D: true 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById('piechart_3d2')); 
     chart.draw(data, options); 
     } 
    </script> 

</head> 
<body> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 


    <script type="text/javascript"> 
     $(document).ready(function() { 

      $("#OpenDialog").click(function() { 
       $('#dialog').css('overflow', 'hidden') 
       $("#dialog").dialog({modal: true, 
            height: 450, 
            width: 850, 
            resizable: true 
            }); 
      });   
     }); 
    </script> 

    <a id="OpenDialog" style="display:inline-block;" href="#" >Click here to open dialog</a> 
    <div id="dialog" title="Dialog Title" style="display:none; overlay:hidden"> 
     <div id="piechart_3d1" style="width: 49%; height:49%; float:left;"></div> 
     <div id="piechart_3d2" style="width: 49%; height:49%; float:right;"></div> 
    </div> 

</body>

Źródło

2013-09-16 22:47:36 jimagic

Można użyć atrybutu 'dane':

# statistics.js.coffee 
jQuery -> 
    data = { 
    labels : $("#orders_chart").data('dates'), 
    datasets : [ 
     { 
     fillColor : "rgba(220,220,220,0.5)", 
     strokeColor : "rgba(220,220,220,1)", 
     pointColor : "rgba(220,220,220,1)", 
     pointStrokeColor : "#fff", 
     data : $("#orders_chart").data('orders') 
    } 
    ] 
} 

ordersChart = new Chart($("#orders_chart").get(0).getContext("2d")).Line(data) 

#statistics/index.html.erb 
<%= content_tag 'canvas', '', id: 'orders_chart', width: '1000', height: '600', data: {orders: (Order.week_ago.map &:total), dates: (Order.week_ago.map &:created_at)} %>

Źródło

2013-12-16 18:58:56 ryaz

Rails + charts.js: Jak wypełnić tablicę JavaScript wartością z bazy danych?

Odpowiedz

Powiązane problemy