Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The business world loves charts. Visualizing stacks of data through a well-crafted bubble chart can really aid understanding. Vector-based technologies like Silverlight naturally lend themselves to the easy creation of charts. Luckily, the Silverlight toolkit team has already created a charting engine for you. For this demonstration, I'll use Visual Studio and a project called ChartingYourData. I'll start by looking at my business data. I have a class called TourBookings, which represents the year that our company had sold some tours and the different tours that we sold. I also have the TourReporter class.
And let's unpin this. Double-click to put it back. I have the AnnualTours class, which is an observable collection of TourBookings, and here I'm just setting up some information. I'm going to use that in my charts. So, I'll switch over to my LiveDemo.xaml file and I'll add a chart. To add a chart, you can go to your toolbox. I'll pin my toolbox, scroll down to the All Silverlight Controls section, and choose the Chart. The Chart is a container for multiple chart series.
When I drag this over, the default chart series that I get is a ColumnSeries. I'm going to delete that and add my own. The chart series I'm going to add is a little bit further down the toolbox. I'm looking for the LineSeries. So, I'll add the LineSeries as a child of the Chart class. Now I need some data, so I'm going to go to my code behind by pressing F7 and I'm going to instantiate my annual report. Then I switch back to my XAML view.
The LineSeries is an Items control. That means that I can set its itemSource to a binding, like that. Next, I need to tell this series where to get the vertical and horizontal information. That is done using a property called the IndependentValueBinding. IndependentValue property is where you specify the horizontal axis. I'm going to set up a Binding here and I'll say the Path=Year. This is coming from my TourBooking class, the Year property, and on the other axis, I'm going to bind one of these other properties.
I think I'll choose WineTours. That would be the DependentValueBinding. Unpin my toolbox so we can see everything on our screen. I think might need to test this. I'll press F5 to run the application and then click on LiveDemo. Look at that, a successful chart. It looks like we had a good year last year. For my next demo, I'll look at UseBarChart.xaml.
The main difference here is I'm using the barSeries, which draws horizontal bars instead of lines, and then I'm also starting to customize the look of my chart. I'm doing that by setting my own CategoryAxis. You can see I'm specifying the word Year along the left edge, and the use of Italics fonts. And then along the LinearAxis across the bottom here, I'm specifying the Title of Sales and then the Minimum and Maximum value numbers, plus the Interval lines to draw on the chart.
Press F5 to see what this one looks like. It looks nice. Years are along the left side; across the bottom are our Sales values. To really see the power of the charts, I suggest you work at the Silverlight toolkit Samples. We can find them by going to your browser, going to silverlight.codeplex.com, and then clicking on this link, Silverlight 5 samples. They have some nice samples on charts in this area called the DataVisualization area.
You can see the different types of charts they have: pie charts, scatter charts, tree maps, and many more. The one I want to look in this demo is the Column Series, which is vertical bars, and then I want to go down and show you that you can do multiple colors-- I've got Three Series charts--and that you can also animate the values in your charts, as it's shown here. A chart control included with the Silverlight toolkit has some great default visuals, but it also provides you with the ability to customize those as you would any other Silverlight control.
Get unlimited access to all courses for just $25/month.Become a member