Dynamic charts in MVC

Dynamic charts

When we need to display some charts, we might use simple and fast library – HighCharts.Which I’ll try to explain brefly below.

Example

In our example we display column chart and linear plot. We will need to this : JQuery, HighCharts scripts.You can also download it from nuget package.

At the begining we generate pseudorandom numbers from 3k-10k it mean salary in each month.

Now we create our chart.

The first lines should be clear. In function SetXAxis we creat Categories.In our case – month. In SetSeries() we pass pseudorandom salary.

Pass model to view.

And the view is as

linear chart

And now the same but with column chart.

The difference in the code is just this line:

As you can see we have a lot of options presentations charts.

HighCharts

And it look like:

Column chart

Summary

I showed you just the tip of the iceberg. This library is much more powerful and as you see easy to use.

Link to the project: here

 

2 Comments on “Dynamic charts in MVC”

Leave a Reply

Your email address will not be published. Required fields are marked *