CODEWITHSUNDEEP
javascriptandroidwebviewamcharts
wolfaviators
wolfaviators

Reputation: 503

amcharts not showing theme background in Android webview

I am using a webview to host amcharts in an android application. The basic setup for the code is that I form an HTML document programatically and load it hosted in my assets folder. The amcharts libraries are located in a subdirectory of the assets folder. So far, this setup has allowed me to generate charts in a webview with locally provided data. In order to change the chart's theme, I have been following a tutorial from the amcharts websight http://www.amcharts.com/tutorials/working-with-themes/. The tutorial allowed me to change the way the bars in the chart look, but the background remains unchanged. I have also looked at some posts reporting that the themes of other users were not working. My problem differs in the sense that the way the graph is being drawn is correct according to the theme. It is only the background that is not being set.

This is the class I use to build the test chart data.

public class AmChartsUtils {

public static String getTestHtml(String chartData) {

    chartData = chartData.replace("\n", "");

    return "<HTML><HEAD>" + getHeadContent(chartData)+ "<BODY>"+ getBodyContent() + "</BODY></HTML>";
}

private static String getHeadContent(String chartData) {
    return "<script src=\"js/amcharts.js\" type=\"text/javascript\"></script>"+
    "<script src=\"js/serial.js\" type=\"text/javascript\"></script>" +
    "<script src=\"js/themes/dark.js\" type=\"text/javascript\"></script>" +
    "<script src=\"js/themes/chalk.js\" type=\"text/javascript\"></script>" +
//      "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\">" 
        getChartData(chartData);
}

private static String getChartData(String chartData) {

    StringBuilder sb = new StringBuilder();
    sb.append("<script type=\"text/javascript\">");

    sb.append("var chartData = [");
    sb.append(chartData);
    sb.append("];");
    sb.append(buildStartCommand());
    sb.append("</script>");


    return sb.toString();
}

private static String buildStartCommand() {
    StringBuilder sb = new StringBuilder();

    sb.append("if(document.body){");
    sb.append("document.body.style.backgroundColor = \"#282828\";");
//      sb.append("document.body.style.backgroundImage = \"url(\" + bgImage + \")\";");
    sb.append("}");
    sb.append("AmCharts.ready(function() {");

    sb.append("var chart = new AmCharts.AmSerialChart(AmCharts.themes.chalk);");
    sb.append("chart.dataProvider = chartData;");
    sb.append("chart.categoryField = \"country\";");
    sb.append("chart.angle = 30;");
    sb.append("chart.depth3D = 15;");
    sb.append("chart.backgroundColor = \"#282828\";");
    sb.append("chart.backgroundAloha = \"1.0\";");


    sb.append("var graph = new AmCharts.AmGraph();");
    sb.append("graph.valueField = \"visits\";");
    sb.append("graph.type = \"column\";");
    sb.append("chart.addGraph(graph);");

    sb.append("chart.write('chartdiv');");

    sb.append("});");
    return sb.toString(); 
}

private static String getBodyContent() {
    return "<div id=\"chartdiv\" style=\"width: 400px; height: 400px;\"></div>";
}

}

Here is how the chart apears on the screen. enter image description here

The expected result is the same graph with a dark chalkboard background.

Does anyone know why the background is not coming in? Thanks in advance for any help recieved.

Upvotes: 0

Views: 710

Answers (1)

martynasma
martynasma

Reputation: 8595

There is a typo in your code:

sb.append("chart.backgroundAloha = \"1.0\";");

It should read this instead:

sb.append("chart.backgroundAlpha = \"1.0\";");

Also, alpha is a numeric parameter. I strongly suggest you supply it as number.

I know you won't be displaying it in some old browsers that might be thrown off by this, but it's a good idea to keep your JavaScript apps as strongly typed as possible.

Upvotes: 2

Related Questions