ASP.NET MVC Range Bar Charts & Graphs

Download ASP.NET Chart Samples

Range Bar Charts are similar to Range Column Chart that are drawn between a range of values - Low & High except that the bars are horizontally placed. Given example shows simple ASP.NET MVC Range Bar Chart along with source code that you can try running locally.

@{
	Layout = null;
}

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

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	animationEnabled: true,
	title: {
		text: "Hearing Range of Animals"
	},
	axisX: {
		interval: 1
	},
	axisY: {
		suffix: " Hz",
		logarithmic: true
	},
	data: [{
		type: "rangeBar",
		indexLabel: "{y[#index]} Hz",
		toolTipContent: "<b>{label}</b><br>{y[0]} Hz to {y[1]} Hz",
		dataPoints: @Html.Raw(ViewBag.DataPoints)
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script 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("Chicken", new double[] { 125, 2000 }));
			dataPoints.Add(new DataPoint("Goldfish", new double[] { 20, 3000 }));
			dataPoints.Add(new DataPoint("Catfish", new double[] { 50, 4000 }));
			dataPoints.Add(new DataPoint("Parakeet", new double[] { 200, 8500 }));
			dataPoints.Add(new DataPoint("Elephant", new double[] { 17, 10500 }));
			dataPoints.Add(new DataPoint("Owl", new double[] { 200, 1200 }));
			dataPoints.Add(new DataPoint("Horse", new double[] { 55, 33500 }));
			dataPoints.Add(new DataPoint("Raccoon ", new double[] { 100, 40000 }));
			dataPoints.Add(new DataPoint("Sheep ", new double[] { 125, 42500 }));
			dataPoints.Add(new DataPoint("Cat", new double[] { 55, 77000 }));
			dataPoints.Add(new DataPoint("Dog ", new double[] { 64, 44000 }));
			dataPoints.Add(new DataPoint("Dolphin", new double[] { 150, 150000 }));

			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(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 double[] Y = null;
	}
}

Chart Customizations

Index labels can be shown for the data-points using the indexLabel property. The orientation of the indexLabels can be customized using indexLabelOrientation property. Some other commonly used customization options include indexLabelFontSize, indexLableBackgroundColor, etc.

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