Home/ Questions/Q 4068040
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T16:19:32+00:00

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

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0