Drilldown Silverlight Charts using Visifire
ChiragCreating Drilldown chart is a common requirement in any RIA dashboard. Drilldown charts give rich user experience. In this blog let’s see how we can create drilldown charts using Visifire.
In this sample application, chart can be drilled down till 2 levels. The default chart would show yearly sales of a fictitious company for the period 2006-2008. On click of column representing the sales for an year, monthly sales for that year is shown up. Further it can be drilled down to find product wise sales for the selected month.
This sample uses Javascript API to generate charts. The complete application can be downloaded from here. The code is completely commented & explained wherever necessary. Refer the rest of the blog if you need more help.
Data can be pulled in from any data source. To keep the example simple let’s store the sales data in an array.
var sales;
// Create array for the Sales data
sales = [{year: 2006, month: "Jan", ProductX: 20000, ProductY: 25000, ProductZ: 15000},
{year: 2006, month: "Feb", ProductX: 10000, ProductY: 23000, ProductZ: 25000},
{year: 2006, month: "Mar", ProductX: 22000, ProductY: 38000, ProductZ: 83000},
{year: 2006, month: "Apr", ProductX: 23456, ProductY: 32435, ProductZ: 24223},
{year: 2006, month: "May", ProductX: 25142, ProductY: 32415, ProductZ: 10923},
{year: 2006, month: "Jun", ProductX: 18254, ProductY: 15342, ProductZ: 10934},
{year: 2006, month: "Jul", ProductX: 18562, ProductY: 19832, ProductZ: 10293},
{year: 2006, month: "Aug", ProductX: 28376, ProductY: ..............
Construct the XML string from the data stored in the array.
function getYearlySales()
{
isChart1Added = true;
var myXAML;
// Constructing Data XAML
myXAML = '<vc:Chart Theme="Theme2" Width="650" Height="450" ColorSet="Visifire1" Background="Black" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" >' + "\n" + "\n";
myXAML = myXAML + '<vc:Chart.Titles>' + "\n";
myXAML = myXAML + '<vc:Title Text= "Yearly Sales" />' + "\n";
myXAML = myXAML + '</vc:Chart.Titles>' + "\n";
myXAML = myXAML + '<vc:Chart.PlotArea>' + "\n";
myXAML = myXAML + '<vc:PlotArea Background= "#0A0A0A" />' + "\n";
myXAML = myXAML + '</vc:Chart.PlotArea>' + "\n";
myXAML = myXAML + '<vc:Chart.AxesX>' + "\n";
myXAML = myXAML + '<vc:Axis Title="Year" />' + "\n";
myXAML = myXAML + '</vc:Chart.AxesX>' + "\n";
myXAML = myXAML + '<vc:Chart.AxesY>' + "\n";
myXAML = myXAML + '<vc:Axis Title="Amount" Prefix="$" />' + "\n" + "\n";
myXAML = myXAML + '</vc:Chart.AxesY>' + "\n";
myXAML = myXAML + '<vc:Chart.Series>' + "\n";
myXAML = myXAML + '<vc:DataSeries RenderAs="Column">' + "\n";
myXAML = myXAML + '<vc:DataSeries.DataPoints>' + "\n";
sales.sort(sortByYear);
var totalSales = 0;
currYear = sales[0].year;
for (var arrayIndex = 0; arrayIndex < sales.length; arrayIndex++)
{
if(sales[arrayIndex].year == currYear)
{
currYear = sales[arrayIndex].year;
totalSales += sales[arrayIndex].ProductX + sales[arrayIndex].ProductY + sales[arrayIndex].ProductZ;
}
else
{
myXAML = myXAML + '<vc:DataPoint AxisXLabel="' + currYear + '" YValue="' + totalSales + '"/>' + "\n";
totalSales = 0;
currYear++;
}
}
myXAML = myXAML + '<vc:DataPoint AxisXLabel="' + currYear + '" YValue="' + totalSales + '"/>' + "\n";
myXAML = myXAML + '</vc:DataSeries.DataPoints>' + "\n";
myXAML = myXAML + "\n" + '</vc:DataSeries>' + "\n";
myXAML = myXAML + '</vc:Chart.Series>' + "\n";
myXAML = myXAML + '</vc:Chart>';
return myXAML;
}
First, create the chart for yearly sales. Next, attach an event handler for “MouseLeftButtonUp” event to the DataSeries. On fire of this event, this chart is replaced with a chart with monthly sales for the year represented by the selected DataPoint in that DataSeries. Event handler can be attached as shown in the code snippet below.
// Attaching event handler for MouseLeftButtonUp event
vChart1.preLoad = function(args) {
chart1 = args[0];
chart1.Series[0].MouseLeftButtonUp = function(e) {
onMouseUpMonthlySales(e.AxisXLabel); //Calling the function to replace the chart
};
};
Use the same logic to replace this chart with a chart with product wise sales for the selected month. The crux of a drilldown chart is to attach an event handler to update the chart on fire of some event. I think we have accomplished the same swiftly in this sample. A link/button to return back to the previous state of the chart would give a holistic user experience.
You can see the sample in action here. The complete solution can be downloaded from here.
Cheers,
Team Visifire.
Comments(10)
This is great! Is there documentation on how to bind to external data sources? Thanks
Hi Aziz,
With external Data Sources, do you mean creating chart by fetching data from SQL Server or some other source?
Yes, creating chart by fetching data from from SQL Server. Thanks!
Hi Aziz,
Yes you can create a chart by fetching data from SQL Server. Please have a look at the blog post below:
http://www.visifire.com/blog/2009/05/21/creating-silverlight-charts-from-sql-data-using-aspnet-and-visfire/
[...] Ejemplo II. [...]
Hi, when dowloading source code I get SL.Visifire.charts.xap file and Visifire2.js file. i am interested in looking into source code of xap file as to how it is constructed,any pointers where I can find ? Thanks.
The Total for
2006 is 1,172,425
2007 is 1,063,997 were as Figure shown in 960,046 shortage of 103,951
i.e. for Jan 2007 Figures are left out
2008 is 1,097,997 were as Figure shown in 1,039,734 shortage of 58,243
i.e. for Jan 2008 Figures are left out
Tried to solve could not succeed added the following lines on to html file
Works fine, Could your please get the bug and mail me the results
{year: 2007, month: “Jan”, ProductX: 0, ProductY: 0, ProductZ: 0},
{year: 2008, month: “Jan”, ProductX: 0, ProductY: 0, ProductZ: 0},
========================================================================================
Instead of 2 levels and 3 Products will it possible to increase from 3 products to 6 product
if so what are the changes required, Please inform
Hi Grirish,
The sales for 2007 and 2008 for the month of January was left out. You can do the changes by adding the following line inside the else part of the for loop (inside getYearlySales() function).
totalSales += sales[arrayIndex].ProductX + sales[arrayIndex].ProductY + sales[arrayIndex].ProductZ;
I have updated the sample, you can download it now and check.
Yes you can increase as many products as you want. You just need to put them inside the array and changes will be required in getProductwiseMonthlySales() function.
Hi Vivek,
Thanks for your quick response. Did the changes as advised, Works Fine.
I tried to increase by one product i.e. instead of Product x,y and Z added Product A
Unfortunately could not succeed, It hangs nothing comes, Unable to Debug
If possible make one sample increasing both Years and Product.
A sample drilldown code for use with a sharepoint list too would be much appreciated.
TIA.