ASP.NET MVC Scatter Charts with Custom Markers

Download ASP.NET Chart Samples

You can change the type of marker that is used to display data point that makes easier differentiation between data series / points. Given example shows Scatter Chart with different markers. It also includes 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,
	title: {
		text: "Server CPU Utilization vs Active Users"
	},
	axisX: {
		title: "Active Users"
	},
	axisY: {
		title: "CPU Utilization",
		suffix: "%"
	},
	legend: {
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	data: [{
		type: "scatter",
		name: "Server 1",
		markerType: "cross",
		showInLegend: true,
		toolTipContent: "<span style=\"color:#4F81BC \">{name}</span><br>Active Users: {x}<br>CPU Utilization: {y}%",
		dataPoints: @Html.Raw(ViewBag.DataPoints1)
	},
	{
		type: "scatter",
		name: "Server 2",
		showInLegend: true,
		markerType: "square",
		toolTipContent: "<span style=\"color:#C0504E \">{name}</span><br>Active Users: {x}<br>CPU Utilization: {y}%",
		dataPoints: @Html.Raw(ViewBag.DataPoints2)
	}]
});
chart.render();

function toggleDataSeries(e) {
	if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	} else {
		e.dataSeries.visible = true;
	}
	e.chart.render();
}

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/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(100, 10));
			dataPoints.Add(new DataPoint(110, 15));
			dataPoints.Add(new DataPoint(130, 17));
			dataPoints.Add(new DataPoint(140, 19));
			dataPoints.Add(new DataPoint(145, 21));
			dataPoints.Add(new DataPoint(400, 25));
			dataPoints.Add(new DataPoint(430, 27));
			dataPoints.Add(new DataPoint(444, 30));
			dataPoints.Add(new DataPoint(460, 29));
			dataPoints.Add(new DataPoint(490, 35));
			dataPoints.Add(new DataPoint(500, 40));
			dataPoints.Add(new DataPoint(510, 50));
			dataPoints.Add(new DataPoint(600, 30));
			dataPoints.Add(new DataPoint(700, 35));
			dataPoints.Add(new DataPoint(800, 40));
			dataPoints.Add(new DataPoint(900, 45));
			dataPoints.Add(new DataPoint(1000, 47));
			dataPoints.Add(new DataPoint(1200, 55));
			dataPoints.Add(new DataPoint(1230, 51));
			dataPoints.Add(new DataPoint(1300, 60));
			dataPoints.Add(new DataPoint(1330, 65));
			dataPoints.Add(new DataPoint(1400, 70));
			dataPoints.Add(new DataPoint(1450, 71));
			dataPoints.Add(new DataPoint(1500, 69));
			dataPoints.Add(new DataPoint(1530, 75));
			dataPoints.Add(new DataPoint(1590, 79));
			dataPoints.Add(new DataPoint(1600, 62));
			dataPoints.Add(new DataPoint(1620, 80));
			dataPoints.Add(new DataPoint(1640, 85));
			dataPoints.Add(new DataPoint(1700, 81));
			dataPoints.Add(new DataPoint(1790, 89));
			dataPoints.Add(new DataPoint(1800, 91));
			dataPoints.Add(new DataPoint(1950, 93));
			dataPoints.Add(new DataPoint(1980, 88));
			dataPoints.Add(new DataPoint(2000, 90));

			ViewBag.DataPoints1 = JsonConvert.SerializeObject(dataPoints);

			dataPoints = new List<DataPoint>();
			dataPoints.Add(new DataPoint(100, 25));
			dataPoints.Add(new DataPoint(110, 35));
			dataPoints.Add(new DataPoint(130, 35));
			dataPoints.Add(new DataPoint(140, 40));
			dataPoints.Add(new DataPoint(145, 45));
			dataPoints.Add(new DataPoint(400, 42));
			dataPoints.Add(new DataPoint(430, 32));
			dataPoints.Add(new DataPoint(444, 35));
			dataPoints.Add(new DataPoint(460, 43));
			dataPoints.Add(new DataPoint(490, 50));
			dataPoints.Add(new DataPoint(500, 57));
			dataPoints.Add(new DataPoint(510, 67));
			dataPoints.Add(new DataPoint(600, 40));
			dataPoints.Add(new DataPoint(700, 46));
			dataPoints.Add(new DataPoint(800, 50));
			dataPoints.Add(new DataPoint(900, 60));
			dataPoints.Add(new DataPoint(1000, 66));
			dataPoints.Add(new DataPoint(1200, 79));
			dataPoints.Add(new DataPoint(1230, 60));
			dataPoints.Add(new DataPoint(1300, 75));
			dataPoints.Add(new DataPoint(1330, 80));
			dataPoints.Add(new DataPoint(1400, 82));
			dataPoints.Add(new DataPoint(1450, 88));
			dataPoints.Add(new DataPoint(1500, 87));
			dataPoints.Add(new DataPoint(1530, 88));
			dataPoints.Add(new DataPoint(1590, 90));
			dataPoints.Add(new DataPoint(1600, 80));
			dataPoints.Add(new DataPoint(1620, 93));
			dataPoints.Add(new DataPoint(1640, 91));
			dataPoints.Add(new DataPoint(1700, 92));
			dataPoints.Add(new DataPoint(1790, 93));
			dataPoints.Add(new DataPoint(1800, 90));
			dataPoints.Add(new DataPoint(1950, 91));
			dataPoints.Add(new DataPoint(1980, 93));
			dataPoints.Add(new DataPoint(2000, 95));

			ViewBag.DataPoints2 = 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;
	}
}

Chart Customizations

markerType property can be used to change the the type of marker. Some other commonly used customization options include color, markerSize, etc.

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