ASP.NET MVC Candlestick Charts & Graphs

Download ASP.NET Chart Samples

Candlestick Chart forms a column with vertical lines representing open, high, low and close values of a data point. Given example shows ASP.NET MVC Candlestick Chart along with source code that you can try running locally.

@{
	Layout = null;
}

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

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	exportEnabled: true,
	title: {
		text: "Amazon Stock Price in 2016"
	},
	subtitles: [{
		text: "Monthly Averages"
	}],
	axisX: {
		interval: 1,
		intervalType: "month",
		valueFormatString: "MMM"
	},
	axisY: {
		prefix: "$",
		title: "Price"
	},
	data: [{
		type: "candlestick",
		yValueFormatString: "$#,##0.00",
		dataPoints: dataPoints
	}]
});

$.get("/home/csv", getDataPointsFromCSV);

function getDataPointsFromCSV(csv) {
	var csvLines = points = [];
	csvLines = csv.split(/[\r?\n|\r|\n]+/);
	for (var i = 0; i < csvLines.length; i++) {
		if (csvLines[i].length > 0) {
			points = csvLines[i].split(",");
			dataPoints.push({
				x: new Date(
					parseInt(points[0].split("-")[0]),
					parseInt(points[0].split("-")[1]) - 1,
					parseInt(points[0].split("-")[2])
				),
				y: [
					parseFloat(points[1]),
					parseFloat(points[2]),
					parseFloat(points[3]),
					parseFloat(points[4])
				]
			});
		}
	}
	chart.render();
}

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

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

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

			dataPoints.Add(new DataPoint(new DateTime(2016, 01, 01), new double[] { 656.289978, 657.719971, 547.179993, 587.000000 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 02, 01), new double[] { 578.150024, 581.799988, 474.000000, 552.520020 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 03, 01), new double[] { 556.289978, 603.239990, 538.580017, 593.640015 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 04, 01), new double[] { 590.489990, 669.979980, 585.250000, 659.590027 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 05, 01), new double[] { 663.919983, 724.229980, 656.000000, 722.789978 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 06, 01), new double[] { 720.900024, 731.500000, 682.119995, 715.619995 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 07, 01), new double[] { 717.320007, 766.000000, 716.539978, 758.809998 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 08, 01), new double[] { 759.869995, 774.979980, 750.349976, 769.159973 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 09, 01), new double[] { 770.900024, 839.950012, 756.000000, 837.309998 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 10, 01), new double[] { 836.000000, 847.210022, 774.609985, 789.820007 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 11, 01), new double[] { 799.000000, 800.840027, 710.099976, 750.570007 }));
			dataPoints.Add(new DataPoint(new DateTime(2016, 12, 01), new double[] { 752.409973, 782.460022, 736.700012, 768.659973 }));

			string csv = "";

			foreach (DataPoint DataPoint in dataPoints)
			{
				csv += DataPoint.X.ToString("yyyy-MM-dd");
				foreach (double Y in DataPoint.Y)
					csv += "," + Y.ToString();
				csv += "\n";
			}

			return Content(csv);
		}
	}
}                        
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(DateTime x, double[] y)
		{
			this.X = x;
			this.Y = y;
		}

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

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

Chart Customizations

risingColor & fallingColor properties can be used to demarcate rise and fall in prices. Also crosshair can be enabled for detailed analysis of the chart. Other commonly used customization options are showInLegend, exportEnabled, animationEnabled, etc.

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