CanvasJS allows combing of two or more data series to create Multi Series Scatter Chart. You can add legends for every data series to make the graph more informative and readable. Given example shows Multi Series Scatter / Point Chart which contains source code that you can edit in-browser or save to run locally.
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Server Performance"
},
axisX: {
title:"Server Load (in TPS)"
},
axisY:{
title: "Response Time (in ms)",
includeZero: true
},
data: [{
type: "scatter",
toolTipContent: "<span style=\"color:#4F81BC \"><b>{name}</b></span><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b></span> {y} ms",
name: "Server Pluto",
showInLegend: true,
dataPoints: [
{ x: 23, y: 330 },
{ x: 28, y: 390 },
{ x: 39, y: 400 },
{ x: 34, y: 430 },
{ x: 24, y: 321 },
{ x: 29, y: 250 },
{ x: 29, y: 370 },
{ x: 23, y: 290 },
{ x: 27, y: 250 },
{ x: 34, y: 380 },
{ x: 36, y: 320 },
{ x: 33, y: 405 },
{ x: 32, y: 453 },
{ x: 21, y: 292 }
]
},
{
type: "scatter",
name: "Server Mars",
showInLegend: true,
toolTipContent: "<span style=\"color:#C0504E \"><b>{name}</b></span><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b></span> {y} ms",
dataPoints: [
{ x: 19, y: 200 },
{ x: 27, y: 300 },
{ x: 35, y: 330 },
{ x: 32, y: 190 },
{ x: 29, y: 189 },
{ x: 22, y: 150 },
{ x: 27, y: 200 },
{ x: 26, y: 190 },
{ x: 24, y: 225 },
{ x: 33, y: 330 },
{ x: 34, y: 250 },
{ x: 30, y: 120 },
{ x: 37, y: 153 },
{ x: 24, y: 196 }
]
}]
});
chart.render();
}
You can change the color of the scatter series using color. You can also modify type of marker using markerType to represent the data point with custom markers. Some other commonly used customization options are markerColor, markerBorderColor, markerSize etc.