Wednesday, March 27, 2013

Rendering multiple series in Highcharts using ASP.NET


In this article we will create a web application to render multiple series using highcharts. I used visual studion 2010 for creating this app.

1) Create a ASP.NET web application

2) Get below 2 javascripts. Highcharts js can be downloaded from http://highcharts.com and latest jQuery can be downloaded from http://jquery.com/download/

a) Highcharts.js
b)  jquery-1.4.1.js

3) Create default.aspx page

4) Add references to these scripts . NOTE – add jQuery file reference before highcharts
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>

5) Create a class for chart series (Y-axis)
public class ChartEx
{
public string name { get; set; }
public List<int> data { get; set; }
}

6) Create 2 hidden fields in html to store X and Y axis data

<asp:HiddenField runat="server" ID="hdnXaxis" />
<asp:HiddenField runat="server" ID="hdnYaxis" />

7) Create a div for rendering graph and set id as “container”

<div style="width:900px;height:300px;" id="container" > </div >


9) Populate data for X and Y axis in page_load event in code behind. You can connect to SQL Server Database to get data in the LoadData() method.


    protected void Page_Load(object sender, EventArgs e)
        {
            LoadData();
        }

        public void LoadData()
        {
            //X axis data
            List<int> lstXaxis = new List<int>() { 9, 10, 11, 12 };
            List<ChartEx> lstseries = new List<ChartEx>();

            //Y axis - series 1
            ChartEx series1 = new ChartEx();
            series1.name = "Revenue";
            series1.data = new List<int>() { 100, 200, 150, 175 };

            //Y axis - series 2
            ChartEx series2 = new ChartEx();
            series2.name = "Profit";
            series2.data = new List<int>() { 50, 120, 80, 95 };

            //Add 2 series to list
            lstseries.Add(series1);
            lstseries.Add(series2);

            //Convert X axis data to JSON
            JavaScriptSerializer oSerializer1 = new JavaScriptSerializer();
            hdnXaxis.Value = oSerializer1.Serialize(lstXaxis);

            //Convert Y axis data to JSON
            JavaScriptSerializer oSerializer2 = new JavaScriptSerializer();
            hdnYaxis.Value = oSerializer1.Serialize(lstseries);
        }

8)  Now- the last step- copy the below javascript function to render chart

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

        function DrawMyGraph1() {
            var xaxis = $.parseJSON($("#hdnXaxis").val());
            var series1 = $.parseJSON($("#hdnYaxis").val());
            chart = new Highcharts.Chart({
                chart: {
                    type: 'column',
                    renderTo: 'container',
                    defaultSeriesType: 'area'
                },
                title: {
                    text: 'Revenu Profit'
                },
                subtitle: {
                    text: 'revenu profit graph'
                },
                xAxis: {
                    categories: xaxis
                },
                yAxis: {
                    title: {
                        text: 'Revenue/Profit'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '$' +
Highcharts.numberFormat(this.y, 0) + ' ' + this.series.name + ' in ' + this.x + ' hour';
                    }
                },
                series: series1
            });
        }
</script>


Done ! Run the application and you can see multiple series rendered in your graph.

Let me know if this worked for you. 

6 comments:

Unknown said...

Congratulations for you post! It helped me a lot: there are a lot of articles on web talking about this matter, but not as clear as you expose!

wathers said...

Can you drop a screen shot of the output this produces, along with the JSON values please

Muhammad Waqas Siddiq said...

I am using the same code and when i run it shows me something different

Unknown said...

iam using the code ,but i have problem
"Uncaught TypeError: Cannot read property 'opacity' of undefined highcharts.js:20
H.HighchartsAdapter.H.HighchartsAdapter.a.init highcharts.js:20
(anonymous function) highcharts.js:25
(anonymous function) highcharts.js:307
Uncaught TypeError: undefined is not a function WebForm2.aspx:18
DrawMyGraph1 WebForm2.aspx:18
jQuery.extend.ready jquery-1.4.1.js:387
DOMContentLoaded"

can you help me ?

ritwik said...

hello, i have problem in setting different colors in highcharts:column graph...i want to do it client side in .net???

Unknown said...

I have created step by step but after run it not viewed on browser,its blank.