Question

i have implemented a google chart api like as follows

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();

  data.addColumn('number', 'Year');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', 'Val 1');
  data.addColumn('number', 'Val 2');

  data.addRows([
  [2008,' ', 20, 15],
  [2008.5,' ', null, null],
  [2009,' ', 25, null],
  [2009.5,' ', null, null],
  [2010,' ', 30,33],
  [2010.5,' ', null, null],
  [2011,' ', 23, 38],
  ]); 

  // Create and draw the visualization.
  var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Google Chart api',
    interpolateNulls: false,
    vAxis: {},
    hAxis: {
            ticks:[{v: 2008, f: '2008'},{v: 2009, f: '2009'},{v: 2010, f: '2010'},{v: 2011, f: '2011'}]
           },

    seriesType: "bars",
    series: {0: {type: "line"},1: {type: "line"}}
  });
}

​actual chart

actual chart

having tick marks that's why i added data points with decimal values (2008.5, 2009.5 ...) and i have data points for lines on year values like 2008, 2009, 2010 ... only.

If i set InterpolateNulls : true, means it connects the data points otherwise every data points are not connected and displayed autonomous.

so can i set interpolateNulls : true for some data points or some columns only in google chart api?

expected chart

enter image description here

Was it helpful?

Solution

[Edit: new answer, old one doesn't work (yet?)]

The LineChart connects points based on adjacency in the DataTable, not adjacency in value, so you can rearrange your data to have nulls where you need them, and avoid them where you do not:

data.addRows([
    // set annotations
    [2008, ' ', null, null],
    [2008.5, ' ', null, null],
    [2009, ' ', null, null],
    [2009.5, ' ', null, null],
    [2010, ' ', null, null],
    [2010.5, ' ', null, null],
    [2011, ' ', null, null],
    // "Val 1" should be connected with a line, so we don't want this to have any null gaps
    [2008, null, 20, null],
    [2009, null, 25, null],
    [2010, null, 30, null],
    [2011, null, 23, null],
    // the last two points on "Val 2" should be connected, but not the first
    [2008, null, null, 15],
    [null, null, null, null], // this line of nulls will break the connection between the first and second data points
    [2010, null, null, 33],
    [2011, null, null, 38],
]);

See working example: http://jsfiddle.net/asgallant/LXkee/

[old answer, for reference]

You can set interpolateNulls on a series-by-series basis, using the series.<series index>.interpolateNulls option:

series: {
    0: {
        type: "line",
        interpolateNulls: true
    },
    1: {
        type: "line"
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top