Hi I am very new to google charts API and have been playing around with available tools and adapting code to suit my requirement.
I have a condition where I need to create two interactive charts on the same page. Mind you I found this code and have simply used it to my needs. However, when I create two copies of the same code so that I have two charts on the same page, it does not show. Could someone help me on how to create two interactive charts in the same page i am posting the code as follows Thanks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['controls','corechart']}); </script> <script type="text/javascript"> google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['x', 'DDD', 'AAA', 'BBB'], ['2011', 0.013, 0.035, 0.035], ['2012', 0.024, 0.047, 0.0646], ['2013', 0.026, 0.077, 0.0977], ['2014', 0.037, 0.151, 0.4511], ['2015', 0.049, 0.155, 0.5615], ['2016', 0.150, 0.261, 0.8724], ['2017', 0.611, 0.248, 0.934], ['2018', 0.713, 0.337, 0.9945] ]); var columnsTable = new google.visualization.DataTable(); columnsTable.addColumn('number', 'colIndex'); columnsTable.addColumn('string', 'colLabel'); var initState = { selectedValues: ['AAA'] }; // put the columns into this data table (skip column 0) for (var i = 1; i < data.getNumberOfColumns(); i++) { columnsTable.addRow([i, data.getColumnLabel(i)]); initState.selectedValues.push(data.getColumnLabel(i)); } var chart = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'chart_div', dataTable: data, options: { title: 'Total Market', width: 700, height: 470, legend: 'bottom', vAxis: {format:'#%'}, animation:{ duration: 1000, easing: 'out', } } }); chart.draw(); var dash = new google.visualization.Dashboard(document.getElementById('dash')); var columnFilter = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'colFilter_div', options: { filterColumnLabel: 'colLabel', ui: { label: 'Choose a Scenario', allowTyping: true, allowMultiple: true, selectedValuesLayout: 'belowStacked' } }, state: initState }); var junkChart = new google.visualization.ChartWrapper({ chartType: 'Table', containerId: 'junk_div' }); google.visualization.events.addListener(columnFilter, 'statechange', function() { var state = columnFilter.getState(); var row; var columnIndices = [0]; for (var i = 0; i < state.selectedValues.length; i++) { row = columnsTable.getFilteredRows([{ column: 1, value: state.selectedValues[i]}])[0]; columnIndices.push(columnsTable.getValue(row, 0)); } // sort the indices into their original order columnIndices.sort(function(a, b) { return (a - b); }); chart.setView({ columns: columnIndices }); chart.draw(); }); // bind controls to junk chart and draw dash dash.bind([columnFilter], [junkChart]); dash.draw(columnsTable); } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="dash"> <table> <tr style='vertical-align: top'> <td style='width: 16px; font-size: 0.9em;'> <div id="colFilter_div"></div> </td> <td style='width: 60px'> <div style="float: left;" id="chart_div"></div> </td> </tr> </table> </div> <div id="junk_div" style="display: none;"></div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['controls','corechart']}); </script> <script type="text/javascript"> google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['x', 'RRR', 'PPP', 'WWW'], ['2011', 4176, 4176, 5176], ['2012', 6018, 6018, 60018], ['2013', 9277, 12100, 92100], ['2014', 15681, 78126, 78126], ['2015', 17546, 41016, 41016], ['2016', 15164, 43623, 29873], ['2017', 26334, 54329, 32426], ['2018', 26959, 61806, 3980] ]); var columnsTable = new google.visualization.DataTable(); columnsTable.addColumn('number', 'colIndex'); columnsTable.addColumn('string', 'colLabel'); var initState = { selectedValues: ['PPP'] }; // put the columns into this data table (skip column 0) for (var i = 1; i < data.getNumberOfColumns(); i++) { columnsTable.addRow([i, data.getColumnLabel(i)]); initState.selectedValues.push(data.getColumnLabel(i)); } var chart = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'chart_div', dataTable: data, options: { title: 'Total Market ', width: 700, height: 470, legend: 'bottom', vAxis: {format:'###,###'}, animation:{ duration: 1000, easing: 'out', } } }); chart.draw(); var dash = new google.visualization.Dashboard(document.getElementById('dash')); var columnFilter = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'colFilter_div', options: { filterColumnLabel: 'colLabel', ui: { label: 'Choose a Scenario', allowTyping: true, allowMultiple: true, selectedValuesLayout: 'belowStacked' } }, state: initState }); var junkChart = new google.visualization.ChartWrapper({ chartType: 'Table', containerId: 'junk_div' }); google.visualization.events.addListener(columnFilter, 'statechange', function() { var state = columnFilter.getState(); var row; var columnIndices = [0]; for (var i = 0; i < state.selectedValues.length; i++) { row = columnsTable.getFilteredRows([{ column: 1, value: state.selectedValues[i]}])[0]; columnIndices.push(columnsTable.getValue(row, 0)); } // sort the indices into their original order columnIndices.sort(function(a, b) { return (a - b); }); chart.setView({ columns: columnIndices }); chart.draw(); }); // bind controls to junk chart and draw dash dash.bind([columnFilter], [junkChart]); dash.draw(columnsTable); } </script> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/cbQ99AfW_SgJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
