Watch this example on YouTube
1. Common.js
jQuery.extend({
getValues: function (url) {
var result = null;
$.ajax({
url: url,
type: 'get',
contentType: "application/json; charset=utf-8",
dataType: 'json',
async: false,
success: function (data) {
result = data;
}
});
return result;
}
});
2. 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.js")
@Scripts.Render("~/Scripts/Chart.min.js")
@Scripts.Render("~/Scripts/Common.js")
</head>
3. Chart.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication5.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; }
}
}
4. Home controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication5.Models;
namespace WebApplication5.Controllers
{
public class HomeController : Controller
{
CompanyEntities db = new CompanyEntities();
public JsonResult BarChartDataEF()
{
var data = db.SelectChartTest().ToList();
Chart _chart = new Chart();
_chart.labels = data.Select(x => x.Month).ToArray();
_chart.datasets = new List<Datasets>();
List<Datasets> _dataSet = new List<Datasets>();
_dataSet.Add(new Datasets() {
label = "Current Year",
data = data.Select(x => x.Amount.Value).ToArray(),
backgroundColor = new string[] { "#FFFFFF", "#000000", "#FF00000" },
borderColor = new string [] { "#FFFFFF", "#000000", "#FF00000" },
borderWidth = "1"
});
_chart.datasets = _dataSet;
return Json(_chart, JsonRequestBehavior.AllowGet);
}
6. Index.chtml
ViewBag.Title = "Home Page";
}
<canvas id="barChart" width="400" height="100"></canvas>
<script>
var c = document.getElementById("barChart");
var ctx = c.getContext("2d");
var tData = $.getValues("/Home/BarChartDataEF");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: tData
});
</script>
No comments:
Post a Comment