Friday, May 20, 2011

ASP.NET and HighCharts

High charts (http://www.highcharts.com ) is a really nice tool to generate graphs/reports on web applications. This article is about how to use high charts in ASP.Net and also shows how to pass data from .net to high chart control (JS/JQuery function) using JSON.

The charts generated by HighCharts control are really nice and have lots of client side features like zoom, selecting/highlighting series etc.

Before starting the example, we need two JS files for this. Both can be obtained from high charts website (http://www.highcharts.com ). The javascript file required are ‘highcharts.js’ and ‘jquery-1.4.1.min.js’

Ok..now let us develop an ASP.NET web application which displays high-chart graph.


1 Create a new web application using Visual Studio

2 Include the two js files inside the head tag of default.aspx

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/highcharts.js"> </script>

3) Now we need X and Y coordinate data to generate the graph. Let us first create X-axis data. Since we are going to generate a revenue graph, let us include year as X-axis. Add the below code in code behind page, in page_load event

/*X axis coordinates*/
List<int> lstXaxis = new List<int>();
lstXaxis.Add(2007);
lstXaxis.Add(2008);
lstXaxis.Add(2009);
lstXaxis.Add(2010);


4) Create public properties for X and Y axis so that they can be accessed from aspx page.

public string Series1 { get; set; }
public string Xaxis { get; set; }

5) Using JavascriptSerializer, convert the x-axis data to Json

JavaScriptSerializer oSerializer = new JavaScriptSerializer();
Xaxis= oSerializer.Serialize(lstXaxis);

6) Let us now generate Y-axis data (revenue data). Create a class to store the Y-axis data

public class ChartEx
{
public string name { get; set; }
public List<int> data{ get; set; }
}

7) Fill Y-axis object with data and serialize it using Javascript serializer

/*Series1 - Yaxis*/
ChartEx oEx = new ChartEx();
oEx.data = new List<int> ();

oEx.name = "Revenue";
oEx.data.Add(350);
oEx.data.Add(410);
oEx.data.Add(220);
oEx.data.Add(421);

JavaScriptSerializer oSerializer1 = new JavaScriptSerializer();
Series1= oSerializer1.Serialize(oEx); ;

8) Create a div container in aspx page. The graph will be rendered in this container.

<div id="container" > </div >

9) Now call the Javascript function to draw the graph and pass the serialized C# object to javascript function. (Place the below code inside script tags)

$(document).ready(DrawMyGraph1);

function DrawMyGraph1 () {

chart = new Highcharts.Chart({
chart: {
renderTo: 'Container',
defaultSeriesType: 'area'
},
title: {
text: 'Revenu'
},
subtitle: {
text: 'Source: Test '
},
xAxis: {
categories: <%=Xaxis %>
},
yAxis: {
title: {
text: 'Revenue Vs Profit'
}
},
tooltip: {
formatter: function () {
return this.series.name + ' produced ' +
Highcharts.numberFormat(this.y, 0) + 'revenue in ' + this.x;
}
},
series: [<%=Series1 %>]
});
}




Done ! Now run the application and you can see the hightchart graph rendered in UI.

There are a lot of useful client side functionalities provided by this graph component like - zooming , highlighting specific graphs etc. Try it out an you will be amazed by how powerful this tool is.

23 comments:

Andreas said...

Hi there

Im afraid the code you provided dont work. The error im getting is at line:
$(document).ready(DrawMyGraph1);

It seems it doesnt know document...any ideas?

Deebu Jacob said...

There was a bug in the example. The js file that needs to be included is "jquery-1.4.1.min.js". I have updated the post.

Also I have updated the script which displays hightcharts in the post. It should be good now. Let me know if you still have issues.

Andreas said...

Hi, thanx for the update but i still cant get this to work. Ill provide you with some info below.

"Highcharts.js:75 Uncaught TypeError, undefined is not a function."

Im using asp.net 4.0, website
highcharts.js v2.1.4
jquery-1.4.1.min.js

These two lines give the same Warnings in VS2010:
"categories: <%=Xaxis %>"
"series: [<%=Series1 %>]"
"Expected expression"

Best regards,

A

Andreas said...

To remove the VS warnings change these two to:

"categories: eval('<%=Xaxis %>')"
"series: [ eval('<%=Series1 %>') ]"

