Google Line Chart with varying data points

Question

I am trying to draw a Google Line Chart, where each line may have a different number of data points. That is, if the x-Axis has 10 values, then some lines may only have data on 4 or 5 or whatever points. I found an answer to this question here:

How to create Google Chart with lines (series) of different lengths?

This did not work for me. I tried both underscore and double underscore. Also I tried to add " and ' around the underscore(s). But when I open the html, the site remains plain. Here is my Code:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'point');
        data.addColumn('number', 'line1');
        data.addColumn('number', 'line2');
        data.addColumn('number', 'line3');
        data.addColumn('number', 'line4');
        data.addColumn('number', 'line5');
        data.addRows([
          ['0', 5, 6, 10, 8,_],
          ['1', 5, 6, 10, 8, 10]]);
        var options = {
          title: 'Test'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Anyone know a solution?

florian florian · Accepted Answer · 2012-02-28T11:46:23

I think the answer is on this page Data Formats.
The thing is that you can't use _ as is in the array of data because JS will think it's a variable. _ is the encoded value for a missing value. So you have to convert all your data to an encoded string to use _ for missing values. At the end of the linked page, it seems you have functions which realize this encoding for you.

Maybe you can set your data like this instead of your "inline" method, so you don't need to use encoded values.

<html>
 <head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'point');
    data.addColumn('number', 'line1');
    data.addColumn('number', 'line2');
    data.addColumn('number', 'line3');
    data.addColumn('number', 'line4');
    data.addColumn('number', 'line5');

    data.addRows(3);
    data.setValue(0, 0, '2004');
    data.setValue(0, 1, 1000);
    data.setValue(0, 2, 400);
    data.setValue(0, 3, 500);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1000);
    data.setValue(1, 2, 400);
    data.setValue(1, 3, 500);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 1000);
    data.setValue(2, 2, 400);


    var options = {
      title: 'Test'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
</head>
 <body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
 </body>
</html>

Google Line Chart with varying data points

1 Answers