Here is an example for adding Interactive Area Charts into your ASP.NET MVC Application using CanvasJS. Area Charts are useful when you are interested in cumulative totals over a period of time or range of values. When there are multiple series, each series is assigned a color automatically – but it can also be customized.
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: "area",
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>Area</title>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
animationEnabled: true,
title: {
text: "Monthly Downloads",
fontSize: 25
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
axisY: {
title: "Downloads"
},
data: [
{
type: "area",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 2600 },
{ x: new Date(2012, 01, 1), y: 3800 },
{ x: new Date(2012, 02, 1), y: 4300 },
{ x: new Date(2012, 03, 1), y: 2900 },
{ x: new Date(2012, 04, 1), y: 4100 },
{ x: new Date(2012, 05, 1), y: 4500 },
{ x: new Date(2012, 06, 1), y: 8600 },
{ x: new Date(2012, 07, 1), y: 6400 },
{ x: new Date(2012, 08, 1), y: 5300 },
{ x: new Date(2012, 09, 1), y: 6000 }
]
}
]
});
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 Area()
{
return View();
}
}
}
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix