Toggle chart type by clicking in Legend

25 views

Skip to first unread message

fyanesv

unread,

Mar 21, 2018, 8:57:12 AM3/21/18

to Google Visualization API

Hi all, I'm new at Google APIs and JavaScript, I would like to know if its possible to change the type of chart from bar to line or viceversa on a particular series of data by just clicking the Legend Series. Here is a simple chart code I copied and managed to get it work for my project, so far I got to where clicking the Legend shows the value I clicked. If possible can you direct me to how??

Thanks so much in advance.

Fernando Yanes

<!DOCTYPE html>

<html>

<head>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {

var data = google.visualization.arrayToDataTable([

['Periodo','A','B','C','D','E','F','G','H','I','J',],

['x1', 120,938,522,100,450,614.6,300,100,450,900],

['x2', 135,112,599,1268,288, 682,125,390,564,123 ],

['x3', 157,1167,587,807,397,623,54,255,126,300 ],

['x4', 139,1110,615,968,215,609.4,63,162,987,1002 ],

['x5', 139,1110,615,968,215,609.4,63,162,987,1002 ],

['x6', 139,1110,615,968,215,609.4,63,162,987,1002 ]

]);

var options = {

title : 'My Title',

vAxis: {title: 'Y-Axis'},

hAxis: {title: 'X-Axis'},

width: '0px',

legend: {position:'top'},

seriesType: 'bars',

series: {

0: {type: 'bar', color: '#F5A623'},

1: {type: 'bar', color: '#AC2424'},

2: {type: 'bar', color: '#F16806'},

3: {type: 'bar', color: '#9013FE'},

4: {type: 'bar', color: '#5B9BE5'},

5: {type: 'bar', color: '#7ED321'},

6: {type: 'bar', color: '#2AB797'},

7: {type: 'bar', color: '#F523CE'},

8: {type: 'bar', color: '#4A4A4A'},

9: {type: 'bar', color: '#8B572A'},

}

};

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

chart.draw(data, options);

google.visualization.events.addListener(chart, 'click', function(event) {

var legendClicked = event.targetID;

alert(legendClicked + ' was clicked')

});

}

</script>

</head>

<body>

</body>

</html>

Reply all

Reply to author

Forward

0 new messages