using google chart api in rails app - how specify

问题:

My app charts 4 data series using the google chart api. The controller loads an array, the view has the google chart javascript to draw the cart.

It works if the array is full populated, but of course sometimes a data series is missing a few points and I cannot see how to specify 'missing' data points in a series so arrayToDataTable() javascript function will know to provide the 'null' data for that point.

In my controller, I load an array with data (fully populated array example):

@typed_array = [["Month", "Apples", "Bananas", "Cherries", "Oranges"], 
  ["Jan", 5.0, 4.0, 3.0, 7.0], 
  ["Feb", 6.0, 3, 3.0, 7.0], 
  ["Mar", 7.0, 5.0, 4.0, 6.0], 
  ["Apr", 8.0, 5.0, 4.0, 5.0], 
  ["May", 9.0, 6.0, 5.0, 4.0]]

The view contains:

%script{:src => "https://www.google.com/jsapi", :type => "text/javascript"}
:javascript
  google.load('visualization', '1.0', {'packages':['corechart']});

  google.setOnLoadCallback(drawChart);

  function drawChart() {

    // Create the data table.
    var data = new google.visualization.arrayToDataTable(#{@typed_array});

    // Set chart options
    var options = {'title':'Report 1: ',
         backgroundColor: { fill: "#fee", stroke: "#246", strokeWidth: 2 },
         'width':800,
                   'height':300,
                   'interpolateNulls':true};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div_line1'));
    chart.draw(data, options);
  }

#chart_container
  %p  
  #chart_div_line1{:style=>"padding:20px;"}
  %p  

For a fully populated array, it works fine.

Does anyone know what to put in the ruby array so arrayToDataTable knows it's a null (missing) value?

  ["Feb", 6.0, ????, 3.0, 7.0], 

I've tried nil 'nil' 'null' '_' '__' all of which break the chart.

回答1:

Answer turns out to be trivially simple...

a) on the ruby side, use nil

b) in the javascript, when passing in the array, instead of @typed_array, use @typed_array.to_json

In my controller, I load an array with data (fully populated array example):

@typed_array = [["Month", "Apples", "Bananas", "Cherries", "Oranges"], 
  ["Jan", 5.0, 4.0, 3.0, 7.0], 
  ["Feb", nil, 3, 3.0, 7.0], 
  ["Mar", nil, 5.0, 4.0, 6.0], 
  ["Apr", 8.0, nil, 4.0, 5.0], 
  ["May", 9.0, 6.0, nil, 4.0]]

The view contains:

%script{:src => "https://www.google.com/jsapi", :type => "text/javascript"}
:javascript
  google.load('visualization', '1.0', {'packages':['corechart']});

  google.setOnLoadCallback(drawChart);

  function drawChart() {

    // Create the data table.
    var data = new google.visualization.arrayToDataTable(#{@typed_array.to_json});

    // Set chart options
    var options = {'title':'Report 1: ',
         backgroundColor: { fill: "#fee", stroke: "#246", strokeWidth: 2 },
         'width':800,
                   'height':300,
                   'interpolateNulls':true};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div_line1'));
    chart.draw(data, options);
  }

#chart_container
  %p  
  #chart_div_line1{:style=>"padding:20px;"}
  %p