Here is an example for adding Interactive Stacked Area 100% Charts into your ASP.NET MVC Application using CanvasJS. Stacked Area 100% is similar to “Stacked Area” except that areas are rendered as a percentage of total value at any given point.
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: "stackedArea100",
dataPoints: [
{ y: 6, label: "Apple" },
{ y: 4, label: "Mango" },
{ y: 5, label: "Orange" },
]
},
{
type: "stackedArea100",
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 100% Chart</title>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Global Mobile OS Market Share in Sales to End Users"
},
axisX: {
title: "Year",
valueFormatString: "####"
},
axisY: {
title: "Share of Global Sales to the end user",
titleFontSize: 16
},
toolTip: {
shared: true,
content: "<span style='\"'color: {color};'\"'>{name}</span> : {y}%"
},
data: [
{
type: "stackedArea100",
xValueFormatString: "####",
showInLegend: true,
name: "Android",
dataPoints: [
{ x: 2009, y: 1.6 },
{ x: 2010, y: 9.6 },
{ x: 2011, y: 36.4 },
{ x: 2012, y: 56.9 },
{ x: 2013, y: 74.4 },
{ x: 2014, y: 80.8 },
{ x: 2015, y: 78.8 },
{ x: 2016, y: 84.1 }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedArea100",
xValueFormatString: "####",
showInLegend: true,
name: "iOS",
dataPoints: [
{ x: 2009, y: 10.5 },
{ x: 2010, y: 15.4 },
{ x: 2011, y: 16.9 },
{ x: 2012, y: 22.5 },
{ x: 2013, y: 18.2 },
{ x: 2014, y: 15.3 },
{ x: 2015, y: 17.9 },
{ x: 2016, y: 14.8 }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedArea100",
xValueFormatString: "####",
showInLegend: true,
name: "Microsoft",
dataPoints: [
{ x: 2009, y: 10.2 },
{ x: 2010, y: 6.8 },
{ x: 2011, y: 2.6 },
{ x: 2012, y: 1.9 },
{ x: 2013, y: 2.9 },
{ x: 2014, y: 2.6 },
{ x: 2015, y: 2.4 },
{ x: 2016, y: 0.6 }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedArea100",
xValueFormatString: "####",
showInLegend: true,
name: "RIM BlackBerry",
dataPoints: [
{ x: 2009, y: 20.6 },
{ x: 2010, y: 19.7 },
{ x: 2011, y: 13 },
{ x: 2012, y: 6.8 },
{ x: 2013, y: 3 },
{ x: 2014, y: 0.6 },
{ x: 2015, y: 0.4 },
{ x: 2016, y: 0.2 }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedArea100",
xValueFormatString: "####",
showInLegend: true,
name: "Symbian",
dataPoints: [
{ x: 2009, y: 48.8 },
{ x: 2010, y: 44.2 },
{ x: 2011, y: 27.7 },
{ x: 2012, y: 8.5 },
{ x: 2013, y: 0.6 },
{ x: 2014, y: 0.6 },
{ x: 2015, y: 0.4 },
{ x: 2016, y: 0.2 }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedArea100",
xValueFormatString: "####",
showInLegend: true,
name: "Others",
dataPoints: [
{ x: 2009, y: 8.3 },
{ x: 2010, y: 4.3 },
{ x: 2011, y: 3.4 },
{ x: 2012, y: 3.4 },
{ x: 2013, y: 0.9 },
{ x: 2014, y: 0.1 },
{ x: 2015, y: 0.1 },
{ x: 2016, y: 0.1 }
],
//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 StackedArea100()
{
return View();
}
}
}