Android: WebView with JavaScript for Chart.js not working properly

Question

I'm trying to show a chart with chart.js inside a webView, inside a Fragment of a ViewPager.

This is my code (with the different approaches I've tried

@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    webView = (WebView) getView().findViewById(R.id.webview);
    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        webView.getSettings().setAllowFileAccessFromFileURLs(true);
    }
    webView.getSettings().setJavaScriptEnabled(true);

    String htmlGrafico = createHtml();

    /*
     * this always shows white page
     */
    webView.loadData(htmlGrafico, "text/html", "UTF-8");

    /*
     * this shows the chart only if I tap on the tab between 
     * the start and the end of the chart animation. 
     * Otherwise is white page.
     * 
     * However this is not a possible solution because I
     * must use my datas to build the chart and this shows
     * static html
     */
    webView.loadUrl("file:///android_asset/grafico.html");

    /*
     * I even tried to create a file with the HTML I need 
     * (a chart with the right data) and then retrieve it  
     * by its path but it is white page.
     */
    webView.loadUrl(urlHtmlGrafico);

    super.onViewCreated(view, savedInstanceState);
}

createHtml (returns a correct String):

    private String createHtml() {
    StringBuilder buf = new StringBuilder();
    InputStream htmlIn;
    String html = "";
    try {
        htmlIn = getActivity().getAssets().open("grafico.html");
        BufferedReader in = new BufferedReader(new InputStreamReader(htmlIn, "UTF-8"));
        String str;

        while ((str=in.readLine()) != null) {
            buf.append(str);
        }
        in.close();

        html = buf.toString();
    } catch (IOException e) {
        e.printStackTrace();
        return null;
    }

    StringBuilder labels = new StringBuilder();
    StringBuilder points = new StringBuilder();

    for (ArrayList<Location> segment : session.getRoute()) {

        for (Location location : segment) {
            labels.append("\"\",");
            points.append(String.format(Locale.US, "%.4f", location.getSpeed()) + ",");
        }
    }
    labels.deleteCharAt(labels.lastIndexOf(","));
    points.deleteCharAt(points.lastIndexOf(","));

    html = html.replaceAll("xx1xx", "100");
    html = html.replaceAll("xx2xx", "100");
    html = html.replaceAll("xx3xx", labels.toString());
    html = html.replaceAll("xx4xx", points.toString());

    return html;
}

And this is grafico.html:

<!doctype html>
<html>
<head><title>Line Chart</title>
    <script type="text/javascript" src="file:///android_asset/Chart.js"></script>
</head>
<body>
    <div style="width:95%">
        <div>
            <canvas id="canvas" height="100" width="100"></canvas>
        </div>
    </div>
<script>

var randomScalingFactor = function(){
    return Math.round(Math.random()*100)};
    var lineChartData = {
        labels : ["asd","sdf","dfg","fgh"],
        datasets : [
        {
            label : "",
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(60,60,60,1)",
            data : [1,2,3,4]
            }
        ]
    }
    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive : true,
            pointDot : false
        });
    }
    </script>
</body>

I am running into a similar problem and I think it is related to the second parameter (options) in the chart type method (Line, Pie, ...). In my case I can do Pie(data) and it works, but Pie(data, {animation: false}) it won't display until I touch the screen. — momo
– momo, Commented Oct 15, 2014 at 10:05

Community · Accepted Answer · 2017-05-23 11:51:24Z

4

This answer solved my chart not being drawn. Try to disable hardware acceleration rendering on the WebView:

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Oct 16, 2014 at 4:47

momo

3,4846 gold badges40 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Android: WebView with JavaScript for Chart.js not working properly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related