Using HighCharts with ASP.Net

Hello There!

Today, we will talk about using HighCharts with ASP.Net Web Site.

I am big fan of responsiveness in a Web Site whenever it comes to a single platform for information sharing. I use HighCharts for responsive dashboards.

Since HighCharts is purely a JavaScript front-end / client side API for showing charts, we will be using DotNet.HighCharts for building up the Chart from the code-behind rather than using Client-side JavaScript.

So, first create an Asp.Net web site and run the Nuget Package Manager Console as shown below and execute the following command for Nuget to download and reference DotNet.HighCharts

Install-Package DotNet.Highcharts

PackageManager.png

After Nuget has downloaded and referenced the DotNet.HighCharts, its DLL will be automatically referenced by the Project. Please cross-check if your project references DotNet.HighCharts.dll in the references window.

TIP: If you are facing difficulties in downloading the package, then there is a download link for the DotNet.Highcharts.dll at the end of this tutorial.

References.png

In your code-behind file, add the below imports statements:

Imports DotNet.Highcharts.Enums
Imports DotNet.Highcharts.Helpers
Imports DotNet.Highcharts.Options
Imports Point = DotNet.Highcharts.Options.Point
Imports DotNet.Highcharts
Imports System.Drawing
Imports System.Net
Imports System.Runtime.Serialization.Json
Imports System.IO
Imports Newtonsoft.Json
Imports System.Data ‘ To use incase your charts is connected to the DataSet to fetch the data from database

I will be showing two examples:

  1. Column Chart (using 1 Dimensional Array)
  2. Pie Chart (using 2 Dimensional Array)

In the .aspx add the below call to the Highcharts javacript reference. Without this call, your chart will not render on the web page.

http://code.highcharts.com/highcharts.js

<%–without the call to the exporting.js, your chart will not be able to export itself to any format.–%>
http://code.highcharts.com/modules/exporting.js

Add the ASP.Net Literal Controls in the Markup as shown below:

<asp:Literal ID=”Literal_Column” runat=”server”></asp:Literal>

<asp:Literal ID=”Literal_Pie” runat=”server”></asp:Literal>

Now lets open the Code behind vb file.

Column Chart:

I am adding the below code to a event handler to launch and populate the chart with the data.

In order to show the information in Column Chart, you need information for the X Axis and the Y Axis. So, for this purpose you must have two single dimensional arrays filled up. One for the X Axis and the other for the Y Axis.

‘ COLUMN CHART WORK AREA

Dim oListXAxis As New List(Of String)()
Dim oListYAxis As New List(Of Object)() ‘ You must have the Y Axis data in the Array of type Object only. It will not be able to read through the other data types.

‘ Below, I am filling the information from the DataSet oDataSet into the Array. One for the XAxis and the other for the YAxis

Dim oArrXAxis As New ArrayList

oArrXAxis.Add(“Jan”)
oArrXAxis.Add(“Feb”)
oArrXAxis.Add(“Mar”)

Dim oArrYAxis As New ArrayList

oArrYAxis.Add(“123”)
oArrYAxis.Add(“456”)
oArrYAxis.Add(“789”)

For iCountXAxis As Int32 = 0 To oArrXAxis.Count – 1
oListXAxis.Add(oArrXAxis(iCountXAxis))
Next

For iCountYAxis As Int32 = 0 To oArrYAxis.Count – 1
oListYAxis.Add(oArrYAxis(iCountYAxis))
Next

Next, We will move to create a Chart object.

Dim chartColumn As Highcharts ‘ HighCharts Object.

