Here is one of chart that gets loaded in the app. Apologies for the formatting but I pulled it out of server logs. I also removed a lot of JS to keep it readable. but you can see the features of Google visualisation that have been used and work in Webview.
<!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>RELIANCE</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"> var globalDataArray=[]; var globalChartArray=[]; var globalOptArray=[]; var globalImageArray=[]; var gLnCOpt; var gCSOpt; var gCSAnOpt; var drSt=0; var ptSel=0; var point1=null; var point2=null; var prevTrendVal=null; var numTrnds=0; var origCols=0; var serAdded=[]; var view0; var data0; function switchCandleAndLine() { var swList=document.getElementById("switchType"); var i = swList.value; if(i==1) { globalDataArray[0]=data0; globalOptArray[0]=gCSOpt; globalChartArray[0].draw(data0,globalOptArray[0]); } if(i==2) { globalDataArray[0]=view0; globalOptArray[0]=gLnCOpt; globalChartArray[0].draw(view0,globalOptArray[0]); } } 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":"psar","label":"PSAR","type":"number"},{"id":"DMA_5","label":"5 DMA","type":"number"},{"id":"DMA_10","label":"10 DMA","type":"number"}],"rows":[{"c":[{"v":"01\/07\/15"},{"v":1001.0},{"v":1001.0},{"v":1005.65},{"v":1010.45},{"v":3388578.0},{"v":954.387},{"v":1000.37},{"v":995.51}]},{"c":[{"v":"02\/07\/15"},{"v":1007.1},{"v":1009.0},{"v":1010.85},{"v":1019.75},{"v":3641605.0},{"v":955.582},{"v":1001.63},{"v":998.69}]},{"c":[{"v":"03\/07\/15"},{"v":1003.05},{"v":1009.75},{"v":1007.2},{"v":1013.8},{"v":3161556.0},{"v":958.148},{"v":1002.93},{"v":999.75}]},{"c":[{"v":"06\/07\/15"},{"v":995.2},{"v":996.1},{"v":1015.55},{"v":1018.9},{"v":2797340.0},{"v":959.38},{"v":1007.87},{"v":1002.14}]},{"c":[{"v":"07\/07\/15"},{"v":1000.0},{"v":1011.0},{"v":1003.25},{"v":1016.6},{"v":2581847.0},{"v":960.588},{"v":1008.5},{"v":1002.96}]},{"c":[{"v":"08\/07\/15"},{"v":991.65},{"v":995.85},{"v":996.6},{"v":1008.7},{"v":3472328.0},{"v":961.771},{"v":1006.69},{"v":1003.53}]}]}; data0 = new google.visualization.DataTable(jstringfromWeb); data0.insertColumn(1,{type : 'string', role : 'annotation'}); var options = {title : "RELIANCE 01/Jul/15 To 08/Jul/15", annotation: {1 :{style:'line'}} , focusTarget: 'category', hAxis: {title: "Date", slantedText : true} ,animation:{}, seriesType: "candlesticks", isStacked : true, backgroundColor : {fill :"ivory", stroke: "black"}, vAxes : {0: {title: "Price", viewWindowMode : "explicit", viewWindow : {min :922 , max :1055}}, 1: {title :"Volume" , viewWindowMode : "explicit" , viewWindow :{min : 0, max : 31317803 }, 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 : "magenta", lineWidth : 0, pointShape:{type:"star",sides:4}, pointSize:7, targetAxisIndex : 0} , 3: {type: "line" , color : "Purple", lineWidth : 2, targetAxisIndex : 0} , 4: {type: "line" , color : "brown", lineWidth : 2, targetAxisIndex : 0}}}; origCols=data0.getNumberOfColumns(); view0 = new google.visualization.DataView(data0); view0.hideColumns([2,3,5]); gLnCOpt=JSON.parse(JSON.stringify(options)); gLnCOpt.seriesType="line"; gLnCOpt.series[0]={color : "DarkGreen",type :"line",targetAxisIndex:0,visibleInLegend : true}; gCSAnOpt=JSON.parse(JSON.stringify(options)); gCSAnOpt["animation"]["startup"]=true; gCSAnOpt["animation"]["duration"]=1000; gCSAnOpt.series[0]={color : "black", candlestick : {risingColor :{ stroke: "green", fill:"green"} , fallingColor : {fill: "red", stroke : "red"}} ,visibleInLegend : false}; gCSOpt=options; var chart = new google.visualization.ComboChart(document.getElementById('chart_div0')); globalDataArray.push(data0); globalChartArray.push(chart); globalOptArray.push(options); chart.draw(data0, gCSAnOpt); } google.setOnLoadCallback(drawVisualization); </script> <script type="text/javascript"> function drawVisualization1() { var jStringfromWeb1 = {"cols":[{"id":"idate","label":"IDATE","type":"string"},{"id":"macdl","label":"MACD","type":"number"},{"id":"macdsig","label":"SIGNAL","type":"number"},{"id":"macdhist","label":"HISTOGRAM","type":"number"}],"rows":[{"c":[{"v":"01\/07\/15"},{"v":30.13},{"v":18.68},{"v":11.45}]},{"c":[{"v":"02\/07\/15"},{"v":30.4},{"v":19.85},{"v":10.55}]},{"c":[{"v":"03\/07\/15"},{"v":29.98},{"v":20.86},{"v":9.11}]},{"c":[{"v":"06\/07\/15"},{"v":29.97},{"v":21.77},{"v":8.2}]},{"c":[{"v":"07\/07\/15"},{"v":28.64},{"v":22.46},{"v":6.18}]},{"c":[{"v":"08\/07\/15"},{"v":26.74},{"v":22.89},{"v":3.85}]}]}; var options1 = {annotation: {1 :{style:'line'}} , focusTarget: 'category', title : "MACD with histogram", hAxis: {title: "Date", slantedText : true}, vAxes : {0 :{title :"MACD"}, 1 : {title :"HGRAM"}}, backgroundColor : {fill :"ivory", stroke: "black"}, series: {0 : {color : "black", type : "line", targetAxisIndex : 0}, 1 : {color : "Coral" , type : "line", targetAxisIndex : 0} , 2 : {color : "DarkCyan", type :"bars", targetAxisIndex : 1}}}; var data1 = new google.visualization.DataTable(jStringfromWeb1); data1.insertColumn(1,{type : 'string', role : 'annotation'}); var chart1 = new google.visualization.ComboChart(document.getElementById('chart_div1')); globalDataArray.push(data1); globalChartArray.push(chart1); globalOptArray.push(options1); chart1.draw(data1, options1);} google.setOnLoadCallback(drawVisualization1); </script> <script type="text/javascript"> function drawVisualization2() { var jStringfromWeb2 = {"cols":[{"id":"idate","label":"IDATE","type":"string"},{"id":"aroonup","label":"AROOON UP","type":"number"},{"id":"aroondn","label":"AROON DOWN","type":"number"}],"rows":[{"c":[{"v":"01\/07\/15"},{"v":88.0},{"v":4.0}]},{"c":[{"v":"02\/07\/15"},{"v":100.0},{"v":4.0}]},{"c":[{"v":"03\/07\/15"},{"v":96.0},{"v":36.0}]},{"c":[{"v":"06\/07\/15"},{"v":92.0},{"v":32.0}]},{"c":[{"v":"07\/07\/15"},{"v":88.0},{"v":28.0}]},{"c":[{"v":"08\/07\/15"},{"v":84.0},{"v":24.0}]}]}; var options2 = {annotation: {1 :{style:'line'}} , focusTarget: 'category', title : "Aroon Indicator", hAxis: {title: "Date", slantedText : true}, backgroundColor : {fill :"ivory", stroke: "black"}, series: {0 : {color : "green", type : "line"}, 1 : {color : "red" , type : "line"} }}; var data2 = new google.visualization.DataTable(jStringfromWeb2); data2.insertColumn(1,{type : 'string', role : 'annotation'}); var chart2 = new google.visualization.ComboChart(document.getElementById('chart_div2')); globalDataArray.push(data2); globalChartArray.push(chart2); globalOptArray.push(options2); chart2.draw(data2, options2);} google.setOnLoadCallback(drawVisualization2); </script> </head> <body> <div id="chart_div0_data" style="width: 900px; min-height: 20px; border-style: solid; border-color: DarkRed ; border-width: 1px 1px 0px 1px; background-color:ivory; font-size:80%; font-weight:bold; "><fieldset> <select id = "switchType" onchange="switchCandleAndLine()"> <option value = 1>Candlestick</option> <option value = 2>Line</option> </select> </div> <div id="chart_div0" style="width: 900px; height: 500px; border-style: solid; border-color: DarkRed; border-width: 0px 1px 1px 1px;"></div> <div id="blank_div" style="width: 900px; height: 10px;"></div> <div id="chart_div1_data" style="width: 900px; min-height: 20px; border-style: solid; border-color: DarkRed ; border-width: 1px 1px 0px 1px; background-color:ivory; font-size:80%; font-weight:bold; "> </div> <div id="chart_div1" style="width: 900px; height: 300px; border-style: solid; border-color: DarkRed;border-width: 0px 1px 1px 1px; "></div> <div id="blank_div" style="width: 900px; height: 10px;"></div> <div id="chart_div2_data" style="width: 900px; min-height: 20px; border-style: solid; border-color: DarkRed ; border-width: 1px 1px 0px 1px; background-color:ivory; font-size:80%; font-weight:bold; "> </div> <div id="chart_div2" style="width: 900px; height: 300px; border-style: solid; border-color: DarkRed;border-width: 0px 1px 1px 1px; "></div> <div id="blank_div" style="width: 900px; height: 10px;"></div> <div id="invis_div" style="width: 900px; height: 2000px;"></div> </body> </html> On Tuesday, July 21, 2015 at 8:25:01 AM UTC+5:30, wishwami wrote: > > @keith, > Here is my app that loads five different charts in Android. It supports > android versions 2.3 and up. I have also done it for two enterprise apps > but they support only 4.0 and up. > > https://play.google.com/store/apps/details?id=pagadi.StockMagic > > I have an ios version of this app in development as well and there are no > issues in loading the same charts. > > On Tuesday, July 21, 2015 at 5:32:47 AM UTC+5:30, Keith Hackbarth wrote: >> >> @wishwami - Thank you for your response. >> >> I've removed all external javascript libraries and am still getting the >> message. Its definitely coming from the Visualization Library. >> >> Do you have an example of a an Android app in the Google Play store that >> loads charts? I'd be curious to look at it and see how its done. >> >> Anyone else out their have experience with this? iPhone and/or Android? >> >> Thanks, >> >> Keith >> >> >> On Wednesday, July 15, 2015 at 8:10:13 PM UTC-7, wishwami wrote: >>> >>> There should not any issue with Webview in Android 4.x onward. I have >>> been able to load quite a few a charts in android apps without complaints. >>> Older versions of Android (Gingerbread or before) do not support SVG >>> charts. You will have to extract the chart image on the server and display >>> it on the client to support older Android versions. >>> IOS javascript support is much better than Android so it is unlikely to >>> cause this issue. >>> I quickly looked at the page linked by you. You have quite a few >>> javascripts (jquery,django etc) involved. The "Unsupported Browser...." >>> message is most probably coming from one of the other scripts. Please >>> remove all other JS and load only a page with chart in the app to confirm. >>> Hope this was helpful. >>> >>> On Thursday, July 16, 2015 at 2:17:48 AM UTC+5:30, Keith Hackbarth wrote: >>>> >>>> I have a web page with a chart on it >>>> https://www.parkme.com/lot/102204/graph/. >>>> >>>> This page loads fine in Chrome or Safari in iOS and Android. However, >>>> if I try to load in an in-app browser via a webview, I get a message "Your >>>> browser is not supported." >>>> >>>> Does another know why this is? I've read similar older forum posts that >>>> state the the in-app Chrome browser does not support SVG. But, I can load >>>> static SVG images just fine. >>>> >>>> Any suggestions on how to circumvent this issue? >>>> >>>> Thanks! >>>> >>>> >>>> -- 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.
