Here is an example for adding Interactive Bar Charts into your ASP.NET MVC Application using CanvasJS. Like in Column Charts, Bar Charts can also have one or more Data Series. In case of more than one series, Data Points from different Series are placed next to one another and are differentiated by their color.
Please refer to this tutorial for step by step instruction of adding charts to your ASP.Net MVC Application. We recommend that you download the Sample Visual Studio Project and try it on your own to understand the API better.
var chart = new CanvasJS.Chart("chartContainer", {
.
.
data: [{
type: "bar",
dataPoints: [
{ y: 6, label: "Apple" },
{ y: 4, label: "Mango" },
{ y: 5, label: "Orange" },
]
}]
.
.
}
You can further customize these charts to enable features like Zooming, Panning, Exporting, etc. To know more about the available features, please refer to our getting started section.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<title>Bar Chart</title>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Olympic Medals of all Times (till 2016 Olympics)"
},
subtitles: [
{
text: "Click on Legends to Enable/Disable Data Series"
}
],
animationEnabled: true,
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
},
axisY: {
title: "Medals"
},
toolTip: {
shared: true,
content: function (e) {
var str = '';
var total = 0;
var str3;
var str2;
for (var i = 0; i < e.entries.length; i++) {
var str1 = "<span style= 'color:" + e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>" + e.entries[i].dataPoint.y + "</strong> <br/>";
total = e.entries[i].dataPoint.y + total;
str = str.concat(str1);
}
str2 = "<span style = 'color:DodgerBlue; '><strong>" + e.entries[0].dataPoint.label + "</strong></span><br/>";
str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>";
return (str2.concat(str)).concat(str3);
}
},
data: [
{
type: "bar",
showInLegend: true,
name: "Gold",
color: "gold",
dataPoints: [
{ y: 243, label: "France" },
{ y: 273, label: "Great Britain" },
{ y: 525, label: "Soviet Union" },
{ y: 1118, label: "USA" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "bar",
showInLegend: true,
name: "Silver",
color: "silver",
dataPoints: [
{ y: 272, label: "France" },
{ y: 299, label: "Great Britain" },
{ y: 419, label: "Soviet Union" },
{ y: 896, label: "USA" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "bar",
showInLegend: true,
name: "Bronze",
color: "#A57164",
dataPoints: [
{ y: 307, label: "France" },
{ y: 301, label: "Great Britain" },
{ y: 392, label: "Soviet Union" },
{ y: 788, label: "USA" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
}
]
};
chart.render();
};
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ASPNET_MVC_Samples.Controllers
{
public class HomeController : Controller
{
public ActionResult Bar()
{
return View();
}
}
}