chartColumn = New Highcharts(“ColumnChart”).InitChart(New Chart() With { _
.DefaultSeriesType = ChartTypes.Column, _
.Animation = New DotNet.Highcharts.Helpers.Animation(True), _
.MarginRight = 130, _
.MarginBottom = 25, _
.ClassName = “chart”}) _
.SetCredits(New DotNet.Highcharts.Options.Credits() With { _
.Enabled = False}) _
.SetTitle(New Title() With { _
.Text = “Column Charts”, _
.X = -20 _
}) _
.SetSubtitle(New Subtitle() With { _
.Text = “Source: Rohant Kunnat @ WordPress”, _
.X = -20 _
}) _
.SetXAxis(New XAxis() With { _
.Categories = oListXAxis.ToArray() _
}) _
.SetYAxis(New YAxis() With { _
.Title = New YAxisTitle() With { _
.Text = “Connections” _
}, _
.PlotLines = {New YAxisPlotLines() With { _
.Value = 0, _
.Width = 1, _
.Color = ColorTranslator.FromHtml(“#808080”) _
}} _
}) _
.SetTooltip(New Tooltip() With { _
.Formatter = “function() {” & vbCr & vbLf & “return ‘<b>’+ this.series.name +'</b><br/>’+” & vbCr & vbLf & ” this.x +’: ‘+ this.y +”;” & vbCr & vbLf & ” }” _
}) _
.SetLegend(New Legend() With { _
.Layout = Layouts.Vertical, _
.Align = HorizontalAligns.Right, _
.VerticalAlign = VerticalAligns.Top, _
.X = -10, _
.Y = 100, _
.BorderWidth = 0 _
}) _
.SetSeries({New Series() With { _
.Name = “Count of Q1”, _
.Data = New Data(oListYAxis.ToArray)}})

Literal_Column.Text = chartColumn .ToHtmlString() ‘ Sets the Chart to the ASP.Net Literal control.

Pie Chart:

I am adding the below code to a event handler to launch and populate the chart with the data.

‘ PIE CHART WORK AREA

‘ Q1 REPORT.
Dim oDTQ1Report As New DataTable
Dim oDCQ1ReportMonth As New DataColumn(“MONTH”)
Dim oDCQ1ReportCount As New DataColumn(“COUNT”)

Dim oDRQ1Report As DataRow

oDTQ1Report.Columns.Add(oDCQ1ReportMonth)
oDTQ1Report.Columns.Add(oDCQ1ReportCount)
oDTQ1Report.AcceptChanges()

oDRQ1Report = oDTQ1Report.NewRow()
oDRQ1Report.Item(0) = “Jan”
oDRQ1Report.Item(1) = “123”
oDTQ1Report.Rows.Add(oDRQ1Report)

oDRQ1Report = oDTQ1Report.NewRow()
oDRQ1Report.Item(0) = “Feb”
oDRQ1Report.Item(1) = “456”
oDTQ1Report.Rows.Add(oDRQ1Report)

oDRQ1Report = oDTQ1Report.NewRow()
oDRQ1Report.Item(0) = “Mar”
oDRQ1Report.Item(1) = “789”
oDTQ1Report.Rows.Add(oDRQ1Report)

oDTQ1Report.AcceptChanges()

‘ We’ll have to convert the DataTable into a two dimensional array for the Pie Chart to understand. So lets declare a two dimensional array as show below:

Dim o2DArrQ1Report(oDTQ1Report.Rows.Count – 1, 1) As Object

For iCount As Int32 = 0 To oDTQ1Report.Rows.Count – 1

For iCount2d As Int32 = 0 To 1

o2DArrQ1Report(iCount, iCount2d) = oDTQ1Report(iCount)(iCount2d)

Next

Next

 

Next, We will move to create a Chart object.

‘ PIE CHART

Dim chartPie  As Highcharts ‘ HighCharts Object.
chartPie = New Highcharts(“chartPie”).InitChart(New Chart() With { _
.Type = ChartTypes.Pie, _
.MarginTop = 80, _
.MarginRight = 40, _
.Animation = New DotNet.Highcharts.Helpers.Animation(True), _
.Options3d = New ChartOptions3d() With { _
.Enabled = True, _
.Alpha = 45, _
.Beta = 0 _
} _
}).SetCredits(New DotNet.Highcharts.Options.Credits() With { _
.Enabled = False}) _
.SetTitle(New Title() With { _
.Text = “Pie Chart” _
}).SetTooltip(New Tooltip() With { _
.PointFormat = “{series.name}: <b>{point.value}</b>” _
}).SetPlotOptions(New PlotOptions() With { _
.Pie = New PlotOptionsPie() With { _
.AllowPointSelect = True, _
.Cursor = Cursors.Pointer, _
.Depth = 35, _
.DataLabels = New PlotOptionsPieDataLabels() With { _
.Enabled = True, _
.Color = ColorTranslator.FromHtml(“#000000”), _
.Formatter = “function() { return ‘<b>’+ this.point.name +'</b>: ‘+ this.y; }”
} _
} _
}).SetSeries(New Series() With { _
.Type = ChartTypes.Pie, _
.Name = “Q1 Report”, _
.Data = New Data(o2DArrQ1Report) _
})

Literal_Pie.Text = chartPie .ToHtmlString() ‘ Sets the Chart to the ASP.Net Literal control.

EXPORTING THE CHARTS

In a way, it is a great practice, if the user is able to export the charts as an image or a PDF document. So, in order to enable the export of the Charts, please include the following call to the Java Script in your Default.aspx

http://code.highcharts.com/modules/exporting.js

After adding this script call, the Export button will appear on the top right corner of the Chart.

ContextMenu.png

The option lets you to export the Chart to various file types.

And that is it!, you should be getting your Charts on the Web Page.

It is quite difficult for me to show a complete example of all the chart types available with Highcharts in this blog. Nevertheless, I would definitely come up with a solution in case you have any problems for implementing any other chart type available with HighCharts.

If you have any trouble getting around this tutorial, please don’t hesitate to leave a comment on my blog.

With a big public demand in form of comments and eMails to me for the Download link of the above tutorial, Good News!!, I have a download link for it now. Please click the below link for the above tutorial.

Download Link for the above blog

TIP: The entire code resides in the Default.aspx file and Default.aspx.vb file. If the project for reason or dependency does not run, then just copy the Default.aspx and Default.aspx.vb file into another project of yours. In this case, you will have to download the DotNet.Highcharts.dll to your project as well. You can download from the below link.

Download Link for DotNet.HighCharts.dll

Cheers!

Rohant K

 

Advertisements

5 thoughts on “Using HighCharts with ASP.Net

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s