javascript - How to get two different google charts on one page from two separate spreadsheet data sources -

I am trying to get many chats on the same page, each one using its spreadsheet URL, its data source Does it for / P>

The code below works fine, but I really have to keep several URLs for different data categories and each time to show a different chart

when I do this basically Tried, I only showed the last chart which I tried to attract.

I have changed the script (which still works) to move closer to a situation I have multiple charts and there are many sets of data for their location, this is not quite so much. It was based on the following post:

I think I have to give multiple sets of data as handleQueryResponse function, but I do not know how to do it.

I was trying to work it out for just one set of data, and if it works fine, then set up several data in it.

  & lt; Script type = "text / javascript" src = "https://www.google.com/jsapi" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; (Function () {// scoping function // your code GlobalWhat's Global, invisible // set chart options // I will use several options for different charts, options 1, options 2 etc. outside the scrolling function Var option 1 = 'Title': 'light and temperature data - last 24 hours', 'width': 750, 'height': 400, 'curve type': 'function', 'background color': 'FFIR99' HX ': ["title": "time"}], "vAxes": [{"title": "Temperature C - Light level" Ndua}}}; // I think I will need container ID1, containerID2 etc. for each chart. Var Container ID = 'Chart_diva1'; same chartType1, Type ChartTap 2 var chart '' LINECHART ''; // Load Visual ADI and core chart package.Google.load ('visualization', '1.0', {'packages': ['corechart']}) // set callback to run Google Visualization API Is loaded.Google.setOnLoadCallback (drawChart); // Callback that creates and populates data tables , // instantizes the chart, the data passes in and // it draws the function drawChart () {// I am going to be several URLs and each will be the source for a different chart var query1 = new google.visualization Query ('https://docs.google.com/spreadsheet/ccc? Key = 0ArGuv ...... & amp; Moved = 0 & amp; Header = 1 & amp; Border = L1% 3AN500 & amp; Gid = 1 '); Query1.send (handleQueryResponse); } // How do I get ContainerID1, ContainerID2, Chart Type1, Chart Type2 Option 1, Option 2 etc. in this function? Handle the function. Response (response) {If (response.isError ()) {Warning ('Error in query:' + response.getMessage () + '' + response.getDetailedMessage ()); Return; } Var data = response.getDataTable (); Var containerdiv = document.getElementById (container id); Var chart = false; // Attract Instant and Chart, on some charttips and through options. If (ChartTip.ToUpperCare () == 'BARCHART') {chart = new google.visualization.BarChart (containerdiv); } And if (ChartTap.toUpperCare () == 'Colmature') {chart = New google.visualization.ColumnChart (ContainerDive); } And if (ChartTap.Uppercase () == 'Pichcht') {chart = New google.visualization.PieChart (ContainerDive); } And if (charttap.uppressive () == 'LINECHART') {chart = new google.visualization.LineChart (containerdiv); } If (chart == incorrect) {return false; } Chart.draw (data, option1); }}) (); // And Scoping Function & lt; / Script & gt; & Lt ;! - The division that will catch the chart - only chart_did1 is in effect at this time - & gt; & Lt; Div id = "chart_div1" & gt; & Lt; / Div & gt; & Lt; Div id = "chart_div2" & gt; & Lt; / Div & gt;  

If you are asking two different data sources, then you have two answer handlers And two questions are required:

  function drawChart () {var query1 = new google.visualization.Query (url1); Query1.send (handleQueryResponse1); Var query2 = new google.visualization.Query (url2); Query2.send (handleQueryResponse2); }