Google Charts in a Dynamic Table/Accordion with Dynamic Id?

94 views
Skip to first unread message

Mobile Design

unread,
Aug 19, 2020, 12:32:34 PM8/19/20
to Google Visualization API
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>
Reply all
Reply to author
Forward
0 new messages