Watch this example on YouTube
1. Download Chart.min.js from
https://www.jsdelivr.com/package/npm/chart.js
2. Common.js
jQuery.extend({
getValues: function (url) {
var result = null;
$.ajax({
url: url,
type: 'post',
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (data) {
result = data;
}
});
return result;
}
});
3. Add to _Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/jquery-1.10.2.min.js")
@Scripts.Render("~/Scripts/Chart.min.js")
@Scripts.Render("~/Scripts/Common.js")
</head>
4. Chart Model
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVCChart.Models
{
public class Chart
{
public string[] labels { get; set; }
public List<Datasets> datasets { get; set; }
}
public class Datasets
{
public string label { get; set; }
public string[] backgroundColor { get; set; }
public string[] borderColor { get; set; }
public string borderWidth { get; set; }
public int[] data { get; set; }
}
}
5. Home Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCChart.Models;
namespace MVCChart.Controllers
{
public class HomeController : Controller
{
public JsonResult BarChartData()
{
Chart _chart = new Chart();
_chart.labels = new string[] { "Jan", "Feb", "Mar" };
_chart.datasets = new List<Datasets>();
List<Datasets> _dataSet = new List<Datasets>();
_dataSet.Add(new Datasets()
{
label = "This Year",
data = new int[] { 40, 60, 20 },
backgroundColor = new string[] { "800000", "#E9967C", "#FF0000" },
borderColor = new string[] { "800000", "#E9967C", "#FF0000" },
borderWidth = "1"
});
_chart.datasets = _dataSet;
return Json(_chart, JsonRequestBehavior.AllowGet);
}
6. Index.cshtml
@{
ViewBag.Title = "Home Page";
}
<canvas id="barChart" width="300" height="100"></canvas>
<script>
var c = document.getElementById("barChart");
var ctx = c.getContext("2d");
var tData = $.getValues("/Home/BarChartData");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: tData
});
</script>
The above code displays the data in a Raw Json Fashion and Chart is not displayed
ReplyDelete