CODEWITHSUNDEEP
google-visualization
alexibbb
alexibbb

Reputation: 103

Google Chart API: Graphing line charts with different set of x-axis

I want to graph two line charts in Google API. The line charts are voltage over time. The problem is the sampling for these two charts is done at different intervals, e.g.

Line 1         Line 2
0s - 1V        0s - 2V
2s - 3V        1s - 2V
5s - 3.4V      2s - 2.3V
10s - 3V       7s - 4V
11s - 2.1V

From the Google Charts API, I gathered that the x-axis array has to be shared between the y-axis charts. How can I go about graphing these two lines, when their x-axis is different, and they might have a different number of data points.

Upvotes: 0

Views: 1547

Answers (1)

asgallant
asgallant

Reputation: 26340

You need to add both data series to your DataTable, filling in null where one data series does not have data at a particular x-axis value:

var data = new google.visualization.DataTable();
data.addColumn('number', 'Seconds');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addRows([
    [0, 1, 2],
    [1, null, 2],
    [2, 3, 2.3],
    [5, 3.4, null],
    [7, null, 4],
    [10, 3, null],
    [11, 2.1, null],
]);

The nulls will insert gaps in your lines, which you can close by setting the interpolateNulls option to true.

Upvotes: 2

Related Questions