JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "House Median Price"
},
axisX: [{
margin: -5,
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
{
margin: -5,
lineThickness: 0,
tickThickness: 0,
labelFormatter: function(e){ return ""; }
},
{
margin: -5,
lineThickness: 0,
tickThickness: 0,
labelFormatter: function(e){ return ""; }
}],
axisY: {
title: "Median List Price",
prefix: "$",
suffix: "K",
includeZero: true
},
legend: {
cursor: "pointer",
itemclick: toogleDataSeries
},
data: [{
type:"line",
name: "2017",
axisXIndex: 0,
showInLegend: true,
dataPoints: [
{ x: new Date(2017, 00, 01), y: 850 },
{ x: new Date(2017, 01, 01), y: 889 },
{ x: new Date(2017, 02, 01), y: 890 },
{ x: new Date(2017, 03, 01), y: 899 },
{ x: new Date(2017, 04, 01), y: 903 },
{ x: new Date(2017, 05, 01), y: 925 },
{ x: new Date(2017, 06, 01), y: 899 },
{ x: new Date(2017, 07, 01), y: 875 },
{ x: new Date(2017, 08, 01), y: 927 },
{ x: new Date(2017, 09, 01), y: 949 },
{ x: new Date(2017, 10, 01), y: 946 },
{ x: new Date(2017, 11, 01), y: 927 }
]
},
{
type: "line",
name: "2018",
axisXIndex: 1,
showInLegend: true,
dataPoints: [
{ x: new Date(2018, 00, 01), y: 1200 },
{ x: new Date(2018, 01, 01), y: 1200 },
{ x: new Date(2018, 02, 01), y: 1190 },
{ x: new Date(2018, 03, 01), y: 1180 },
{ x: new Date(2018, 04, 01), y: 1250 },
{ x: new Date(2018, 05, 01), y: 1270 },
{ x: new Date(2018, 06, 01), y: 1300 },
{ x: new Date(2018, 07, 01), y: 1300 },
{ x: new Date(2018, 08, 01), y: 1358 },
{ x: new Date(2018, 09, 01), y: 1410 },
{ x: new Date(2018, 10, 01), y: 1480 },
{ x: new Date(2018, 11, 01), y: 1500 }
]
},
{
type: "line",
name: "2019",
axisXIndex: 2,
showInLegend: true,
dataPoints: [
{ x: new Date(2019, 00, 01), y: 409 },
{ x: new Date(2019, 01, 01), y: 415 },
{ x: new...