Using Javascript, jQuery, and jqPlot to make Charts in an Android WebVew

Question

I'm attempting to use jqPlot in Android via the WebView, but I'm getting a blank WebView with no errors. I'm loading a simple HTML file from my app's assets directory into the WebView, and then attempting to run the required javascript to create the chart. Any assistance/suggestions would be GREATLY appreciated!

Here is the code loading the WebView

private View getSimpleChartView() {
    View chartView = getLayoutInflater().inflate(R.layout.test_chart, null);

    TextView chartTitle = (TextView) chartView.findViewById(R.id.txtChartTitle);
    chartTitle.setText("Simple Chart");

    WebView webView = (WebView) chartView.findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new ChartWebViewClient());
    webView.loadUrl("file:///android_asset/jqplot_template.html");
    webView.loadUrl("javascript:" + getJqPlotJavascript());

    return chartView;
}

private String getJqPlotJavascript() {
    StringBuilder js = new StringBuilder();

    js.append("<script language=\"javascript\" type=\"text/javascript\" src=\"file:///android_asset/jqplot/jquery.min.js\"></script>\n");
    js.append("<script language=\"javascript\" type=\"text/javascript\" src=\"file:///android_asset/jqplot/jquery.jqplot.min.js\"></script>\n");
    js.append("<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/jqplot/jquery.jqplot.css\" />\n");
    js.append("<script type=\"text/javascript\">");
    js.append("$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);\n");
    js.append("</script>");

    return js.toString();
}

jqplot_template.html

<html>
    <body>
        <div id="chartdiv" style="height:400px;width:300px;"></div>
    </body>
</html>

Sam Strachan · Accepted Answer · 2013-09-12 17:19:47Z

Place the jqplot script and css references into the HTML.
Follow Jayesh's advice in calling the javascript onPageFinished (and mark webView as final)
Remove the containing script tags from the javascript string
Boom!

HTML

<html>
     <script language="javascript" type="text/javascript" src="file:///android_asset/jqplot/jquery.min.js"></script>
     <script language="javascript" type="text/javascript" src="file:///android_asset/jqplot/jquery.jqplot.min.js"></script>
     <link rel="stylesheet" type="text/css" href="file:///android_asset/jqplot/jquery.jqplot.css" />
    <body>
        <div id="chartdiv" style="height:400px;width:300px;"></div>
    </body>
</html>

Java

private View getSimpleChartView() {
    View chartView = getLayoutInflater().inflate(R.layout.test_chart, null);

    TextView chartTitle = (TextView) chartView.findViewById(R.id.txtChartTitle);
    chartTitle.setText("Simple Chart");

    final WebView webView = (WebView) chartView.findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new WebViewClient(){
        @Override
        public void onPageFinished(WebView view, String url) {
            webView.loadUrl("javascript:" + getJqPlotJavascript());
            super.onPageFinished(view, url);
        }
    });
    webView.loadUrl("file:///android_asset/jqplot_template.html");

    return chartView;
}

private String getJqPlotJavascript() {
    StringBuilder js = new StringBuilder();
    // Just this line
    js.append("$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);\n");
    return js.toString();
}

Jayesh Chandrapal · Accepted Answer · 2013-06-19 16:51:59Z

0

when you load your webview using webView.loadUrl("file:///android_asset/jqplot_template.html"); it will take some time to load the page.

Calling javascript function immediately will not work as the page may not have been loaded properly.

Instead do this:

webView.setWebViewClient(new WebViewClient(){`
    @Override
    public void onPageFinished(WebView view, String url) {
        webView.loadUrl("javascript:" + getJqPlotJavascript());

        super.onPageFinished(view, url);
    }
});

I hope this helps.

answered Jun 19, 2013 at 16:51

Jayesh Chandrapal

1

Collectives™ on Stack Overflow

Using Javascript, jQuery, and jqPlot to make Charts in an Android WebVew

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related