1. Open visual studio and create MVC project
2. Create a SQL Server Database table named "VehicleSummary".
3. Enter some data in the table.
4. Add Controller named HighchartsController.cs.
5. Write code in controller to get VehiclaSummary.
public static DataSet GetVehicleSummary()
{
SqlConnection con = new SqlConnection(str);
string query = "Select * from VehicleSummary";
SqlCommand cmd = new SqlCommand(query,con);
cmd.CommandType = CommandType.Text;
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
return ds;
}
6. Now we will create a model to hold this data and it to the controller:
public class Summary
{
public int Item { get; set; }
public string Value { get; set; }
}
7. Now return JSON to get table values.
[HttpGet]
public JsonResult VehicleSummary()
{
List<Summary> lstSummary = new List<Summary>();
foreach (DataRow dr in GetVehicleSummary().Tables[0].Rows)
{
Summary summary = new Summary();
summary.Value = dr[1].ToString().Trim();
summary.Item = Convert.ToInt32(dr[2]);
lstSummary.Add(summary);
}
return Json(lstSummary.ToList(), JsonRequestBehavior.AllowGet);
}
8. Now add view.
9. Add .js files
10. Add Code to view
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$.ajax({
url: '/HighCharts/VehicleSummary',
dataType: "json",
type: "GET",
contentType: 'application/json; charset=utf-8',
async: false,
processData: false,
cache: false,
delay: 15,
success: function (data) {
// alert(data);
var series = new Array();
for (var i in data) {
var serie = new Array(data[i].Value, data[i].Item);
series.push(serie);
}
DrawPieChart(series);
},
error: function (xhr) {
alert('error');
}
});
});
function DrawPieChart(series) {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1, //null,
plotShadow: false
},
title: {
text: ' Vehicle Summary'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Task Status',
data: series
}]
});
}
</script>
<div id="container" style="min-width: 350px; height: 350px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>
12. Now run the project.
