Introduction

This article is about creating a real time AJAX based line graph, using Microsoft Silverlight and JavaScript.

If you are impatient to see how it really looks, visit my website to see a 'JavaScript-only' demo. Download the source code and run it to see the actual thing in action. In this article, I will explain how to use my WPFGraph.js script along with Silverlight to create custom line graphs.

Images of the line graph in action with two different skins

Writing the XAML

This is the only important part. First, I will explain the bare minimum XAML which my script expects. As show below the graph is actually made of multiple line segments.

If you want to plot 10 points then you need to have 11 segments. In that case your segments should be named 'gline0, gline1....gline10'. Note that the name 'gline' is hardcoded into the JavaScript. If you decide to change it to something else don't forget to modify the WPFGraph.js file. Apart from this section, we have markup to create the X and Y axis and markers on axis. This can be customized as per your need.

Server side code for AJAX

In this example, I have used a simple function (Webmethod) in ASP.NET to do the job. It returns a numeric value. In the real world scenario, this would come from a database or some other source. I have also placed a random delay to simulate real world conditions. This method should be in code-behind file of page where we want to place the graph. It can be invoked from client side JavaScript using PageMethods object.

Notice that there is a ScriptManager control on the ASP.NET page with it's EnablePageMethods property set to true. Also I have put a button which can be used to start and stop real time plotting on the graph.

The first thing to note here is the parameters to the constructor of WPFGraph class. The first is the id of the Silverlight control, the second is the number of points to be plotted(= no of segments -1) and the last parameter is the maximum value the graph will be used to plot (range). The second parameter relates to the XAML file while the third is related to values coming from the server side function. You should set them appropriately in your code.

Further customization

There are lot of interesting things that you can do with XAML to alter the appearance of the graph. In Example2.aspx, I have created the same graph using different XAML. You will find it in the downloaded source. Hope you find my code useful. If you do happen to use it in your application, I would be happy to hear from you !

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

Share

About the Author

Ashish is an Electronics Engineer. He loves computers and programming, and always tries to do something different. Ashish started his programming career with FoxPro 2.5 (6 years ago) .Ashish has programmed in number of languages including C\C++ , Tcl\Tk , Assembly Language , JavaScript. Currently he works with ASP.NET, C# and VB.NET. He is currently working in multinational consulting company in India.

He devotes much of his free time to his website: http://ashishware.com , which contains lot of cool stuff on webdevelopment and programing in general.

Comments and Discussions

hi ashish
your code was really useful
But i want to use my database data (MSSQL) for displaying in the graph.
how to replace this random number generation from the datasource.?
Kindly help. Its really urgent for me..!!