Emprise JavaScript Charts with ASP.NET AJAX

I am a big fan of ExtJS for engineering rich interactive user interfaces for all the data centric web2.0 based applications, but one of the components that’s missing in ExtJS is the charting component. I consider ExtJS as a comprehensive java script based UI Framework but still they haven’t focused on providing Java Script based charting controls so far.

Most of the charting controls I came across are server centric and require the chart image to be transmitted to the web browser; others require some plug-in (Flash Player etc) to be installed on every client machine or some other limitation.

I came across EJS Charts (Emprise Java Script Charts) some time back and found it really useful in fulfilling the gap in the graphical data presentation needs over the web by presenting these charts in an equally responsive fashion like the data.

The good things about them are

• They are purely Java Script based charting controls, doesn’t require any plug-in to be installed on client machines
• They are pretty much interactive; provide features like zooming, mouse hints etc.
• Just provide them with the data in java script (arrays, xml, csv) and they will render the specified chart at the client end.
• Series can be added to / removed from an already rendered chart so as to get the affect of a continually updating chart.
• Minimizes the overall network traffic generated by the web app, they require transfer of just the data between the server and web browser and not the complete chart in image format.
• Programming model is fairly simple.
• Works with all the modern browsers i.e. Internet Explorer 6 and above, FireFox 1.5 and above etc.

The bad things about them are

• They don’t provide extensive range of chart types as provided by other server side charting controls, but I hope that they will mature over the period of time.
• They are not widely spread so far; people are really un-aware that this thing can happen at the client end too.

Here is the simple sequence of steps you need to follow in order to utilize these web2.0 Java Script based charts in ASP.NET AJAX.

• Call the server method to get the data (e.g. List<keyvaluepair<string,int>>) from the ASP.NET PageMethod (if required, otherwise use the data got from the last call to the server method) and hook the callback for it.
• In the callback function, check if the EJS based 'Chart' object is already defined, if not then define one. The constructor of that EJS Chart takes a div id where it needs to render the generated chart. You can optionally specify other properties in the constructor for the chart in order to customize title, captions, hints, legend, gridlines and other visual and behaviour related properties of the chart. If a series is already added in the previosuly generated chart, remove it so that the new series as per the user selection can be added to the same chart instance.
• Transform the data returned from the Server (e.g. List<keyvaluepair<string,int>>) to an ordinary 'Java Script Array'
• Define the EJS based 'Chart Series' (LineSeries, BarSeries or AreaSeries etc) as per the user selection and supply the array you have just created as the datasource for the chart.
• Add this 'Chart Series' instance to the 'Chart' instance

Here are the images of the charts generated from the sample code I have uploaded for you to have a look at and experiment.

You can download the sample code that uses EJS with ASP.NET AJAX (that present different graphical representations of data based on user selected chart type) from here. Please note that the sample code uses ASP.NET 3.5 (December Extensions Preview) and EJS Personal Edition (EJS personal edition has got a few limitations too, read more about those from here).