CODEWITHSUNDEEP
javascriptgoogle-visualization
nqtien310
nqtien310

Reputation: 359

Display Google Column Chart with portion of given data

So i'm using Google stacked "Column Chart", given the data:

[
['red','green','blue'],
['one', '1','2','3'],
['two', '1','2','3']
['three', '1','2','3']
['four', '1','2','3']
['five', '1','2','3']
]

So the scenario is to display only two, three, four on the chart , then whenever user click on left/right arrows , the data will be shifted left or right. For example , when user click the left arrow, the chart will display one, two, three

Is there anyway we can achieve this with Google Chart ?

Upvotes: 0

Views: 46

Answers (1)

Henrik Aronsson
Henrik Aronsson

Reputation: 1413

I achieved this by adding some variables with maxRows and an extra function outside of the drawChart function.

My two left/right buttons looks like this:

<input onClick="redrawChart(-1)" type="button" value="<- Left" />
<input onClick="redrawChart(1)" type="button" value="Right ->" />

I define a variable as maxRow and then return how many rows there are in the dataTable when the function is completed, like 

chart.draw()
return numberOfRows;

my redrawChart function looks liket this:

function redrawChart(a) {
    for (i = 0; i < showRows.length; i++) {
        showRows[i] += a
    }
.
.
error checking
.
.
    drawChart(showRows)
}

Check out this fiddle and tell me what you think.

Upvotes: 1

Related Questions