ASP.NET MVC Bubble Charts & Graphs

Download ASP.NET Chart Samples

Bubble Charts are used to visualize data in 3 dimensions. It is very similar to Scatter Chart except that size of bubble represents another parameter. Out of the three parameters required (x, y, z), x & y determine the bubble's position on X & Y Axis whereas z determines its size. Given example shows simple ASP.NET MVC Bubble Chart along with source code that you can try running locally.

  1. @{
  2. 	Layout = null;
  3. }
  4.  
  5. <!DOCTYPE HTML>
  6. <html>
  7. <head>
  8. <script>
  9. window.onload = function () {
  10.  
  11. var chart = new CanvasJS.Chart("chartContainer", {
  12. 	animationEnabled: true,
  13. 	exportEnabled: true,
  14. 	theme: "dark2", // "light1", "light2", "dark1", "dark2"
  15. 	title: {
  16. 		text: "Surface Temperature vs Size & Distance from Sun"
  17. 	},
  18. 	axisX: {
  19. 		title: "Distance From Sun (in Million Miles)",
  20. 		logarithmic: true,
  21. 		maximum: 4000
  22. 	},
  23. 	axisY: {
  24. 		title: "Surface Temperature (in Kelvin)"
  25. 	},
  26. 	data: [{
  27. 		type: "bubble",
  28. 		indexLabel: "{label}",
  29. 		toolTipContent: "{label}:<br>Distance From Sun: {x}mn miles<br>Avg. Surface Temp: {y} Kelvin<br>Diameter: {z} miles",
  30. 		dataPoints: @Html.Raw(ViewBag.DataPoints)
  31. 	}]
  32. });
  33. chart.render();
  34.  
  35. }
  36. </script>
  37. </head>
  38. <body>
  39. <div id="chartContainer" style="height: 370px; width: 100%;"></div>
  40. <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  41. </body>
  42. </html>                              
  1. using ASPNET_MVC_ChartsDemo.Models;
  2. using Newtonsoft.Json;
  3. using System.Collections.Generic;
  4. using System.Web.Mvc;
  5.  
  6. namespace ASPNET_MVC_ChartsDemo.Controllers
  7. {
  8. 	public class HomeController : Controller
  9. 	{
  10. 		// GET: Home
  11. 		public ActionResult Index()
  12. 		{
  13. 			List<DataPoint> dataPoints = new List<DataPoint>();
  14.  
  15. 			dataPoints.Add(new DataPoint("Mercury", 36, 452, 3031));
  16. 			dataPoints.Add(new DataPoint("Venus", 67.2, 726, 7521));
  17. 			dataPoints.Add(new DataPoint("Earth", 93, 285, 7926));
  18. 			dataPoints.Add(new DataPoint("Mars", 141.6, 230, 4222));
  19. 			dataPoints.Add(new DataPoint("Jupiter", 483.6, 120, 88729));
  20. 			dataPoints.Add(new DataPoint("Saturn", 886.7, 88, 74600));
  21. 			dataPoints.Add(new DataPoint("Uranus", 1784, 59, 32600));
  22. 			dataPoints.Add(new DataPoint("Neptune", 2794.4, 48, 30200));
  23.  
  24. 			ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);
  25.  
  26. 			return View();
  27. 		}
  28. 	}
  29. }                        
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Runtime.Serialization;
  5. using System.Web;
  6.  
  7. namespace ASPNET_MVC_ChartsDemo.Models
  8. {
  9. 	//DataContract for Serializing Data - required to serve in JSON format
  10. 	[DataContract]
  11. 	public class DataPoint
  12. 	{
  13. 		public DataPoint(string label, double x, double y, double z)
  14. 		{
  15. 			this.Label = label;
  16. 			this.X = x;
  17. 			this.Y = y;
  18. 			this.Z = z;
  19. 		}
  20.  
  21. 		//Explicitly setting the name to be used while serializing to JSON.
  22. 		[DataMember(Name = "label")]
  23. 		public string Label = "";
  24.  
  25. 		//Explicitly setting the name to be used while serializing to JSON.
  26. 		[DataMember(Name = "x")]
  27. 		public Nullable<double> X = null;
  28.  
  29. 		//Explicitly setting the name to be used while serializing to JSON.
  30. 		[DataMember(Name = "y")]
  31. 		public Nullable<double> Y = null;
  32.  
  33. 		//Explicitly setting the name to be used while serializing to JSON.
  34. 		[DataMember(Name = "z")]
  35. 		public Nullable<double> Z = null;
  36. 	}
  37. }

Chart Customizations

Setting zoomEnabled property to true enables the zooming / panning feature. The axis of zoom / pan can also be selected using zoomType property. Other commonly used customization options are animationEnabled, theme, etc.

Note   For step by step instructions, follow our ASP.NET MVC Integration Tutorial