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.