JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
zoomEnabled: true,
height: 230,
width: 985,
axisX:{
interval: 7,
intervalType: "day",
labelFontSize: 14,
valueFormatString: "MMM-D",
crosshair: {
enabled: true
}
},
axisY:{
includeZero: false,
prefix: '$',
labelFontSize: 13,
},
axisY2:{
includeZero: false,
prefix: "#",
labelFontSize: 13,
},
toolTip: {
shared: true,
mode: 'label'
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries,
horizontalAlign: "right", // left, center ,right
verticalAlign: "center"
},
data: [{
type: "stepLine",
name: "Amazon Price",
color: "#FFA500",
xValueType: "dateTime",
markerSize: 0,
visible: true,
xValueFormatString: "MMM-DD hh:mm",
showInLegend: true,
connectNullData: false,
dataPoints: []
},
{
type: "stepLine",
name: "New Price",
color: "#00BFFF",
lineThickness: 1,
connectNullData: false,
markerSize: 0,
visible: true,
xValueType: "dateTime",
xValueFormatString: "MMM-DD hh:mm",
showInLegend: true,
dataPoints: [{"x":1552470240000,"y":38},{"x":1552089000000,"y":39},{"x":1551457680000,"y":39.05},{"x":1549703400000,"y":32.54},{"x":1548801840000,"y":37},{"x":1547468400000,"y":33.5}]
},
{
type: "stepLine",
name: "Used Price",
color: "#444444",
lineThickness: 1,
connectNullData: false,
markerSize: 0,
visible: true,
xValueType: "dateTime",
xValueFormatString: "MMM-DD hh:mm",
showInLegend: true,
dataPoints: []
},
{
type: "stepLine",
name: "Sales Rank",
axisYType: "secondary",
lineThickness: 1,
color: "#24A96B",
visible: true,
markerSize: 0,
xValueType: "dateTime",
xValueFormatString: "MMM-DD hh:mm",
showInLegend: true,
dataPoints:...