Post
Ask Question

How To Use Highchart In ASP.NET

Introduction

This blog explains how to use Highchart in ASP.NET. Highchart is purely a JavaScript and jQuery based API which can create interactive charts for representing the data. Highchart is a client-side API and it is flexible for use on different kinds of web browsers.
 
Highchart

Features of Highchart

  • Compatible: Highchart works on all kinds of browsers.
  • Highchart is free for non-commercial purposes.
  • Different types of charts are available.
  • We can easily integrate it with .NET.

Types of Charts

Highcharts support different types of charts, such as: 

  • Gauges
  • Basic Area chart
  • Bar chart
  • Column chart
  • Line chart
  • Pie chart
  • Polar chart
  • Range series

    Highchart

How it works

  • Download this dll and add to your project:
  • Download and add JavaScript to your project:
  • Chart Creation
  • Chart Output

Step 1

  • Download this dll to add to your project or install NET Highcharts.
  • You can follow the below steps.

    Highchart

    Highchart

Step 2

  • Download Highcharts and add reference of the JavaScript in your page or master page:
  • Add the below script
    1. <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>  
    2. <script src="../../Scripts/highcharts.js" type="text/javascript"></script>  

Step 3

  • Chart Creation
    1. Below code  
    2. for Mvc  
    3. public ActionResult Index() {  
    4.         DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart").SetXAxis(new XAxis {  
    5.                 Categories = new [] {  
    6.                     "Jan",  
    7.                     "Feb",  
    8.                     "Mar",  
    9.                     "Apr",  
    10.                     "May",  
    11.                     "Jun",  
    12.                     "Jul",  
    13.                     "Aug",  
    14.                     "Sep",  
    15.                     "Oct",  
    16.                     "Nov",  
    17.                     Dec " }   
    18.                 }).SetSeries(new Series {  
    19.                 Data = new Data(new object[] {  
    20.                     29.9,  
    21.                     71.5,  
    22.                     106.4,  
    23.                     129.2,  
    24.                     144.0,  
    25.                     176.0,  
    26.                     135.6,  
    27.                     148.5,  
    28.                     216.4,  
    29.                     .1,  
    30.                     95.6,  
    31.                     54.4  
    32.                 })  
    33.             });  
    34.             return View(chart);  
    35.         }  
    36.         Below Code  
    37.         for Asp.net  
    38.         protected void Page_Load(object sender, EventArgs e) {  
    39.             DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart").SetXAxis(new XAxis {  
    40.                 Categories = new [] {  
    41.                     "Jan",  
    42.                     "Feb",  
    43.                     "Mar",  
    44.                     "Apr",  
    45.                     "May",  
    46.                     "Jun",  
    47.                     "Jul",  
    48.                     "Aug",  
    49.                     "Sep",  
    50.                     "Oct",  
    51.                     "Nov",  
    52.                     "Dec"  
    53.                 }  
    54.             }).SetSeries(new Series {  
    55.                 Data = new Data(new object[] {  
    56.                     29.9,  
    57.                     71.5,  
    58.                     106.4,  
    59.                     129.2,  
    60.                     144.0,  
    61.                     176.0,  
    62.                     135.6,  
    63.                     148.5,  
    64.                     216.4,  
    65.                     194.1,  
    66.                     95.6,  
    67.                     54.4  
    68.                 })  
    69.             });  
    70.             ltrChart.Text = chart.ToHtmlString();  
    71.         }  
    HTML Code
    1. For Mvc  
    2. @model DotNet.Highcharts.Highcharts  
    3. @(Model)  
    4. For Asp.net < asp: Content ID = "BodyContent"  
    5. runat = "server"  
    6. ContentPlaceHolderID = "MainContent" > < asp: Literal ID = "ltrChart"  
    7. runat = "server" > < /asp:Literal>  < /asp:Content>  

Step 4

We get the output like the below image.

Highchart