I just posted an issue I am facing with two charts on same page but my problem is specific to Android. The below example shows how to add two charts on same page. It works on desktop browsers. I hope it helps even though the data does not come from CSV file.
<!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"/> <title>DRREDDY</title> <script type="text/javascript" src="https://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); </script> <script type="text/javascript"> function drawVisualization() { var jstringfromWeb ={"cols":[{"id":"idate","label":"IDATE","type":"string"},{"id":"low","label":"LOW","type":"number"},{"id":"open","label":"OPEN","type":"number"},{"id":"close","label":"CLOSE","type":"number"},{"id":"high","label":"HIGH","type":"number"},{"id":"volume","label":"VOLUME","type":"number"}],"rows":[{"c":[{"v":"10\/03\/14"},{"v":2654.0},{"v":2725.0},{"v":2686.65},{"v":2750.0},{"v":510523.0}]},{"c":[{"v":"11\/03\/14"},{"v":2671.65},{"v":2709.0},{"v":2678.7},{"v":2724.55},{"v":347167.0}]},{"c":[{"v":"12\/03\/14"},{"v":2671.3},{"v":2690.0},{"v":2687.5},{"v":2717.85},{"v":349572.0}]},{"c":[{"v":"13\/03\/14"},{"v":2698.0},{"v":2700.0},{"v":2727.15},{"v":2760.0},{"v":614996.0}]}]}; var data = new google.visualization.DataTable(jstringfromWeb); var options = {title : "DRREDDY 09/Mar/14 To 13/Mar/14", hAxis: {title: "Date", slantedText : true}, seriesType: "candlesticks", isStacked : true, backgroundColor : {fill :"ivory", stroke: "black"}, vAxes : {0: {title: "Price", viewWindowMode : "explicit", viewWindow : {min :2468 , max :2856}}, 1: {title :"Volume" , viewWindowMode : "explicit" , viewWindow :{min : 0, max : 5288965 }, gridlines :{color : "transparent"}}}, series: {0 : {color : "black", candlestick : {risingColor :{ stroke: "green", fill:"green"} , fallingColor : {fill: "red", stroke : "red"}} ,visibleInLegend : false }, 1: {type: "bars" , color : "steelblue", targetAxisIndex : 1}}}; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options);} google.setOnLoadCallback(drawVisualization); </script> <script type="text/javascript"> function drawSecondVisualization() { var jStringfromWeb2 = {"cols":[{"id":"idate","label":"IDATE","type":"string"},{"id":"adl","label":"ACCUMULATION\/DISTRIBUTION","type":"number"}],"rows":[{"c":[{"v":"10\/03\/14"},{"v":-1.5767596355E8}]},{"c":[{"v":"11\/03\/14"},{"v":-1.5793059644E8}]},{"c":[{"v":"12\/03\/14"},{"v":-1.5803685731E8}]},{"c":[{"v":"13\/03\/14"},{"v":-1.5807355869E8}]}]} var options2 = {title : "Accumulation/Distribution Line", hAxis: {title: "Date", slantedText : true}, backgroundColor : {fill :"ivory", stroke: "black"}, series: {0 : {color : "LightCoral", type : "line"}}}; var data2 = new google.visualization.DataTable(jStringfromWeb2); var chart2 = new google.visualization.ComboChart(document.getElementById('chart_div2')); chart2.draw(data2, options2);} google.setOnLoadCallback(drawSecondVisualization); </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px; border-style: solid; border-color: DarkRed;"></div> <div id="blank_div" style="width: 900px; height: 15px;"></div> <div id="chart_div2" style="width: 900px; height: 300px; border-style: solid; border-color: DarkRed;"></div> </body> </html> On Wednesday, April 9, 2014 11:10:43 AM UTC+5:30, John Brines wrote: > > Preferably from different csv fikes. > > John. > > On Wednesday, 9 April 2014 01:24:24 UTC+1, asgallant wrote: > >> Do you want to draw more than 1 chart from the same CSV data or from a >> different CSV? >> >> On Tuesday, April 8, 2014 7:24:12 AM UTC-4, John Brines wrote: >>> >>> Hi Guys, >>> >>> I have a chart that imports data from a CSV file, I would like to add >>> more than one chart on the page but I am not sure how to go about it. >>> >>> >>> I know to add Var Data, Var Date1 and Var Option and Var Option1 but as >>> I am getting the data from a CSV is there anything else I need to do. below >>> is my code with one chart. >>> >>> <!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"/> >>> <title> >>> March 2014 Chart >>> </title> >>> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> >>> <script type="text/javascript" src="js/jquery-csv.js"></script> >>> <script type="text/javascript" src=" >>> https://www.google.com/jsapi";></script> >>> <script type="text/javascript"> >>> google.load('visualization', '1', {packages: ['corechart']}); >>> </script> >>> <script type="text/javascript"> >>> function drawVisualization() { >>> // grab the CSV >>> $.get("CSVFiles/march2014.csv", function(csvString) { >>> // transform the CSV string into a 2-dimensional array >>> var arrayData = $.csv.toArrays(csvString, {onParseValue: >>> $.csv.hooks.castToScalar}); >>> // this new DataTable object holds all the data >>> var data = new >>> google.visualization.arrayToDataTable(arrayData); >>> // this view can select a subset of the data at a time >>> var view = new google.visualization.DataView(data); >>> view.setColumns([0,1]); >>> >>> var options = { >>> title : 'March 2014 Helpdesk Tickets', >>> titleTextStyle: {fontSize: '30', color: 'darkblue', italic: >>> 'true' }, >>> vAxis: {title: "Tickets", titleTextStyle: {color: 'darkblue', >>> italic: 'false', bold: 'true'}}, >>> hAxis: {title: "Day", titleTextStyle: {color: 'darkblue', >>> italic: 'false', bold: 'true'}}, >>> seriesType: "bars", >>> series: { >>> 2: {type: "line"}, >>> 3: {type: "line"}, >>> 4: {type: "line"}} >>> }; >>> >>> var chart = new >>> google.visualization.ComboChart(document.getElementById('chart_div')); >>> chart.draw(data, options); >>> }); >>> } >>> google.setOnLoadCallback(drawVisualization); >>> </script> >>> </head> >>> <body> >>> <div id="chart_div" style="width: 1500px; height: 600px;"></div> >>> </body> >>> </html> >>> >> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
