jQM - Moveslice plugin example

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://dojotoolkit.org/documentation/tutorials/1.8/charting/demo/style.css">
<link rel="stylesheet" href="http://dojotoolkit.org/documentation/tutorials/resources/style/demo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>          
        </div>

        <div data-role="content">
            <h1>Monthly Sales Pie Chart with MoveSlice</h1>
            <div id="chartNode" style="width:100%;height:400px;"></div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>  
</body>
</html>

JavaScript

$(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();

		});
});