ASP.NET MVC Chart from CSV Data

Download ASP.NET Code Samples

CSV data can be used as a data source for Charts. The given example shows how to parse data coming from CSV and render chart. It also includes 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"
	title: {
		text: "Alibaba Group Stock Volume, 2015 - 2016"
	},
	subtitles: [{
		text: "Monthly Average"
	}],
	axisX: {
		interval: 3,
		intervalType: "month",
		valueFormatString: "MMM YY"
	},
	axisY: {
		//includeZero: false,
		title: "Volume",
		labelFormatter: addSymbols
	},
	data: [{
		xValueFormatString: "MMM YY",
		dataPoints: dataPoints
	}]
});

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

//CSV Format
//YYYY-MM-DD,Volume
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], 10),
					parseInt(points[0].split("-")[1], 10) - 1, //month starts from 0
					parseInt(points[0].split("-")[2], 10)
				),
				y: parseInt(points[1])
			});
		}
	}
	chart.render();
}

function addSymbols(e) {
	var suffixes = ["", "K", "M", "B"];

	var order = Math.max(Math.floor(Math.log(e.value) / Math.log(1000)), 0);
	if (order > suffixes.length - 1)
		order = suffixes.length - 1;

	var suffix = suffixes[order];
	return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
}

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.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(2015, 01, 01), 379540700));
			dataPoints.Add(new DataPoint(new DateTime(2015, 02, 01), 253789800));
			dataPoints.Add(new DataPoint(new DateTime(2015, 03, 01), 388395300));
			dataPoints.Add(new DataPoint(new DateTime(2015, 04, 01), 336969900));
			dataPoints.Add(new DataPoint(new DateTime(2015, 05, 01), 457084600));
			dataPoints.Add(new DataPoint(new DateTime(2015, 06, 01), 248089200));
			dataPoints.Add(new DataPoint(new DateTime(2015, 07, 01), 255413600));
			dataPoints.Add(new DataPoint(new DateTime(2015, 08, 01), 424761000));
			dataPoints.Add(new DataPoint(new DateTime(2015, 09, 01), 454809300));
			dataPoints.Add(new DataPoint(new DateTime(2015, 10, 01), 387429400));
			dataPoints.Add(new DataPoint(new DateTime(2015, 11, 01), 465985100));
			dataPoints.Add(new DataPoint(new DateTime(2015, 12, 01), 313730300));
			dataPoints.Add(new DataPoint(new DateTime(2016, 01, 01), 350835400));
			dataPoints.Add(new DataPoint(new DateTime(2016, 02, 01), 314258500));
			dataPoints.Add(new DataPoint(new DateTime(2016, 03, 01), 231297200));
			dataPoints.Add(new DataPoint(new DateTime(2016, 04, 01), 215798500));
			dataPoints.Add(new DataPoint(new DateTime(2016, 05, 01), 376682300));
			dataPoints.Add(new DataPoint(new DateTime(2016, 06, 01), 373822200));
			dataPoints.Add(new DataPoint(new DateTime(2016, 07, 01), 205076000));
			dataPoints.Add(new DataPoint(new DateTime(2016, 08, 01), 450441900));
			dataPoints.Add(new DataPoint(new DateTime(2016, 09, 01), 420526800));
			dataPoints.Add(new DataPoint(new DateTime(2016, 10, 01), 240008000));
			dataPoints.Add(new DataPoint(new DateTime(2016, 11, 01), 329213700));
			dataPoints.Add(new DataPoint(new DateTime(2016, 12, 01), 218013800));

			string csv = "";

			foreach (DataPoint DataPoint in dataPoints)
			{
				csv += DataPoint.X.ToString("yyyy-MM-dd") + "," + DataPoint.Y.ToString() + "\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 Nullable<double> Y = null;
	}
}

Related Customization

You can customize the color of each data-point using color property. The width of the data-points can be modified using dataPointWidth property. Some other commonly used customization options include fillOpacity, indexLabel, animationEnabled, theme, etc.

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