This post explains how to use the DotNet HighCharts wrapper for the HighCharts Javascript library. You can download the wrapper from Codeplex.
First create an ASP,NET file and add the following Javascript references.
1: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>1:2: <script src="http://code.highcharts.com/highcharts.js">1: </script>2: <script src="http://code.highcharts.com/modules/exporting.js"></script>
Download the wrapper and add the single .dll reference to the project and add the following using statements to the code.
1: using DotNet.Highcharts;
2: using DotNet.Highcharts.Options;
3: using DotNet.Highcharts.Helpers;
4: using DotNet.Highcharts.Enums;
The wrapper provides pure C# methods for generating the charts and has a method ToHtmlString() which returns the JavaScript version of the chart. This can be set to a ASP.NET Literal control for rendering.
Then here’s a sample for creating a column chart with two series.
1: DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart").SetXAxis(new XAxis
2: {
3: Categories = sales.GetSales().Select(list => list.ProductName).ToArray<string>()
4: })
5: .SetSeries(new Series []
6: {
7: new Series()
8: {
9: Type = ChartTypes.Column,
10: Data = new Data(new object [] {125,824,122}),
11: Name = "Sales"
12: },
13: new Series()
14: {
15: Type = ChartTypes.Column,
16: Data = new Data(new object [] { 57,234,67 }),
17: Name = "Freight"
18: }
19: });
‘sales’ is the object data source, and we get the product name from it and the values are hard coded. All charts has a name, here the column chart’s name is ‘chart’ itself. Names should be unique for the page. If you have another chart with same in the same page only the last chart will be displayed.
Then chart has SetXAxis method where set the X-Axis properties. And the chart has number of series. We feed the data to the series through its Data property which takes an object array.
Finally we serialize the chart as HTML content to the Literal control (ltrChart)
Example of a pie chart generation.
1: DotNet.Highcharts.Highcharts piechart = new DotNet.Highcharts.Highcharts("pie").SetXAxis(new XAxis
2: {
3: Categories = sales.GetSales().Select(list => list.ProductName).ToArray<string>()
4: })
5: .SetSeries(new Series[]
6: {
7: new Series()
8: {
9: Type = ChartTypes.Pie,
10: Data = new Data(new object [] {125,824,122}),
11: Name = "Sales"
12: }
13: });
14:
15: piechartLiteral.Text = piechart.ToHtmlString();
Versatile Digital DNA 