ASP.NET MVC OHLC Charts & Graphs

Download ASP.NET Chart Samples

OHLC / Stock Charts are similar to Candle Stick Charts that are used to illustrate movements in the price of a financial instrument over time. Given example shows Boeing Stock Price in an ASP.NET MVC OHLC Chart. It also includes source code that you can try running locally.

@{
	Layout = null;
}

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	exportFileName: "Boeing-StockChart",
	title: {
		text: "Boeing Stock Price - 2016"
	},
	axisX: {
		interval: 1,
		intervalType: "month",
		valueFormatString: "MMM"
	},
	axisY: {
		prefix: "$",
		title: "Price (in USD)"
	},
	data: [{
		type: "ohlc",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "MMM YYYY",
		xValueType: "dateTime",
		dataPoints: @Html.Raw(ViewBag.DataPoints)
	}]
});
chart.render();

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

namespace ASPNET_MVC_ChartsDemo.Controllers
{
	public class HomeController : Controller
	{
		// GET: Home
		public ActionResult Index()
		{
			List<DataPoint> dataPoints = new List<DataPoint>();

			dataPoints.Add(new DataPoint(1451586600000, new double[] { 141.38, 141.7, 115.02, 120.13 }));
			dataPoints.Add(new DataPoint(1454265000000, new double[] { 119.64, 124.91, 102.1, 118.18 }));
			dataPoints.Add(new DataPoint(1456770600000, new double[] { 119.01, 136.78, 118.25, 126.94 }));
			dataPoints.Add(new DataPoint(1459449000000, new double[] { 126.23, 137.89, 125.11, 134.8 }));
			dataPoints.Add(new DataPoint(1462041000000, new double[] { 134.38, 135.24, 125.88, 126.15 }));
			dataPoints.Add(new DataPoint(1464719400000, new double[] { 126, 134.55, 122.35, 129.87 }));
			dataPoints.Add(new DataPoint(1467311400000, new double[] { 129.54, 139.45, 123.96, 133.66 }));
			dataPoints.Add(new DataPoint(1469989800000, new double[] { 133.21, 136.37, 129.14, 129.45 }));
			dataPoints.Add(new DataPoint(1472668200000, new double[] { 130.03, 133.08, 126.31, 131.74 }));
			dataPoints.Add(new DataPoint(1475260200000, new double[] { 131.28, 146.23, 130.74, 142 }));
			dataPoints.Add(new DataPoint(1477938600000, new double[] { 142.95, 153.08, 138.8, 150.56 }));
			dataPoints.Add(new DataPoint(1480530600000, new double[] { 150.74, 160.07, 150.02, 155.68 }));

			ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);

			return View();
		}
	}
}                        
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

OHLC charts can be converted to candlestick charts by changing the type to "candlestick". Other commonly used customization options are zoomEnabled, exportEnabled, etc.

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