HighCharts with DotNet

Tudip

24 June 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.