Still failing load at line 75 in highcharts.js..

Deebu Jacob said...

Let us try to fix this issue in steps.

1) First step- hard code the xaxis and yaxis data in aspx page as given below. If this works correctly then that means the correct js files are included and javascript functions are working correctly. Let me know if this works.

So instead of

….
categories: <%=Xaxis %>
….
series: [<%=Series1 %>]


Use the hardcoded values

…..
categories: [2007,2008,2009,2010]
….
series: [{ "name": "Revenue", "data": [350, 410, 220, 421]}]


2) If the above step works, then we have correct js scripts. Now make sure that the Xaxis and “Series1” are public properties of page

public partial class Default : System.Web.UI.Page
{

…..
public string Series1 { get; set; }
public string Xaxis { get; set; }
…..
}

And alert the values in the JS function as given below. See if the “xaxis” and “series1” have the values that were given in step 1.

function DrawMyGraph1 () {
alert(<%=Xaxis %>)
alert(<%=Series1 %>)

}

Andreas said...

Hi Deebu,

Thank you for helping me find out whats going wrong for me.

Ive done step1, and its still failing at line 75 in highcharts.js
"Uncaught TypeError, undefined is not a function"

/A

Deebu Jacob said...

So it seems like there is some issue with JS function. I have given below a simple function to draw graph. See if this works... if not shoot me an email with the files/project that you are having issue and I will check it.

--------------------------------

<script type="text/javascript">
$(document).ready(DrawMyGraph1);

function DrawMyGraph1() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area'
},
xAxis: {
categories: [2008, 2009]
},
series: [{ "name": "Revenue", "data": [350, 410]}]
});
}
</script>

-----------------------------
( Make sure that you have declared the div element "container" in body tag)

Andreas said...

Last email with code worked! Dont know your email so ill post in here..

/A

Andreas said...

If i copy the correct java code inside this working aspx page i get this error: Jscript runtime error: Unable to set value of the property 'innerHTML': object is null or undefined'

Didnt get that one before i think, could it be that i was using it in a page with master pages before?

Andreas said...

That was because the renderTo was set to the wrong container id.

All code is working correctly now, so i guess the problem was that my page was using a master page.

Many thanks for the time you spent!

/Andreas

Deebu Jacob said...

You are welcome. Glad to know that graph worked fine for you.

ROD said...

Thanks!
Where I can find sample code?

Deebu Jacob said...

The code and steps to create basic highcharts graph using asp.net is provided in the blog.

You can get code samples from Highcharts official website http://www.highcharts.com/

sunny88 said...

its working awesome but you only place one record for example

ChartEx oEx = new ChartEx();

oEx.data = new List();
oEx.name = "Revenue";
oEx.stack = "male";
oEx.data.Add(350);
oEx.data.Add(410);
oEx.data.Add(220);
oEx.data.Add(421);

you only add
and i want another
oEx.name="test";
oEx.stack = "female";
oEx.data.Add(350);
oEx.data.Add(410);
oEx.data.Add(220);
oEx.data.Add(421);

Unknown said...

You should update your post and place the jquery declaration before highcharts.

I guess that's why Andreas was getting this error.

Deebu Jacob said...

Andreas error was due to incorrect container Id.

Unknown said...

Hello there

Where do you create the x-axis data? Are you making a new class to store this?

/*X axis coordinates*/
List lstXaxis = new List();
lstXaxis.Add(2007);
lstXaxis.Add(2008);
lstXaxis.Add(2009);
lstXaxis.Add(2010);

Unknown said...

Hello there

Where do you create the x-axis data? Are you making a new class to store this?

/*X axis coordinates*/
List lstXaxis = new List();
lstXaxis.Add(2007);
lstXaxis.Add(2008);
lstXaxis.Add(2009);
lstXaxis.Add(2010);

Deebu Jacob said...

Yes Jared, I am using a generic list to store X-axis data.

Prem Patel said...

i am creating graph using code help but in this when i pass null value then it gives an error, so how can i resolve this problem?

Unknown said...

Nice post ...
can you explain how to do that in MVC4...
tis will be helpful ..

OJ said...

can u tell how can i fetch this data from Excel to generate Highchart. Thanks.

Unknown said...

How can i render a pie chart using this method....

Could you please post or give your email address....