Fusion chart not working when data is dynamic

StackOverflow https://stackoverflow.com/questions/18289159

  •  24-06-2022
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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;

}

OTHER TIPS

You may use server-side scripts to dynamically generate XML or JSON data, So, you can provide the URL of the script, which relays dynamically generated data to the chart.

Creating a chart using dynamic data from database involves following steps:

  1. Initiate database connection in your server side script.
  2. Retrieve the data from database that you wish to show on the chart.
  3. Generate chart data (XML or JSON) by iterating through each record

The link may be helpful- http://docs.fusioncharts.com/charts/contents/Code/J2EE/JSP_DB.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top