How to describe daily chart with Google Visualization API?

Question

I'm trying to describe daily line chart with Google Visualization API. http://code.google.com/apis/visualization/documentation/reference.html

DataTable object is something like this.

[
{date:'3/1', value:'1000'},  
{date:'3/2', value:'1500'},  
{date:'3/3', value:'1200'},  
{date:'3/4', value:'1300'},  
{date:'3/5', value:'1400'},  
{date:'3/6', value:'1100'},  
{date:'3/7', value:'1200'}
]

With the data above, the graph shows a week records.

I want to describe a week chart even when some data lack.

[
{date:'3/1', value:'1000'},  
{date:'3/2', value:'1500'},  
{date:'3/5', value:'1400'},  
{date:'3/7', value:'1200'}  
]

I want to describe a week chart with the data above, that means there should be 7 days for x-axis, and in the case there is no data, the line should be connected only with existing data.

Thank you for your information. I tried 'interpolateNulls' but doesn't work as I expected.

With the code below, the line break between 3/2 and 3/4. I want 3/2-3/4 to be connected.

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
    google.load("visualization", "1.0", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        var data = [['3/1',1000],['3/2',1300],['3/3',null],['3/4',1800],['3/5',900],['3/6',1200],['3/7',1000]];
        dataTable.addRows(data);
        var options = {cht: 'lc', chds:'0,3000', interpolateNulls: true};

        var chart = new google.visualization.ImageChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>

I know this is not an answer to your question, but check out flot. As far as my experiences go, it can handle lack of data pretty good. — David

tordal tordal · Accepted Answer · 2011-03-18T14:13:32

Include an entry for every date of the week and set the value of the missing ones as null.

[
{date:'3/1', value:'1000'},  
{date:'3/2', value:'1500'},   
{date:'3/3', value: null }, 
{date:'3/4', value: null }, 
{date:'3/5', value:'1400'},  
{date:'3/7', value:'1200'}  
]

One of the configuration options for the line char is interpolateNulls. Use

interpolateNulls: True

in your draw method. EDIT: The chart type must be a LineChart rather than an ImageLineChart for interpolateNulls to work.

Documentation on the configuration options is here.

How to describe daily chart with Google Visualization API?

2 Answers