HighCharts with DotNet

June 24, 2016

Highcharts is the sexiest charting library out there. 🙂 We can also export the chart to PNG, JPG, PDF or SVG format at the click of a button, or print the chart directly from the web page.

We are putting together a step by step tutorial that can help people getting started with a simple HighChart.
We would be using VB, HighCharts Libraries and JQuery to demonstrate it.

We would follow these steps:

Include essential HighCharts and JQuery libraries
Put a hidden field in view.
From VB end, create a requires JSON and set it to Hidden field of view
Parse the value from the hidden field and generate Pie Chart

Lets Start!!

First include all the required JS files in our view (lets say Chart.aspx)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>

Now lets put the hidden field and the chart placeholder in the Chart.aspx

<asp:HiddenField runat="server" ID="hdnChartDetail" /> 
<div id="divChart" >
</div>

In the code behind (lets say Chart.vb), we are going to create the required JSON using JavaScriptSerializer

Private ReadOnly _serializer As New Script.Serialization.JavaScriptSerializer()
Private Function GetPieChartDetails(ByVal chartList As List) As Hashtable
    Dim commanHash As New Hashtable
    Dim pieChartList As New ArrayList
    Dim chartArrayList As New ArrayList
    chartHashTable.Add("chart_title","Some title")
    For j = 0 To chartList.Count - 1
        Dim chartRow = chartList.Item(j)
        Dim innerPieChartList As New ArrayList
        innerPieChartList.Add(chartRow.Title)
        innerPieChartList.Add(chartRow.Count)
        pieChartList.Add(innerPieChartList)
    Next
    commanHash.Add("chart_data", pieChartList)
    chartArrayList.Add(commanHash)
    hdnChartDetail.Value = _serializer.Serialize(chartArrayList)
End Function

In the view (i.e Chart.aspx), we would parse the values from hidden field and create chart

<script language="javascript" type="text/javascript">
// assuming that you have already included JQuery
var chartDetail = parseJsonForJquery($('#<%=hdnChartDetail.ClientID %>').val());

$(document).ready(function () {
    Highcharts.setOptions({
    createPieChart('divChart',chartDetail[0].chart_title,chartDetail[0].chart_data);
});

function createPieChart(renderToControl, title, seriesVal) {
    pieChart = new Highcharts.Chart({
    chart: {
        renderTo: renderToControl, 
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        text: title
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.point.name + '</b>: ' + Math.round(this.percentage) + ' %'; //Math.round converts number into %.
        }
    },
    plotOptions: {
        pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                formatter: function () {
                return '<b>' + this.point.name + '</b>: ' + Math.round(this.percentage) + ' %';
            }
    },
        showInLegend: true
    }
    },
        series: [{
            type: 'pie',
            name: 'Pie Chart',
            data: seriesVal
            }]
         });
        }
</script>

That’s it. 🙂 In case you have any difficulties in integrating HighCharts in your DotNet application, please drop us a line and we can help you out.