ASP.NET MVC Candlestick Charts from JSON Data using AJAX

Download ASP.NET Chart Samples

CanvasJS Charts can also be plotted using JSON data API. It is usually good idea to read JSON data from AJAX request for Candlestick Graphs as they are usually rendered with large number of data points. Given example shows Candlestick Chart rendered from JSON data. It also includes source code that can try running locally.

@{
	Layout = null;
}

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var dps = [];

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title: {
		text: "BMW Stock Price - October 2017"
	},
	axisX: {
		valueFormatString: "DD MMM"
	},
	axisY: {
		title: "Price",
		prefix: "€"
	},
	data: [{
		type: "candlestick",
		name: "BMW Stock Price",
		showInLegend: true,
		xValueFormatString: "DD MMM",
		yValueFormatString: "€##0.00",
		xValueType: "dateTime",
		dataPoints: dps
	}]
});

function addData(data) {
	for (var i = 0; i < data.length; i++) {
		dps.push({
			x: new Date(data[i].x),
			y: data[i].y
		});
	}
	chart.render();

}

$.getJSON("/home/json", addData);

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
</body>
</html>                              
using ASPNET_MVC_ChartsDemo.Models;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;

namespace ASPNET_MVC_ChartsDemo.Controllers
{
	public class HomeController : Controller
	{
		// GET: Home
		public ActionResult Index()
		{
			return View();
		}

		public ContentResult JSON()
		{
			List<DataPoint> dataPoints = new List<DataPoint>();


			dataPoints.Add(new DataPoint(1506882600000, new double[] { 85.990997, 86.374001, 85.945999, 86.374001 }));
			dataPoints.Add(new DataPoint(1506969000000, new double[] { 86.374001, 86.374001, 86.374001, 86.374001 }));
			dataPoints.Add(new DataPoint(1507055400000, new double[] { 86.5, 88.679001, 86.199997, 87.764999 }));
			dataPoints.Add(new DataPoint(1507141800000, new double[] { 88.098999, 89.172997, 88.098999, 88.800003 }));
			dataPoints.Add(new DataPoint(1507228200000, new double[] { 88.532997, 89.334999, 88.532997, 89.271004 }));
			dataPoints.Add(new DataPoint(1507487400000, new double[] { 88.801003, 89.126999, 88.622002, 88.978996 }));
			dataPoints.Add(new DataPoint(1507573800000, new double[] { 88.693001, 88.900002, 88.199997, 88.639999 }));
			dataPoints.Add(new DataPoint(1507660200000, new double[] { 88.419998, 88.605003, 87.958, 88.605003 }));
			dataPoints.Add(new DataPoint(1507746600000, new double[] { 88.213997, 88.566002, 87.484001, 87.938004 }));
			dataPoints.Add(new DataPoint(1507833000000, new double[] { 87.800003, 87.800003, 86.848, 87.487 }));
			dataPoints.Add(new DataPoint(1508092200000, new double[] { 87.100998, 87.649002, 86.975998, 87.295998 }));
			dataPoints.Add(new DataPoint(1508178600000, new double[] { 86.906998, 87.656998, 86.370003, 87.656998 }));
			dataPoints.Add(new DataPoint(1508265000000, new double[] { 88.214996, 88.545998, 87.992996, 88.418999 }));
			dataPoints.Add(new DataPoint(1508351400000, new double[] { 87.699997, 87.699997, 86.099998, 87.093002 }));
			dataPoints.Add(new DataPoint(1508437800000, new double[] { 86.800003, 87.533997, 86.385002, 86.385002 }));
			dataPoints.Add(new DataPoint(1508697000000, new double[] { 86.221001, 86.613998, 85.751999, 85.999001 }));
			dataPoints.Add(new DataPoint(1508783400000, new double[] { 85.801003, 86.605003, 85.242996, 86.549004 }));
			dataPoints.Add(new DataPoint(1508869800000, new double[] { 86.248001, 86.248001, 85, 85.248001 }));
			dataPoints.Add(new DataPoint(1508956200000, new double[] { 85.401001, 86.554001, 85.188004, 86.066002 }));
			dataPoints.Add(new DataPoint(1509042600000, new double[] { 86.500999, 87.747002, 86.500999, 87.002998 }));
			dataPoints.Add(new DataPoint(1509301800000, new double[] { 87.225998, 87.776001, 87.225998, 87.282997 }));
			dataPoints.Add(new DataPoint(1509388200000, new double[] { 87.282997, 87.282997, 87.282997, 87.282997 }));


			JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
			return Content(JsonConvert.SerializeObject(dataPoints, _jsonSetting), "application/json");
		}
	}
}                        
using System;
using System.Runtime.Serialization;

namespace ASPNET_MVC_ChartsDemo.Models
{
	//DataContract for Serializing Data - required to serve in JSON format
	[DataContract]
	public class DataPoint
	{
		public DataPoint(double x, double[] y)
		{
			this.X = x;
			this.Y = y;
		}

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "x")]
		public Nullable<double> X = null;

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "y")]
		public double[] Y = null;
	}
}

Chart Customizations

Export feature of the chart can be enabled by setting the exportEnabled property to true. You can also export the chart programatically by using the exportChart() method. Some other frequently used customization options are animationEnabled, type, etc.

Note   For step by step instructions, follow our ASP.NET MVC Integration Tutorial