nikspatel007/chartjs.net

Creating a .NET wrapper using MVCHtmlString to allow Razor Engine to render charts on the fly. We have used MVCHtmlString to generate HtmlString and we will use HtmlHelpers to extend the functionality of Razor Engine.

ChartJS.NET

Creating a .NET wrapper using MVCHtmlString to allow Razor Engine to render charts on the fly. We have used MVCHtmlString to generate HtmlString and we will use HtmlHelpers to extend the functionality of Razor Engine.

Rendering Bar Charts

To build your Bar Chart, you will need to add code to your controller and then use the HTML Extensions in your view. Below is the controller code:

  public ActionResult Index()
    {
        BarChart barChart = new BarChart();

        barChart.ChartData.Datasets = new List<BarDataSet>()
        {
            new BarDataSet() {
                Data = new double[] { 65, 59, 80, 81, 56, 55, 40 },
                Label = "First Dataset",
                FillColor = "rgba(220, 220, 220, 0.5)",
                StrokeColor = "rgba(220, 220, 220, 0.8)",
                HighlightFillColor = "rgba(220, 220, 220, 0.75)",
                HighlightStrokeColor = "rgba(220, 220, 220, 1)"
            },
            new BarDataSet() {
                Data = new double[] { 28, 48, 40, 19, 86, 27, 90 },
                Label = "Second Dataset",
                FillColor = "rgba(151,187,205, 0.5)",
                StrokeColor = "rgba(151,187,205, 0.8)",
                HighlightFillColor = "rgba(151,187,205, 0.75)",
                HighlightStrokeColor = "rgba(151,187,205, 1)"
            }
        };

        barChart.ChartData.Labels = new List<string>() {
            "January", "February", "March", "April", "May", "June", "July"
        };


        barChart.ChartConfig.BarDatasetSpacing = 50;
        barChart.ChartConfig.ScaleGridLineColor = "rgba(0,0,0, 1)";
        barChart.ChartConfig.ScaleGridLineWidth = 2;
        barChart.ChartConfig.ScaleShowGridLines = true;
        barChart.ChartConfig.ScaleShowHorizontalLines = true;

        return View(barChart);
    }

and then in your view, you can use this:

  @model ChartJS.NET.Charts.Bar.BarChart

  @Html.BuildChart(Model)

You should now see your bar chart rendered on the page. There is also a samples project included so you can see how the code is being used.

chartjs.net's Issues

Bar chart is not rendering on HomePage

When Solution is run in Google Chrome, Homepage is blank and I can't see bar chart rendering.

Create legends for charts

Need to create a way for the user / programmer to add a legend to a chart.

Enhance Website design.

Add Layout and proper Page navigation to ChartJS.NET.Sample (MVC) Project.

Polar Area Chart

Create the structure and page for the Polar Area Chart. This will follow the pattern of Pie and Doughnut charts.

Global Options

Need to figure out how to allow the user / coder to apply global options as well as chart specific options.

Doughnut Chart

Create the doughnut chart code and test.

Figure out change log on GitHub

Get a change log setup to show versioning and what's changed etc.

Build simple template for samples site

We need a simple layout for the samples site as well as the instructional website.

Create static data class for samples website

Change color properties to System.Drawing.Color

Use System.Drawing.Color for all color properties instead of using a string.