Step 1: First Create An Web Api Application with MVC sing Visual Studion 2013/15.
Step 2: Add the Highcharts reference to the Project.
Step 3:Create columnpricture.s in Model Folder
Step 4: Create the DbContext In Model Folder.
Step 5: Create a MVC Controller using EF and the select Model and DbContext... if you will not the the Model or Context in the dropdown then first build the solution then do again.
Step 6. Run the application and go to http://localhost:XXXX/Test
where XXXX is your localhost and Test is the controller name in my case.and Create some details like .
Step 7: Now to to Home Controller and Add this Action
public class HomeController : Controller
{
columnprictureEntities db = new columnprictureEntities();
public ActionResult Index()
{
ViewBag.Title = "Home Page";
return View();
}
public ActionResult Getdata()
{
var d = db.columnprictures.ToList();
List<columnpricture> bb = db.columnprictures.ToList();
return Json(d, JsonRequestBehavior.AllowGet);
//var d = (from b in db.columnprictures select b).ToList();
//List<columnpricture> bb = (from dd in db.columnprictures select dd).ToList();
//return Json(d, JsonRequestBehavior.AllowGet);
}
}
Step 8: Last step you have to Go to Index and add the View.
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
<script src="~/Scripts/Highcharts-4.0.1/js/modules/exporting.js"></script>
<script src="~/Scripts/Highcharts-4.0.1/js/highcharts-3d.js"></script>
<script type="text/javascript">
$(function () {
var values = "";
var data1 = [];
months = [];
var count = [];
//var a = [29.9, 71.5, 106.4, 129.2, 144]
$.ajax({
url: '../Home/Getdata',
type: 'post',
dataType: "json",
success: function (msg) {
var values = JSON.stringify(msg)
//alert(msg.length)
for (var i = 0; i < msg.length; i++) {
//alert("123")
values += "11" + msg[i].tem + "11"
debugger;
//var a = values.push(bb[i].tem);
data1.push(msg[i].id)
months.push(msg[i].months)
count.push(msg[i].count)
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container', type: 'column', margin: 75,
options3d: { enabled: true, alpha: 15, beta: 15, depth: 50, viewDistance: 25 }
}, title: { text: 'Chart rotation demo' }, xAxis: { categories: months },
yAxis: { min: 0, title: { text: 'count' } },
subtitle: { text: 'Test options by dragging the sliders below' }, plotOptions: {
column: {
depth: 25
}
}, series: [{ data: count }]
});
$('#R0').on('change', function () {
chart.options.chart.options3d.alpha = this.value;
showValues(); chart.redraw(false);
}); $('#R1').on('change', function () {
chart.options.chart.options3d.beta = this.value; showValues(); chart.redraw(false);
}); function showValues() {
$('#R0-value').html(chart.options.chart.options3d.alpha);
$('#R1-value').html(chart.options.chart.options3d.beta);
} showValues();
}
})
}); </script>
<title>Index</title>
</head>
<body>
<div id="container" style="min-width: 700px; height: 400px"></div>
<div id="sliders" style="min-width: 310px; max-width: 800px; margin: 0 auto;">
<table>
<tr>
<td>Alpha Angle</td>
<td>
<input id="R0" type="range" min="0" max="45" value="15" />
<span id="R0-value" class="value"></span>
</td>
</tr>
<tr>
<td>Beta Angle</td>
<td>
<input id="R1" type="range" min="0" max="45" value="15" />
<span id="R1-value" class="value"></span>
</td>
</tr>
</table>
</div>
</body>
</html>
Output:)
