使用Rails应用程序谷歌图表API - 使用arrayToDataTable当一系列如何指定一个

使用谷歌图表API我的应用程序图4数据系列。所述控制器加载的阵列，该视图有谷歌的图表JavaScript来绘制车。

它的工作原理，如果数组是全人口，但当然有时一个数据系列缺少了几个点，我不能看到如何在一系列指定“丢失”的数据点，因此arrayToDataTable（）JavaScript函数就会知道提供“空”该点的数据。

在我的控制器，我加载数据（完全填充阵列示例）的阵列：

@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]]

该视图包含：

%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 &nbsp;
  #chart_div_line1{:style=>"padding:20px;"}
  %p &nbsp;

对于一个完全填充的阵列，它工作正常。

有谁知道放什么红宝石阵列在这么arrayToDataTable知道这是一个空（缺失）值？

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

我已经试过nil 'nil' 'null' '_' '__'所有这些都打破了图表。

答案原来是平凡简单...

a）在该红宝石侧，使用零

B）在JavaScript，使阵列中时，代替@typed_array，使用@ typed_array.to_json

在我的控制器，我加载数据（完全填充阵列示例）的阵列：

@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]]

该视图包含：

%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 &nbsp;
  #chart_div_line1{:style=>"padding:20px;"}
  %p &nbsp;