Android Webview Google Charts Not Working

I have been searching the internet and SO for a solution embedding a WebView displaying a webpage with google-charts. This far i have found nothing. I do not want use the image API

Solution 1:

I have shown a google chart in WebView, and didn't find it that difficult.

Snippets for your html file:

//include google api js file
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

//a div for chart
<div id="my-chart">
</div>

Snippets from js file:

// In case there is no network// the google jsapi is not loaded causing the screen to go white and break the application// Check if google object is not nullif(typeof(google) !== 'undefined')
{
    google.load('visualization', '1.0', {'packages':['corechart']});
}

//a separate function for drawing data. Just call it wherever you need to redraw the chartfunctiondrawChart(chartData){
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Col1');
    data.addColumn('number', 'Col2');

    for (var i = 0; i < 5; i++)
    {
        ideasChart.data.addRow("data1", "data2");
    }

    chart = new google.visualization.ComboChart(document.getElementById('my-chart'));
    chart.draw(data, chartOptions);
}

//chartOptions to customize your chart, its text color, etc.

chartOptions = {
    chartType:"ComboChart",
    containerId:"visualization",
    stackSeries: true,
    isStacked : true,
    backgroundColor: '#242424',
    legend: 'none',
    tooltip:{
        trigger:'none'
    },
    enableInteractivity: false,
    colors : ['#6DB1E2','#FDCB34'],
    chartArea: {
        backgroundColor: {
            stroke: '#fff',
            strokeWidth: 1
        }
    },
    seriesDefaults: {

        rendererOptions: {
            barPadding: 0,
            barMargin: 10
        },
    },

    seriesType: "bars",     
    bar:
    {
        groupWidth:"80%"
    },

    viewWindowMode : {
        max: 'pretty'
    }
};

And in your android WebView,

you would need to load your html file as:

myWebView.loadUrl("file:///android_asset/www/index.html");

Hope it helps. You would need to customize your chartOptions as per your requirement. And refer examples to start it.

EDIT:

If you have a URL which shows google charts, then you would simply need to add

myWebView.loadUrl(strLink);

in your Activity.