Code:
html page placed in the root.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pie Chart</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" djConfig="parseOnLoad: true, baseUrl:'./js'" ></script>
<script type="text/javascript">
var year=[{x:1, y:1024, legend:"First"},{x:2, y:1100, legend:"Second"},{x:3, y:900, legend:"Third"},{x:4, y:800, legend:"Fourth"}];
var bikeSales=[{x:1, y:250, title:"TVS"},{x:2, y:700, title:"Yamaha"},{x:3, y:900, title:"Honda"},{x:4, y:400, title:"Bajaj"}];
dojo.registerModulePath("myChart", "./myChart");
dojo.require("dojo.NodeList-manipulate");
dojo.require("myChart.MyPie");
dojo.addOnLoad(function() {
var chart = new myChart.MyPie();
chart.postData(year);
dojo.query('#update').onclick(function(){
dojo.query("#title").innerHTML("Bike Sales this week");
chart.updateData(bikeSales);
});
dojo.query('#reverse').onclick(function(){
dojo.query("#title").innerHTML("Year wise result in College");
chart.updateData(year);
});
});
</script>
</head>
<body>
<div id="title">Year wise result in College</div>
<div id="chart2" style="width:200px;height:200px;"></div>
<div id="legend"></div>
<input type="button" id="update" value="Show Bike Result" />
<input type="button" id="reverse" value="Show College Result" />
</body>
</html>
---------------------------
MyPie.js
This file is placed inside a folder myChart, inside js folder in the root. So it is in this path from root where the html file is placed. js->myChart->MyPie.js
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.Julie');
dojo.provide("myChart.MyPie");
dojo.declare("myChart.MyPie",null,{
constructor : function( ) {
chart2 = new dojox.charting.Chart2D('chart2');
legend = new dojox.charting.widget.Legend({chart: chart2}, "legend");
console.log("constructor");
},
postData : function(deal) {
chart2.setTheme(dojox.charting.themes.Julie).
addPlot('default', {type: 'Pie', radius: 70, labels:true, fontColor:"#000"}).
addSeries('marks', deal).
render();
anim = new dojox.charting.action2d.MoveSlice(chart2, 'default');
legend.refresh();
},
updateData: function(deal)
{
chart2.updateSeries('marks', deal).render();
legend.refresh();
}
})
---------------------------
Live Demo:
Please note: I was unable to place the class in separate file in this demo for the reason that I have less time to find how to maintain the folder structure in JSFiddle to embed here. So just you can learn the concept of writing a class and to chart a pie using this demo.
No comments:
Post a Comment
Please post your comments to help you and others better.