Jignesh Ansodariya Jignesh Ansodariya - 3 months ago 23
Android Question

Fusion chart not working when data is dynamic

I am using fusion chart phone gap to show a chart in my android application.

when I am using web view and providing static

html
file it is working fine but I don't know to work with dynamic data please guide me.
Thanks! Here is my code:

java file

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWeb = (WebView) findViewById(R.id.webview);
mWeb.getSettings().setJavaScriptEnabled(true);
mWeb.getSettings().setPluginsEnabled(true);
// mWeb.loadUrl("file:///android_asset/www/index1.html"); /*working*/
mWeb.loadData(getHTML(), "text/html; charset=UTF-8", null); /*NOT working*/

}

private String getHTML() {
String html = "<html><head><script language=\"JavaScript\"src=\"file:///android_asset/www/FusionCharts.js\"></script></head><body bgcolor=\"#ffffff\"><div id=\"chartdiv\" align=\"center\">The chart will appear within this DIV. This text will be replaced by the chart.</div><script type=\"text/javascript\">FusionCharts.setCurrentRenderer(\"javascript\");var myChart = new FusionCharts(\"file:///android_asset/www/Column3D.swf\", \"myChartId\", \"400\",\"400\");myChart.setXMLData(\"<graph caption='Title' decimalPrecision='0' formatNumberScale='0' showNames='1' xAxisName='XData' yAxisName='YData' ><set name='One' value='120' color='456553' /><set name='Two' value='345' color='234567' /><set name='Three' value='565' color='098765' /></graph>\");myChart.render(\"chartdiv\");</script></body></html>";
return html;

}


index1.html

<html>
<head>
<script language="JavaScript"
src="file:///android_asset/www/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">The chart will appear within
this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
FusionCharts.setCurrentRenderer("javascript");
var myChart = new FusionCharts(
"file:///android_asset/www/Column3D.swf", "myChartId", "400",
"400");
myChart
.setXMLData("<graph caption='Title' decimalPrecision='0' formatNumberScale='0' showNames='1' xAxisName='XData' yAxisName='YData' ><set name='One' value='120' color='456553' /><set name='Two' value='345' color='234567' /><set name='Three' value='565' color='098765' /></graph>");
myChart.render("chartdiv");
</script>
</body>
</html>

Answer

I suspect that loadData() method is not able to load the dependent JavaScript and CSS file(s). Instead use loadDataWithBaseURL() method like below. Try the below code and let me know if this worked for you.

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    mWeb = (WebView) findViewById(R.id.webview);
    mWeb.getSettings().setJavaScriptEnabled(true);
    mWeb.getSettings().setPluginsEnabled(true);
    mWeb.loadDataWithBaseURL("", getHTML(), "text/html", "UTF-8", "");

}

private String getHTML() {
    String html = "<html><head><script language=\"JavaScript\"src=\"file:///android_asset/www/FusionCharts.js\"></script></head><body bgcolor=\"#ffffff\"><div id=\"chartdiv\" align=\"center\">The chart will appear within this DIV. This text will be replaced by the chart.</div><script type=\"text/javascript\">FusionCharts.setCurrentRenderer(\"javascript\");var myChart = new FusionCharts(\"file:///android_asset/www/Column3D.swf\", \"myChartId\", \"400\",\"400\");myChart.setXMLData(\"<graph caption='Title' decimalPrecision='0' formatNumberScale='0' showNames='1' xAxisName='XData' yAxisName='YData' ><set name='One' value='120' color='456553' /><set name='Two' value='345' color='234567' /><set name='Three' value='565' color='098765' /></graph>\");myChart.render(\"chartdiv\");</script></body></html>";
    return html;

}