Scatter Charts, also referred as Scatter Plot / Point Chart, represents data as a series of points with their axis co-ordinates determined by x and y value of data point. Given example shows ASP.NET MVC Scatter Chart along with source code that you can try running locally.
@{ Layout = null; } <!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, theme: "light2", zoomEnabled: true, title: { text: "Correlation b/w Height & Pulmonary Dead Space in Children", fontSize: 20 }, subtitles: [{ text: "Anatomical dead space is that portion of the airways to lungs where gaseous exchange is not possible.", fontSize: 13 }], axisX: { title: "Height of Children (in cm)", titleFontSize: 13 }, axisY: { title: "Anatomical Dead Space (in ml)", includeZero: true, titleFontSize: 13 }, data: [{ type: "scatter", toolTipContent: "<b>Height: </b>{x} cm<br/><b>ADS: </b> {y} ml", dataPoints: @Html.Raw(ViewBag.DataPoints) }] }); chart.render(); } </script> </head> <body> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>
using ASPNET_MVC_ChartsDemo.Models; using Newtonsoft.Json; using System.Collections.Generic; using System.Web.Mvc; namespace ASPNET_MVC_ChartsDemo.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { List<DataPoint> dataPoints = new List<DataPoint>(); dataPoints.Add(new DataPoint(110, 44)); dataPoints.Add(new DataPoint(116, 31)); dataPoints.Add(new DataPoint(124, 43)); dataPoints.Add(new DataPoint(129, 45)); dataPoints.Add(new DataPoint(131, 56)); dataPoints.Add(new DataPoint(138, 79)); dataPoints.Add(new DataPoint(142, 57)); dataPoints.Add(new DataPoint(150, 56)); dataPoints.Add(new DataPoint(153, 58)); dataPoints.Add(new DataPoint(155, 92)); dataPoints.Add(new DataPoint(156, 78)); dataPoints.Add(new DataPoint(159, 64)); dataPoints.Add(new DataPoint(164, 88)); dataPoints.Add(new DataPoint(168, 112)); dataPoints.Add(new DataPoint(174, 101)); ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints); return View(); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Serialization; using System.Web; namespace ASPNET_MVC_ChartsDemo.Models { //DataContract for Serializing Data - required to serve in JSON format [DataContract] public class DataPoint { public DataPoint(double x, double y) { this.X = x; this.Y = y; } //Explicitly setting the name to be used while serializing to JSON. [DataMember(Name = "x")] public Nullable<double> X = null; //Explicitly setting the name to be used while serializing to JSON. [DataMember(Name = "y")] public Nullable<double> Y = null; } }
The size and type of markers can be customized using markerSize & markerType. Other commonly used customization options are markerBorderColor, animationEnabled, etc.
Note For step by step instructions, follow our ASP.NET MVC Integration Tutorial