Here is an example for adding Interactive Bubble Charts into your ASP.NET MVC Application using CanvasJS. Bubble Chart allows you to visualize data in 3 dimensions. It is very much similar to Scatter Charts except that size of bubble represents another parameter. Out of the three parameters required (x, y, z) to be present in a data point, x & y determine the bubble’s position on X & Y Axis & z determines its size.
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: "bubble",
dataPoints: [
{ x:10, y: 6, z: 100 },
{ x:20, y: 14, z: 10 },
{ x:30, y: 8, z: 90 }
]
}]
.
.
}
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>Bubble Chart</title>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
animationEnabled: true,
title: {
text: "Fertility Rate Vs Life Expectancy in different countries - 2009"
},
subtitles: [
{
text: "Try Zooming and Panning"
}
],
axisX: {
title: "Life Expectancy",
maximum: 85
},
axisY: {
title: "Fertility Rate"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "left"
},
data: [{
type: "bubble",
legendText: "Size of Bubble Represents Population",
showInLegend: true,
legendMarkerType: "circle",
legendMarkerColor: "grey",
toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong>Life Exp</strong> {x} yrs<br/> <strong>Fertility Rate</strong> {y}<br/> <strong>Population</strong> {z}mn",
dataPoints: [
{ x: 78.1, y: 2.00, z: 306.77, name: "US" },
{ x: 68.5, y: 2.15, z: 237.414, name: "Indonesia" },
{ x: 72.5, y: 1.86, z: 193.24, name: "Brazil" },
{ x: 76.5, y: 2.36, z: 112.24, name: "Mexico" },
{ x: 50.9, y: 5.56, z: 154.48, name: "Nigeria" },
{ x: 68.6, y: 1.54, z: 141.91, name: "Russia" },
{ x: 82.9, y: 1.37, z: 127.55, name: "Japan" },
{ x: 79.8, y: 1.36, z: 81.90, name: "Australia" },
{ x: 72.7, y: 2.78, z: 79.71, name: "Egypt" },
{ x: 80.1, y: 1.94, z: 61.81, name: "UK" },
{ x: 55.8, y: 4.76, z: 39.24, name: "Kenya" },
{ x: 81.5, y: 1.93, z: 21.95, name: "Australia" },
{ x: 68.1, y: 4.77, z: 31.09, name: "Iraq" },
{ x: 47.9, y: 6.42, z: 33.42, name: "Afganistan" },
{ x: 50.3, y: 5.58, z: 18.55, name: "Angola" }
]
}
]
});
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 Bubble()
{
return View();
}
}
}