Added chart.js example

magrawal23 · magrawal23 · commit 3d758366d22c · 2019-02-25T08:16:37.000-05:00
diff --git a/MVC_Start/Controllers/HomeController.cs b/MVC_Start/Controllers/HomeController.cs
@@ -18,5 +18,30 @@ public IActionResult IndexWithLayout()
     {
       return View();
     }
+
+    /// <summary>
+    /// Replicate the chart example in the JavaScript presentation
+    /// 
+    /// Typically LINQ and SQL return data as collections.
+    /// Hence we start the example by creating collections representing the x-axis labels and the y-axis values
+    /// However, chart.js expects data as a string, not as a collection.
+    ///   Hence we join the elements in the collections into strings in the view model
+    /// </summary>
+    /// <returns>View that will display the chart</returns>
+    public ViewResult DemoChart()
+    {
+      string[] ChartLabels = new string[] { "Africa", "Asia", "Europe", "Latin America", "North America" };
+      int[] ChartData = new int[] { 2478, 5267, 734, 784, 433 };
+
+      ChartModel Model = new ChartModel
+      {
+        ChartType = "bar",
+        Labels = String.Join(",", ChartLabels.Select(d => "'" + d + "'")),
+        Data = String.Join(",", ChartData.Select(d => d)),
+        Title = "Predicted world population (millions) in 2050"
+      };
+
+      return View(Model);
+    }
   }
 }
diff --git a/MVC_Start/Models/App_Models.cs b/MVC_Start/Models/App_Models.cs
@@ -11,4 +11,12 @@ public class GuestContact
     public string Email { get; set; }
     public string Phone { get; set; }
   }
+
+  public class ChartModel
+  {
+    public string ChartType { get; set; }
+    public string Labels { get; set; }
+    public string Data { get; set; }
+    public string Title { get; set; }
+  }
 }
diff --git a/MVC_Start/Views/Home/DemoChart.cshtml b/MVC_Start/Views/Home/DemoChart.cshtml
@@ -0,0 +1,54 @@
+﻿<!--
+  Example to introduce charting in MVC using chart.js
+
+  Author: Manish Agrawal
+  Date: Feb 25, 2019
+
+  Many examples use or are inspired by
+  http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/
+-->
+
+@model ChartModel
+
+@{
+  Layout = null;
+}
+
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Chart.js examples</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
+</head>
+<body>
+  <h1> Bar chart example</h1>
+
+  <canvas id="barchartexample" width="800" height="450"></canvas>
+
+  <script>
+    new Chart(document.getElementById("barchartexample"), {
+      type: '@Model.ChartType',
+      data: {
+        labels: [@Html.Raw(@Model.Labels)],
+        datasets: [
+          {
+            label: "Population (millions)",
+            backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
+            data: [@Model.Data]
+          }
+        ]
+      },
+      options: {
+        legend: { display: false },
+        title: {
+          display: true,
+          text: '@Model.Title'
+        }
+      }
+    });
+  </script>
+</body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -11,4 +11,12 @@ public class GuestContact`
`11`	`11`	`public string Email { get; set; }`
`12`	`12`	`public string Phone { get; set; }`
`13`	`13`	`}`
	`14`	`+`
	`15`	`+ public class ChartModel`
	`16`	`+ {`
	`17`	`+ public string ChartType { get; set; }`
	`18`	`+ public string Labels { get; set; }`
	`19`	`+ public string Data { get; set; }`
	`20`	`+ public string Title { get; set; }`
	`21`	`+ }`
`14`	`22`	`}`