Hello, I am trying to display two charts in two separate div elements but only the first chart is rendered correctly. Only a blank div is displayed for the second. Please see the first HTML below. I initially tried to draw both the charts in single 'drawVisualization' function but that led to both div elements being rendered blank. I have pasted the HTML for the same below. This is probably a problem with WebView itself but I am posting in this group in case others also have faced the problem and a workaround is known. Both HTMLs are rendered correctly on desktop browsers (Chrome, Firefox) so it is unlikely to be an issue with HTML/JS code.
Thanks for your help and suggestions! Shrinivas ------------------------- First HTML example with two charts drawn with two different scripts ------------------ <!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> ----------- Second HTML with both charts drawn with same drawVisualization function ------------------------- <!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>ADVANIHOTR</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"},{"id":"DMA_10","label":"10 DMA","type":"number"}],"rows":[{"c":[{"v":"11\/02\/14"},{"v":32.1},{"v":32.1},{"v":33.0},{"v":33.0},{"v":106.0},{"v":33.58}]},{"c":[{"v":"12\/02\/14"},{"v":33.0},{"v":33.0},{"v":33.0},{"v":33.0},{"v":100.0},{"v":33.42}]},{"c":[{"v":"13\/02\/14"},{"v":31.4},{"v":32.75},{"v":32.5},{"v":33.0},{"v":30500.0},{"v":33.22}]},{"c":[{"v":"14\/02\/14"},{"v":31.0},{"v":32.0},{"v":31.95},{"v":33.0},{"v":29805.0},{"v":32.92}]},{"c":[{"v":"17\/02\/14"},{"v":31.0},{"v":32.15},{"v":32.3},{"v":33.0},{"v":137076.0},{"v":32.74}]},{"c":[{"v":"18\/02\/14"},{"v":32.15},{"v":32.15},{"v":32.15},{"v":32.15},{"v":100.0},{"v":32.63}]},{"c":[{"v":"19\/02\/14"},{"v":31.0},{"v":32.0},{"v":31.5},{"v":33.0},{"v":117205.0},{"v":32.58}]},{"c":[{"v":"20\/02\/14"},{"v":32.0},{"v":32.5},{"v":32.0},{"v":32.5},{"v":765.0},{"v":32.48}]},{"c":[{"v":"21\/02\/14"},{"v":31.0},{"v":33.6},{"v":32.85},{"v":33.6},{"v":307040.0},{"v":32.44}]},{"c":[{"v":"24\/02\/14"},{"v":32.95},{"v":33.0},{"v":34.0},{"v":34.0},{"v":9431.0},{"v":32.43}]},{"c":[{"v":"25\/02\/14"},{"v":34.0},{"v":34.0},{"v":34.1},{"v":35.5},{"v":8547.0},{"v":32.53}]},{"c":[{"v":"26\/02\/14"},{"v":33.05},{"v":33.05},{"v":34.0},{"v":34.1},{"v":2660.0},{"v":32.64}]},{"c":[{"v":"28\/02\/14"},{"v":32.35},{"v":33.2},{"v":32.45},{"v":34.05},{"v":3632.0},{"v":32.74}]},{"c":[{"v":"03\/03\/14"},{"v":31.5},{"v":32.5},{"v":33.0},{"v":34.05},{"v":125313.0},{"v":32.73}]},{"c":[{"v":"04\/03\/14"},{"v":32.55},{"v":33.5},{"v":32.55},{"v":33.5},{"v":5352.0},{"v":32.83}]},{"c":[{"v":"05\/03\/14"},{"v":32.2},{"v":32.5},{"v":33.0},{"v":33.0},{"v":2563.0},{"v":32.86}]},{"c":[{"v":"06\/03\/14"},{"v":32.5},{"v":32.5},{"v":34.05},{"v":34.65},{"v":7324.0},{"v":32.95}]},{"c":[{"v":"07\/03\/14"},{"v":34.25},{"v":34.5},{"v":34.25},{"v":35.95},{"v":133.0},{"v":33.2}]}]}; var data = new google.visualization.DataTable(jstringfromWeb); var options = {title : "ADVANIHOTR 09/Feb/14 To 09/Mar/14", hAxis: {title: "Date", slantedText : true}, seriesType: "candlesticks", isStacked : true, backgroundColor : {fill :"ivory", stroke: "black"}, vAxes : {0: {title: "Price", viewWindowMode : "explicit", viewWindow : {min :28 , max :37}}, 1: {title :"Volume" , viewWindowMode : "explicit" , viewWindow :{min : 0, max : 2640544 }, 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} , 2: {type: "line" , color : "black", lineWidth : 3, targetAxisIndex : 0}}}; var jStringfromWeb2 = {"cols":[{"id":"idate","label":"IDATE","type":"string"},{"id":"rsi","label":"RELATIVE STRENGTH INDEX","type":"number"}],"rows":[{"c":[{"v":"11\/02\/14"},{"v":100.0}]},{"c":[{"v":"12\/02\/14"},{"v":100.0}]},{"c":[{"v":"13\/02\/14"},{"v":100.0}]},{"c":[{"v":"14\/02\/14"},{"v":100.0}]},{"c":[{"v":"17\/02\/14"},{"v":100.0}]},{"c":[{"v":"18\/02\/14"},{"v":100.0}]},{"c":[{"v":"19\/02\/14"},{"v":100.0}]},{"c":[{"v":"20\/02\/14"},{"v":100.0}]},{"c":[{"v":"21\/02\/14"},{"v":100.0}]},{"c":[{"v":"24\/02\/14"},{"v":100.0}]},{"c":[{"v":"25\/02\/14"},{"v":100.0}]},{"c":[{"v":"26\/02\/14"},{"v":100.0}]},{"c":[{"v":"28\/02\/14"},{"v":100.0}]},{"c":[{"v":"03\/03\/14"},{"v":100.0}]},{"c":[{"v":"04\/03\/14"},{"v":100.0}]},{"c":[{"v":"05\/03\/14"},{"v":100.0}]},{"c":[{"v":"06\/03\/14"},{"v":100.0}]},{"c":[{"v":"07\/03\/14"},{"v":100.0}]}]} var options2 = {title : "Relative Strength Index", hAxis: {title: "Date", slantedText : true}, backgroundColor : {fill :"ivory", stroke: "black"}, series: {0 : {color : "LightCoral", type : "line"}}}; var data2 = new google.visualization.DataTable(jStringfromWeb2); var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); var chart2 = new google.visualization.ComboChart(document.getElementById('chart_div2')); chart2.draw(data2, options2); chart.draw(data, options);} google.setOnLoadCallback(drawVisualization); </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> -- 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.
