ASP.NET Razor - The Chart Helper

The Chart Helper - One of many useful ASP.NET Web Helpers.

---

The Chart Helper

In the previous chapters, you learned how to use an ASP.NET "Helper".
You learned how to display data in a grid using the "WebGrid Helper".
This chapter explains how to display data in graphical form, using the "Chart Helper".
The "Chart Helper" can create chart images of different types with many formatting options and labels. It can create standard charts like area charts, bar charts, column charts, line charts, and pie charts, along with more specialized charts like stock charts.

The data you display in a chart can be from an array , from a database, or from data in a file.
In the example below, the data from an array of values s displayed:

Razor Chart Example

@{
var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Employees")
   .AddSeries(chartType="column",
        xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
        yValues: new[] { "2", "6", "4", "5", "3" })
   .Write();
}

- new Chart creates a chart object and sets its width and height
- the AddTitle method specifies the chart title
- the AddSeries method adds data
- the chartType parameter defines the type of chart
- the xValue parameter defines x-axis names
- the yValues parameter defines the y-axis values
- the Write() method displays the chart