dojo pie chart not rendering on mobile devices

Question

I've used this to render a pie chart on my mobile app. It works fine when I test it on a browser simulator on my desktop, but when I run it on the mobile device, the chart does not render, instead, I get a blank div. Any clues where I might be going wrong?

It might not be relevant, but I'm using jQuery Mobile framework for front end.

Answer 1

Intro

Tested on:

1. Desktop Firefox and Chrome
2. Android 4.1.1 Chrome
3. iPad 3 6.0

Solution

jQuery Mobile is little special here, you need to know it rather well to be able to do some specific things.

Because of its unusual page handling, charts or any other visual framework (that requires drawing) can only be used during the pageshow event.

I made you a working example: http://jsfiddle.net/Gajotres/XJDYU/ , it is made from your own example:

$(document).on('pageshow', '#index', function(){       
        require([
             // Require the basic chart class
            "dojox/charting/Chart",

            // Require the theme of our choosing
            "dojox/charting/themes/Claro",
            
            // Charting plugins: 

            //  We want to plot a Pie chart
            "dojox/charting/plot2d/Pie",

            // Retrieve the Legend, Tooltip, and MoveSlice classes
            "dojox/charting/action2d/Tooltip",
            "dojox/charting/action2d/MoveSlice",
            
            //  We want to use Markers
            "dojox/charting/plot2d/Markers",

            //  We'll use default x/y axes
            "dojox/charting/axis2d/Default",

            // Wait until the DOM is ready
            "dojo/domReady!"
        ], function(Chart, theme, Pie, Tooltip, MoveSlice) {

            // Define the data
            var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
            
            // Create the chart within it's "holding" node
            var chart = new Chart("chartNode");

            // Set the theme
            chart.setTheme(theme);

            // Add the only/default plot 
            chart.addPlot("default", {
                type: Pie,
                markers: true,
                radius:170
            });
            
            // Add axes
            chart.addAxis("x");
            chart.addAxis("y", { min: 5000, max: 30000, vertical: true, fixLower: "major", fixUpper: "major" });

            // Add the series of data
            chart.addSeries("Monthly Sales - 2010",chartData);
            
            // Create the tooltip
            var tip = new Tooltip(chart,"default");
            
            // Create the slice mover
            var mag = new MoveSlice(chart,"default");
            
            // Render the chart!
            chart.render();

        });
});

One more thing to consider, dojo.js MUST be loaded/initialized after jQuery Mobile initialization.

If you want to better understand jQuery Mobile page events take a look at my other ARTICLE (my personal blog), or find it HERE.

Also if you have more questions about this example feel free to email me.