How to draw Google Line Charts when some of the values are missing?_问答_开发者

How to draw Google Line Charts when some of the values are missing?

开发者 https://www.devze.com 2023-03-23 18:38 出处：网络

I\'ve found the following JavaScript code on Google Chart Tools: function drawVisualization() { var data = new google.visualization.DataTable();

I've found the following JavaScript code on Google Chart Tools:

  function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addRows(4);
    data.setValue(0, 0, '2004');
    data.setValue(0, 1, 1000);
    data.setValue(0, 2, 400);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170); // sales for 2005
    data.setValue(1, 2, 460);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 860);
    data.setValue(2, 2, 580);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030);
    data.setValue(3, 2, 540);

    var chart = new开发者_运维百科 google.visualization.ImageLineChart(document.getElementById('visualization'));
    chart.draw(data, {width: 500, height: 250, min: 0});
  }

If I comment out the line of code setting the value for the 2005 sales, the Sales line will appear on the graph starting from 2006 and ending in 2007. I was expecting to see the Sales line from 2004 (at Y=1000) to 2006 (at Y=860) and from 2006 (at Y=860) to 2007 (at Y=1030).

How do I draw that chart if I don't have the value for the 2005 sales, but I have the values for 2004, 2006 and 2007?

Actual result:

How to draw Google Line Charts when some of the values are missing?

Expected result: (I added the value 930 for the 2005 sales only to show what I want to accomplish; I hope there's a better way of doing this without computing all the missing Y values for all the series)

How to draw Google Line Charts when some of the values are missing?

If it's possible for you to use the javascript version of this chart, then you can achieve something like what you want by using the interpolateNulls option available through the line chart options.

Here's a working example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['corechart', 'imagelinechart']});
    </script>
    <script type="text/javascript">
    function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        //data.setValue(1, 1, 1170); // sales for 2005
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.LineChart(document.getElementById('visualization'));
        chart.draw(data, {width: 500, height: 250, min: 0, interpolateNulls: true});
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>