Generate Different Charts using Silverlight Toolkit

Hey Friends,

In this article, I will be telling you all about the method using which you can generate the charts with the help of Silverlight Toolkit which is freely available for download from here.

Before starting the actual process, you must download the Silverlight 4 from here.

After installing the Silverlight 4 and the toolkit, Create a new project in Visual Studio 2010 of Silverlight and while creating a new project ensure that you check the enable WCF services option. ( This option is useful if you are using the WCF services for your project )

After creating a new project, add the following references to the project.

I am considering the sample data for the simple chart that we want to make. We create a new class as follows:

Now we have two variables CustName and Orders which are defined inside the MyClass Class. Our Chart will show the data about the Customer Name and Orders in the Line Chart. So using the following code sample,

Above code sample indicates which data will be represented in the chart. We have Created a MyClassObj object of the List of MyClass Class and then we are adding the Data of the five people inside the Chart to display.
Now, to call this we need an object of RoutedEventHandler, so
:)

Now we also have to change the MainPage.xaml file for the display purpose of the chart, refer the below code for the same:

We are generating the simple LineSeries Chart using the above code. If one wants to display a PieSeries, BubbleSeries, ScatterSeries, ColumnSeries or Series Like all the Stacked Series, then just change the LineSeries from the code and you are done for the respective series which are available in the Silverlight Toolkit. πŸ™‚

After doing all this, just run the application and the following lineSeries will be generated :

Similarly, if you generate the other series then you will get the following charts:

Bubble Chart

Pie Chart

Area Chart

So, there you are ready with all the Charts using the Silverlight Toolkit and those look awesome for your dashboard, aren’t they? πŸ˜‰

Enjoy πŸ™‚

17 thoughts on “Generate Different Charts using Silverlight Toolkit

    1. Thanks Gauri.

      Its really easy and very effective for dashboard if you require it somewhere, someday . Go for it πŸ™‚

  1. hi hrushikesh..
    i m developing a application for windows phone 7 , there i need to develop a areachart , so i thought of using ur sample , but i couldn suceed in that , can u kindly help me in solvind that , areachart for windows phone 7….
    thanks in advance
    Anil

    1. Hi,

      Can you tell me what is actually the error you are facing with? It would be great to help if you can tell me the error! πŸ™‚

  2. actually the above mentioned code works fine with the silverlight proj , but i m working on the windows phone 7 application which is completly different , i also downloaded the above mentioned took kit but its not reflecting in my solution . actually the main problem is that i cant find
    i m working on silverlight for windows phone

    1. Yeah okay!

      For developing the charts for the Windows Phone 7 using Silverlight, I follow the amCharts which are basically open source and are freely available. πŸ™‚ You can have a look at them from the below mentioned link.

      http://wpf.amcharts.com/quick/general

      If you want to refer the source code, then refer the below link.

      https://github.com/ailon/amCharts-Quick-Charts

      If you have any problems regarding the above solution, please post it here πŸ™‚

      1. awesome .i got wat i was lookin for ,,, thanks a lot
        , if i stuck up any where in the process , ill get in touch wit ya …
        πŸ™‚

        keep up the nice work

        Regards

  3. hi hrushi , i m back . now i have a new challenge up in front , thats i need to display a bar as shown here . can u help me out in doin that .

  4. the bar consits of different colour respective of the values for example-there are 4 data’s (facebook=20{red},twitter=30{blue},youtube=40{green}, standby=10{black})
    so here the bar must display
    20%red,30%blue,40%green n 10%black
    how can i do that …

    thanks in advance

  5. Looks cool………..Can you post something for a web application also? Did you try silverlight charts on web application?

  6. well..I should be more specific iI think………I am a new guy in .Net world…and using VWD 2008/2010……….I am having tough time to add reference to system.windows.controls as I can not find in the list. Any idea from your side? Do I need to have professional edition of VS 2008/2010 to have silverlight control in my web application?

    1. Hi,

      If you want to add references and if you dont have them in the references list, then just download the .dll files of the particular reference which you want to add and then add it to the references list. In this way, you can use the reference in your application. πŸ™‚

  7. hi,
    i generate line chart using ur given method but when i run this chart it shows chart without legend, so please help me to show legend in my chart.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s