Here is an example for adding Interactive Scatter Charts into your ASP.NET MVC Application using CanvasJS. Scatter chart is used to plot co-relations between two variables for a set of dataPoints, each dataPoint has x variable determining the position on the horizontal axis and y variable determining the position of the vertical axis.
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: "scatter",
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>Scatter Chart</title>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
zoomType: "xy",
title: {
text: "Real Estate Rates",
},
subtitles: [
{
text: "Try Zooming and Panning"
}
],
animationEnabled: true,
axisX: {
title: "Square Feets",
},
axisY: {
title: "Prices in USD",
valueFormatString: "$#,##0k",
lineThickness: 2,
includeZero: false
},
data: [{
type: "scatter",
toolTipContent: "<span style='\"'color: {color};'\"'><strong>Area: </strong></span>{x} sq.ft<br/><span style='\"'color: {color};'\"'><strong>Price: </strong></span>{y} $ ",
dataPoints: [
{ x: 800, y: 350 },
{ x: 900, y: 450 },
{ x: 850, y: 450 },
{ x: 1250, y: 700 },
{ x: 1100, y: 650 },
{ x: 1350, y: 850 },
{ x: 1200, y: 900 },
{ x: 1410, y: 1250 },
{ x: 1250, y: 1100 },
{ x: 1400, y: 1150 },
{ x: 1500, y: 1050 },
{ x: 1330, y: 1120 },
{ x: 1580, y: 1220 },
{ x: 1620, y: 1400 },
{ x: 1250, y: 1450 },
{ x: 1350, y: 1600 },
{ x: 1650, y: 1300 },
{ x: 1700, y: 1620 },
{ x: 1750, y: 1700 },
{ x: 1830, y: 1800 },
{ x: 1900, y: 2000 },
{ x: 2050, y: 2200 },
{ x: 2150, y: 1960 },
{ x: 2250, y: 1990 }
],
//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 Scatter()
{
return View();
}
}
}