To add to the features another thing has been added in dojo 1.2 and made very rich till the 1.6 is charting. Charting comes in the dojox.charting library and has a support for wide varieties of charting like pie, area, bar, line graph, grid and many more.
In this article I will look at line chart as well as pie chart. I will try to present a way to get the action invoked on different slices of a pie chart. The action can be rendering a different pie chart, line graph or a simple alert message.
Lets look at the require statements in the rendering of a pie chart.
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.MiamiNice");
dojo.require("dojox.charting.plot2d.Pie");
dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Tooltip");
All the require statement are very easy to understand. The theme I have chosen is MiamiNice. You can choose a theme according to your choice. The dojox.charting.action2d.Tooltip is basically for the Tooltip that the pie chart would use. dojox.charting.action2d.MoveSlice is for the slice to move when we will get the mouse pointer at the particular slice.
Lets look at the function to render the pie chart.
var dc = dojox.charting;
var pieData = [5,6,4];
var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.setTheme(dojox.charting.themes.MiamiNice);
chart1.addPlot("default", {
type: "Pie",
font: "normal normal 11pt Tahoma",
fontColor: "black",
labelOffset: -30,
radius: 80
});
chart1.addSeries("Series 1",pieData);
var anim_a = new dc.action2d.MoveSlice(chart1, "default");
var anim_b = new dc.action2d.Highlight(chart1, "default");
var anim_c = new dc.action2d.Tooltip(chart1, "default");
chart1.render();
var legendTwo = new dojox.charting.widget.Legend({chart: chart1},"legendTwo");
The piedata is a data in the form of an array.
var chart1 = new dojox.charting.Chart2D("simplechart");
chart1 is the name I have given to the pie chart that I would to generate. The argument in the dojox.charting.Chart2D is simplechart which is the id of the div on which I would to generate the chart. In the chart1.addPlot we give the type as pie, radius as 80 which is 80px. In the pie chart we add the series. Series is the data on which we want to generate the pie chart. We add the array of data in the argument of addSeries. We add three different actions like slice to move up when a mouse pointer comes on that slice, highlighting the slice and adding the tooltip. Then we say dojo to render the chart by calling chart1.render(). Then we add the legend which says what color denotes what. The argument legendTwo is again the name of the div on which the legend would render.
Now we will look at the way to associate an action to a particular pie slice. There is a function connectToPlot.
chart1.connectToPlot("default",function(evt) {
var shape = evt.shape;
if(evt.type == "onclick") {
if(evt.y == ‘4’){
secondPieChart();
}if(evt.y == ‘5’){
renderLineGraph();
}if(evt.y == ‘6’){
var rotateFx = new dojox.gfx.fx.animateTransform({
duration: 2000,
shape: shape,
transform: [{ name: 'rotategAt', start: [0,240,240], end: [360,240,240] }] }).play();
}
else{
alert("no chart has been defined");
}
}
});
};
The function connectToPlot is being associated with the chart1. Another argument to the function is the event. It captures any of the mouse events like onmouseover, onmouseout and onclick. It has made elements associated with it. Y gives the value of the slice of the pie chart on which the mouse is clicked. X gives the number of the series. For example in our piedata we have piedata = [5,6,4]. The chart will have evt.x = 0 and evt.y = 5, evt.x=1 and evt.y = 6 and evt.x = 3 and evt.y = 4. Now I have mapped it to the value of the slice. In the code above I say if(evt.y == ‘4’) which means if the slice has the value of 4 then it will call the secondPieChart() function which is another pie chart rendering function.
I hope I am clear with the dojo pie charting. I am adding a working example code with the blog which is slightly different from the example I explained above.
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.MiamiNice");
dojo.require("dojox.charting.plot2d.Pie");
dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.widget.Legend");
makeCharts = function(){
var dc = dojox.charting;
var pieData = [{
y: 4,
text: "High",
stroke: "black",
tooltip: "Need attention"
},
{
y: 2,
text: "Moderate",
stroke: "black",
tooltip: "Not so Necessary"
},
{
y: 1,
text: "Low",
stroke: "black",
tooltip: "Not so Necessary"
},
{
y: 1,
text: "Critical",
stroke: "black",
tooltip: "Need immediate attention"
}];
var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.setTheme(dojox.charting.themes.MiamiNice);
chart1.addPlot("default", {
type: "Pie",
font: "normal normal 11pt Tahoma",
fontColor: "black",
labelOffset: -30,
radius: 80
});
chart1.addSeries("Series 1",pieData);
var anim_a = new dc.action2d.MoveSlice(chart1, "default");
var anim_b = new dc.action2d.Highlight(chart1, "default");
var anim_c = new dc.action2d.Tooltip(chart1, "default");
chart1.render();
var legendTwo = new dojox.charting.widget.Legend({chart: chart1},"legendTwo");
chart1.connectToPlot("default",function(evt) {
var shape = evt.shape;
if(evt.type == "onclick") {
alert("y value " + evt.y);
alert(pieData[0].y);
if(evt.y == pieData[0].y){
secondPieChart();
}if(evt.y == pieData[1].y){
renderLineGraph();
}if(evt.y == pieData[2].y){
var rotateFx = new dojox.gfx.fx.animateTransform({
duration: 2000,
shape: shape,
transform: [{ name: 'rotategAt', start: [0,240,240], end: [360,240,240] }] }).play();
}
else{
alert("no chart has been defined");
}
}
});
};
makeChart2 = function(){
var chart2 = new dojox.charting.Chart2D("simplechart1");
chart2.addPlot("default", {type: "Lines"});
chart2.addAxis("x");
chart2.addAxis("y", {vertical: true});
chart2.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart2.render();
}
makepiechart2 = function(){
var pieData1 = [5,4,2,8,1,1];
var chart2 = new dojox.charting.Chart2D("simplechart2");
chart2.setTheme(dojox.charting.themes.MiamiNice);
chart2.addPlot("default", {
type: "Pie",
font: "normal normal 11pt Tahoma",
fontColor: "black",
labelOffset: -30,
radius: 80
});
chart2.addSeries("Series 1",pieData1);
var anim_a = new dojox.charting.action2d.MoveSlice(chart2, "default");
var anim_b = new dojox.charting.action2d.Highlight(chart2, "default");
var anim_c = new dojox.charting.action2d.Tooltip(chart2, "default");
chart2.render();
}
dojo.addOnLoad(makeCharts);
dojo.addOnLoad(makepiechart2);
dojo.addOnLoad(makeChart2);
function secondPieChart(){
alert('in second pie chart rendering');
document.getElementById("simplechart").style.display = "none";
document.getElementById("simplechart1").style.display = "none";
document.getElementById("simplechart2").style.display = "inline";
}
function renderLineGraph(){
alert('in line graph rendering');
document.getElementById("simplechart").style.display = "none";
document.getElementById("simplechart1").style.display = "inline";
document.getElementById("simplechart2").style.display = "none";
}
/>
No comments:
Post a Comment