Hi All,
I have a requirement wherein I need to implement Google Line Charts inside a table/accordion having ''n" no. of rows/accordion items based on dynamic data. On click of each row I call the Drawchart function by passing the id in a string.
My query is can the google charts be implemented by passing the id of the div in the row/div items in the table/accprdion dynamially to the Drawchart function?? Have tried passing but I end up getting error in console ie "jsapi_compiled_default_module.js:313 Uncaught (in promise) Error: Container is not defined"
Sharing my code below. Looking forward for a solution for the same. Any solution or feedback is highly appreciated. Thanks
Html:
<table>
<tr><td onclick="drawChart1('abc1');"><div id="abc1"></div></td></tr>
<tr><td onclick="drawChart1('abc2');"><div id="abc2"></div></td></tr>
<tr><td onclick="drawChart1('abc3');"><div id="abc3"></div></td></tr>
<tr><td onclick="drawChart1('abc4');"><div id="abc4"></div></td></tr>
<tr><td onclick="drawChart1('abc5');"><div id="abc5"></div></td></tr>
<tr><td onclick="drawChart1('abc6');"><div id="abc6"></div></td></tr>
<tr>.....n no of row</tr>
</table>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart1);
function drawChart1(id1) {
var data1 = google.visualization.arrayToDataTable([
['Month', 'Reliance', 'Canara Robeco'],
['Jan', 200, 100],
['Feb', 100, 200],
['Mar', 400, 300],
['Apr', 100, 400],
['May', 600, 785],
['Jun', 300, 200],
['July', 100, 200],
['Aug', 200, 300],
['Sep', 660, 350],
['Oct', 800, 600],
['Nov', 660, 1120],
['Dec', 1030, 1150]
]);
var options1 = {
curveType: 'function',
height: 350,
legend: { position: 'bottom' }
};
function resize1() {
var chart1 = new google.visualization.LineChart(document.getElementById(id1));
chart1.draw(data1, options1);
}
window.onload = resize1();
window.onresize = resize1;
}
</script>