Here is an example for adding Interactive Stacked Area Charts into your ASP.NET MVC Application using CanvasJS. Like in case of Stacked Column, Stacked Area is formed by stacking multiple data-series one on top of the other. This is useful when you want to compare contribution of two or more area series to the total.
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: "stackedArea",
dataPoints: [
{ y: 6, label: "Apple" },
{ y: 4, label: "Mango" },
{ y: 5, label: "Orange" },
]
},
{
type: "stackedArea",
dataPoints: [
{ y: 2, label: "Apple" },
{ y: 6, label: "Mango" },
{ y: 4, 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>Stacked Area Chart</title>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Productivity by Day"
},
subtitles: [
{
text: "Click on Legends to Enable/Disable Data Series"
}
],
animationEnabled: true,
axisX: {
valueFormatString: "DDD",
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
toolTip: {
content: function (e) {
var weekday = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var str1 = weekday[e.entries[0].dataPoint.x.getDay()] + "<br/> <span style =' color:" + e.entries[0].dataSeries.color + "';>" + e.entries[0].dataSeries.name + "</span>: <strong>" + e.entries[0].dataPoint.y + " hrs</strong> <br/>";
return str1
}
},
data: [{
type: "stackedArea",
name: "Very Distracting",
showInLegend: true,
legendMarkerType: "square",
color: "rgba(211,19,14,.8)",
markerSize: 0,
dataPoints: [
{ x: new Date(2013, 02, 17), y: 2.4 },
{ x: new Date(2013, 02, 18), y: .6 },
{ x: new Date(2013, 02, 19), y: .8 },
{ x: new Date(2013, 02, 20), y: 1.6 },
{ x: new Date(2013, 02, 21), y: 1.4 },
{ x: new Date(2013, 02, 22), y: 1.4 },
{ x: new Date(2013, 02, 23), y: 2.6 }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedArea",
name: "Distracting",
showInLegend: true,
legendMarkerType: "square",
markerSize: 0,
color: "rgba(95,53,87,.8)",
dataPoints: [
{ x: new Date(2013, 02, 17), y: 3.3 },
{ x: new Date(2013, 02, 18), y: 1.6 },
{ x: new Date(2013, 02, 19), y: 2.1 },
{ x: new Date(2013, 02, 20), y: 1.6 },
{ x: new Date(2013, 02, 21), y: 1.4 },
{ x: new Date(2013, 02, 22), y: 1.7 },
{ x: new Date(2013, 02, 23), y: 4.6 }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedArea",
name: "Productive",
showInLegend: true,
legendMarkerType: "square",
markerSize: 0,
color: "rgba(60,84,151,.9)",
dataPoints: [
{ x: new Date(2013, 02, 17), y: 2.4 },
{ x: new Date(2013, 02, 18), y: 2 },
{ x: new Date(2013, 02, 19), y: 2.8 },
{ x: new Date(2013, 02, 20), y: 1.6 },
{ x: new Date(2013, 02, 21), y: 1.4 },
{ x: new Date(2013, 02, 22), y: 1.4 },
{ x: new Date(2013, 02, 23), y: 1.6 }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedArea",
name: "Very Productive",
showInLegend: true,
legendMarkerType: "square",
markerSize: 0,
color: "rgba(22,115,211,.9)",
dataPoints: [
{ x: new Date(2013, 02, 17), y: .4 },
{ x: new Date(2013, 02, 18), y: 7 },
{ x: new Date(2013, 02, 19), y: 6.8 },
{ x: new Date(2013, 02, 20), y: 4.6 },
{ x: new Date(2013, 02, 21), y: 6.4 },
{ x: new Date(2013, 02, 22), y: 7.4 },
{ x: new Date(2013, 02, 23), y: 1.6 }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
}
]
,
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();
}
}
});
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 StackedArea()
{
return View();
}
}
}