You have two functions called "drawChart" - rename them something else (like drawChart1 and drawChart2, or whatever suits you). In each, check the id's for the filters, charts, and dashboards. Every element must have its own unique id (and an HTML div with the same id to put the element in), so change the id's so that the different charts and controls end up in different divs. Then create a third function that calls the two drawing functions, and change the google.setOnLoadCallback() line to reference this function instead of the drawChart function.
Alternatively, you could move all of the code into one function and draw multiple charts from there (you would still need to change the element id's). As an aside, there is a newer version of the code you copied here<http://jsfiddle.net/asgallant/WaUu2/> . On Wednesday, September 5, 2012 7:00:13 PM UTC-4, vishnuuvm wrote: > > 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/-/yp43_TwMuKwJ. 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.
