Creating a Silverlight Chart of Fuel Cost Comparison

Share on Facebook

I want to add a chart of fuel cost comparison to http://www.ezburn.net Exploring Alternative Energy blog. 

I think this will add business value to the EZBurn site because it will give visitors an opportunity to play with the home heating cost of different fuels and to see how they compare to each other in terms of BTU output in a visual manner.

Using Visifire Open Source Data Visualization Component,
http://www.visifire.com/ , it's very easy to get a basic chart (see the inset original chart, this is straight from the Visifire page).  The challenge is to get a chart controlled by a slider.  

Visifire documentation is wonderfully complete.  But these controls aren't built out-of-the-box for what I need.
So, I'm going to make a few changes. To do this I need to insert into my Silverlight project, a ChartWrapper class.  This wrapper class will allow me to communicate slider based  input chart modifications to the charting component.

I began by creating my silverlight project in Visual Studio 2008.

1. Add references to Visifire.Charts.dll, Visifire.Commons.dll
2. Create a Silverlight control, ChartWrapper.xaml with code behind.   This will contain the chart. 
3. I use Expression Blend to add this control to my page.xaml because I can see is on the list of custom controls.  Also, I add a few sliders to my page.xaml.  That is one for each fuel type.  I want to use the sliders to adjust the cost of fuel and see that translated to the chart.
4. move back to Visual Studio.  Add the PageLoad event to the page.xaml.
5. In the page load, call a function which initializes your chart, Visifire charts must be created from the code behind.
6. add another event in the constructor that will listen to your slider changes
7. Whenever the slider changes, the chart must be updated.  I accomplished this by using animations to move the proper DataPoint item to it's new position.

I'll tell you how I got that working in my next post.  Here's a link to see the final result http://www.faxt.com/silverlight/fuelcomparecalculator/EZBurnFuelCompareCalculator.html .