Intro
Tested on:
- Desktop Firefox and Chrome
- Android 4.1.1 Chrome
- 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.