ASP.NET MVC Chart from XML Data

Download ASP.NET Chart Samples

XML data can be used as the data source for Charts. The given example shows how to parse data coming from XML and render the 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", {
	theme: "dark2",
	title: {
		text: "Distance Travelled by Space Probes"
	},
	subtitles: [{
		text: "Distance in Astonomical Units (AU)"
	}],
	axisX: {
		lineThickness: 0
	},
	axisY: {
		valueFormatString: " ",
		includeZero: true,
		gridThickness: 0,
		tickLength: 0
	},
	data: [{
		type: "bar",
		yValueFormatString: "#,##0.0# AU",
		indexLabel: "{y}",
		dataPoints: dataPoints
	}]
});

$.get("/home/datapoints", function (data) {
	$(data).find("point").each(function () {
		var $dataPoint = $(this);
		var label = $dataPoint.find("label").text();
		var y = $dataPoint.find("y").text();
		dataPoints.push({ label: label, y: parseFloat(y) });

	});
	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>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
</body>
</html>                              
using ASPNET_MVC_ChartsDemo.Models;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.Web.Mvc;
using System.Xml;

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

		public ContentResult DataPoints()
		{
			List<DataPoint> _dataPoints = new List<DataPoint>();
			_dataPoints.Add(new DataPoint("New Horizons", 31.81));
			_dataPoints.Add(new DataPoint("Pioneer 10", 114));
			_dataPoints.Add(new DataPoint("Pioneer 11", 90.4));
			_dataPoints.Add(new DataPoint("Voyager 1", 130.7));
			_dataPoints.Add(new DataPoint("Voyager 2", y: 107.5));

			XmlDocument doc = new XmlDocument();
			XmlDeclaration docNode = doc.CreateXmlDeclaration("1.0", "UTF-8", null);
			doc.AppendChild(docNode);
			XmlElement data = (XmlElement)doc.AppendChild(doc.CreateElement("data"));


			foreach (DataPoint DataPoint in _dataPoints)
			{
				XmlElement dataPointNode = doc.CreateElement("point");
				XmlNode xNode = doc.CreateElement("label");
				xNode.AppendChild(doc.CreateTextNode(DataPoint.Label.ToString()));
				dataPointNode.AppendChild(xNode);
				XmlNode yNode = doc.CreateElement("y");
				yNode.AppendChild(doc.CreateTextNode(DataPoint.Y.ToString()));
				dataPointNode.AppendChild(yNode);
				data.AppendChild(dataPointNode);
			}

			var xmlString = doc.OuterXml;
			return Content(xmlString, "text/xml");

		}

		JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };

	}
}                        
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(string label, double y)
		{
			this.Label = label;
			this.Y = y;
		}

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "label")]
		public string Label;

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

Chart Customizations

fillOpacity and color properties can be used to customize the opacity and color of the bars. indexLabel property can be used to show Data / Index Labels for all the bars. Other commonly used customization options are exportEnabled, theme, etc.

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