|
|
|
|
There are five main steps to create a chart with Highcharts .NET and .NET Core
1. Add a reference to Higcharts.dll
2. Add data
To define data, you can either pass it from the controller to the chart in the view or use fixed data in the view.
A. Passing data from the controller to the chart view
This process would involve a database query, but for the sake of simplicity, fixed data is used.
Go to controller file and create a List<LineSeriesData> with values corresponding to the data you would like to display on the chart you need. If you are using other chart types, e.g. “Area” instead of “Line”, the collection becomes List<AreaSeriesData>. You can add any data to the collection and then set the ViewData for the respective item to the instance of the collection you need. This will later be used by the View and the chart itself to get the data, for example:
B. Use fixed data in the view
The method described above is the most common way to define data. Another way to define data is to create Highcharts object directly in the View, as shown here:
3. Include JavaScript files
Go to the view file and add online reference:
Some of the advanced chart types and features in Highcharts are not defined in the main “highcharts.js” file, but are available as separate modules. Add these modules as needed, for your project. Available additional modules are as follows:
4. Add references to your view file
To add the references to the view file, copy and paste the following lines:
5. Define chart in the view
The chart can be defined anywhere inside the View’s HTML definition, based on your page layout. To define the chart, go to view file (cshtml) and copy/paste the following code:
Here is the explanation of the code above:
5.1 First create Highcharts object chartOptions with all options inside
5.2 Define the ID of DIV using the chartOptions.ID=charts where the chart should be rendered.
5.3 Create HighchartsRenderer object based on Highcharts options using this line of code var renderer = new HighchartsRenderer(chartOptions);
5.4 Finally, render entire chart using this line of code @Html.Raw(renderer.RenderHtml())
The final result will look like the picture below
