Google Charts in in-app webview for either IOS or Android

Keith Hackbarth

unread,

Jul 15, 2015, 4:47:48 PM7/15/15

to google-visua...@googlegroups.com

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!

wishwami

unread,

Jul 15, 2015, 11:10:13 PM7/15/15

to google-visua...@googlegroups.com

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.

Keith Hackbarth

unread,

Jul 20, 2015, 8:02:47 PM7/20/15

to google-visua...@googlegroups.com

@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

wishwami

unread,

Jul 20, 2015, 10:55:01 PM7/20/15

to google-visua...@googlegroups.com

@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.

wishwami

unread,

Jul 21, 2015, 1:27:23 AM7/21/15

to google-visua...@googlegroups.com

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">

<head>

<title>RELIANCE</title>

google.load('visualization', '1', {packages: ['corechart']});

</script>

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>

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>

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>

<option value = 1>Candlestick</option>

</select>

</div>

</body>

</html>

Reply all

Reply to author

Forward