Chart.Mvc

A .NET wrapper to generate charts using the popular Chart.Js library (http://www.chartjs.org).

Important

Currently it's supported only Chart.Js v1, not the v2. Some functionalities are on the repository, but I don't know if\when I'll update the nuget package because in Chart.Js v2 they used different types for a single "property"; sometimes a property is a string, sometimes is an array..and that's not possible in c#

For Chart.Js v1 documentation, check this link: https://github.com/chartjs/Chart.js/tree/v1.1.1/docs

Sample

You can see the library in action here: http://www.martinobordin.it/Chart.Mvc

Installation

Install using Nuget or compile binary from https://github.com/martinobordin/Chart.Mvc.git.

    PM> Install-Package Chart.Mvc

How do I use it?

To use the library you just need to:

include a reference to Chart.Js library (provided in Nuget Package or downloadable from http://www.chartjs.org, )
insert a canvas in your HTML

call the method Html.CreateChart(), passing the canvas name and the chart object you want to use

  @using Chart.Mvc.ComplexChart;
  @using Chart.Mvc.Extensions
  @{
      var barChart = new BarChart();
      barChart.ComplexData.Labels.AddRange(new []{ "January", "February",  "March", "April", "May", "June", "July"});
      barChart.ComplexData.Datasets.AddRange(new List<ComplexDataset>
                             { 
                                new ComplexDataset
                                    {
                                        Data = new List<double> { 65, 59, 80, 81, 56, 55, 40 },
                                        Label = "My First dataset",
                                        FillColor = "rgba(220,220,220,0.2)",
                                        StrokeColor = "rgba(220,220,220,1)",
                                        PointColor = "rgba(220,220,220,1)",
                                        PointStrokeColor = "#fff",
                                        PointHighlightFill = "#fff",
                                        PointHighlightStroke = "rgba(220,220,220,1)",
                                    }, 
                                new ComplexDataset
                                    {
                                        Data = new List<double> { 28, 48, 40, 19, 86, 27, 90 },
                                        Label = "My Second dataset",
                                        FillColor = "rgba(151,187,205,0.2)",
                                        StrokeColor = "rgba(151,187,205,1)",
                                        PointColor = "rgba(151,187,205,1)",
                                        PointStrokeColor = "#fff",
                                        PointHighlightFill = "#fff",
                                        PointHighlightStroke = "rgba(151,187,205,1)",
                                    }
                            });
  }
  
  <canvas id="myCanvas" width="400" height="400"></canvas>
  @Html.CreateChart("myCanvas", barChart)

Note:

Be sure to call CreateChart AFTER the reference to Chart.js file
The generated chart object will be named like the canvas plus "_chart" suffix (for the example above: myCanvas_chart). In this way you can attach handlers and call method like generateLegend().

The chart object contains information like chart type, labels, data and visualization options. Property names are the same of the original Chart.Js, so it should be easy to use them.

Currently all the 6 types of Charts.Js charts are supported and fully configurable:

Line chart (BarChart class with BarChartOptions)
Bar chart (LineChart class with LineChartOptions)
Radar chart (RadarChart class with RadarChartOptions)
Polar area chart (PolarAreaChart class with PolarAreaChartOptions)
Pie charts (PieChart class with PieChartOptions)
Doughnut charts (DoughnutChart class with DoughnutChartOptions)

Disclaimer

The software is provided "AS IS". I didn't full test it (Chart.Js has tons of options) and you'd need to properly escape strings containing JavaScript and be sure to pass correct parameters (valid colors values, etc) .