My Model:-Name(Emp_tb)
namespace final1.Models
{
using System;
using System.Collections.Generic;
public partial class Emp_tb
{
public int Id { get; set; }
public string Name { get; set; }
public Nullable<int> Age { get; set; }
}
}
My Controller:- Name(ChartController)
namespace final1.Controllers
{
public class ChartController : Controller
{
DemoEntities db = new DemoEntities();
// GET: Chart
public ActionResult Index()
{
return View();
}
public JsonResult Chart()
{
var data = db.Emp_tb.ToList();
return Json(data, JsonRequestBehavior.AllowGet);
}
}
}
My View(index.cshtml)
For reference see the below link :
https://developers.google.com/chart/interactive/docs/gallery/barchart
@{
ViewBag.Title = "Chart";
}
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
alert("chart");
debugger;
//controller name
$.post('/Chart/Chart/', {}, function (data) {
var dt = new google.visualization.DataTable();
dt.addColumn('string', 'Name');
dt.addColumn('number', 'Age');
for (var i = 0; i < data.length; i++) {
dt.addRow([data[i].Name, data[i].Age]);
}
//var options = {
// title: 'Indian Language Use',
// legend: 'none',
// pieSliceText: 'label',
// slices: {
// 4: { offset: 0.2 },
// 12: { offset: 0.3 },
// 14: { offset: 0.4 },
// 15: { offset: 0.5 },
// }
//};
//Normal
var options = {
title: "Name and Age",
//3D & 2D
is3D : false
//donut chart // pieHole: 0.4
};
// Rotating pie chart
//var options = {
// legend: 'none',
// pieSliceText: 'label',
// title: 'Swiss Language Use (100 degree rotation)',
// pieStartAngle: 45,
//};
// donit chart
//var options = {
// pieHole: 0.5,
// pieSliceTextStyle: {
// color: 'black',
// },
// legend: 'none'
//};
//Bar graph
//var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
//chart.draw(dt, options);
//pie chart 3-D
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(dt, options);
});
}
</script>
<fieldset>
<legend>Chart from google Chart</legend>
<div id="chart" style="height: 500px"></div>
</fieldset>
EmoticonEmoticon