Graph of Some Metric Click here to see another demo.

You need to install Microsoft Silverlight in order to see the demo. This demo application was made using Silverlight and javascript. It uses AJAX to fetch data and refresh itself at regular intervals. I have written an online XAML generator tool to create such graphs. Linux/Unix users can download Moonlight plugin to see this demo : http://www.mono-project.com/Moonlight Incorporating this graph in your application should be very easy. You require the following things: HTML page which contains silverlight object and javascript. XAML for the graph. Prototype.js (used to make AJAX calls). A service URL that emits out JSON Follow simple steps given below to get it working:

Creating HTML page and adding javascript
I have a sample html page made for you. It uses 'prototype.js' to make AJAX calls. In this file modify the path to prototype.js and other script parameters

<script type="text/javascript" src="js/prototype-1.6.0.2.js"></script>
<script  type="text/javascript">

//Change these parameters for your graph
var barcount = 5;
var AJAXURL = "http://ashishware.com/graphjson.php";
var refreshdelay_ms = 4000;
.....

Creating XAML
Ok, now for all lazy programmers like me, I have created an online tool to generate XAML for such graph. All you need to do is supply parameters to generate XAML for your needs. Copy and paste the XAML to some file. Once it is generated, you can always use another tool (or good old notepad!) to tweak it. But be sure not to mess around with 'x:Name' attributes of elements, since the javascript makes use of them.
Goto the XAML creation tool

Download Prototype.js
Don't forget to download the legendary 'prototype.js'. This is used to make AJAX calls. It is not mandatory to use this. Feel free to use any other implementation for AJAX. Those working with ASP.NET, may want to make use of 'PageMethods' client side object for AJAX calls. Don't forget to update the reference to this file in your HTML. This is one place where you may screw up things (I usually do !).
Download Prototype.js

Service URL
This is basically just any URL that can return an JSON array like [10,22,34,55,10]. It fetches data from database or any other datasource and emits JSON for the graph. The javascript polls this URL at regular intervals and updates the graph. Simple, isn't it! The best part is, you can use any language to create such basic service URL. I have created one here, that serves random values for my sample graph.

Couple of important things:
i] The value for each cordinate should be from 0-150. That's how XAML and javascript have been laid out.
ii] Number of values rendered by this URL should be same as value of 'barcount' javascript variable.


Sample code for writing an *.aspx URL

//In the *.aspx only have this single line and code in *.aspx.cs
//<%@ Page Language="C#" AutoEventWireup="true"  
//CodeFile="GraphFeed.aspx.cs" Inherits="_Default" %>
protected void Page_Load(object sender, EventArgs e)
    {
        Random r = new Random();
        string strJSON = "[{0},{1},{2},{3},{4},{5}]";
        strJSON = String.Format(strJSON,
        r.Next(0, 150),
        r.Next(0, 150),
        r.Next(0, 150),
        r.Next(0, 150),
        r.Next(0, 150),
        r.Next(0, 150)
        );
        HttpContext.Current.Response.ContentType = "application/json";
        HttpContext.Current.Response.Write(strJSON);         
}

<?php
header('Content-Type: application/json');
echo "[".rand(0, 150).",".rand(0, 150).",".rand(0, 150).",".rand(0, 150).",".rand(0, 150)."]";
?>

Criticize or Thank the Creator !
This is not a mandatory step ! Please feel to modify and use this work anywhere. If possible, link back to my site. I have spent good amount of time to make this and I hope you will like it. Feel free to drop in an email with your feedback at