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