JavaScript
var chart = new CanvasJS.Chart('chartContainer',
{
zoomEnabled: true,
zoomType: 'xy',
title:{
text: 'Earthquakes – per month'
},
axisX: {
valueFormatString: 'MMM',
interval:1,
intervalType: 'month'
},
axisY:{
includeZero: false
},
data:[
{
type:'line',
markerType:'none',
toolTipContent:null,
fillOpacity:0.5,
name:'Series1-avg',
showInLegend:false,
dataPoints:[{x:0,label:'08/20/2016',y:12592},{x:1,label:'08/21/2016',y:12592},{x:2,label:'08/22/2016',y:12592},{x:3,label:'08/23/2016',y:12592},{x:4,label:'08/24/2016',y:12592},{x:5,label:'08/25/2016',y:12592},{x:6,label:'08/26/2016',y:12592},{x:7,label:'08/27/2016',y:12592},{x:8,label:'08/28/2016',y:12592},{x:9,label:'08/29/2016',y:12592},{x:10,label:'08/30/2016',y:12592}],
color: '#D3D3D3'
},
{
type:'line',
markerType:'none',
toolTipContent:null,
fillOpacity:0.5,
name:'Series2-avg',
showInLegend:false,
dataPoints:[{x:2.05,label:'08/22/2016',y:12592},{x:3.05,label:'08/23/2016',y:12592},{x:4.05,label:'08/24/2016',y:12592},{x:5.05,label:'08/25/2016',y:12592},{x:6.05,label:'08/26/2016',y:12592},{x:9.05,label:'08/29/2016',y:12592},{x:10.05,label:'08/30/2016',y:12592}],
color:'#32CD32'
},
{
type:'line',
markerType:'none',
toolTipContent:null,
fillOpacity:0.5,
name:'Series3-avg',
showInLegend:false,
dataPoints:[{x:0.1,label:'08/20/2016',y:12592},{x:2.1,label:'08/22/2016',y:12592},{x:3.1,label:'08/23/2016',y:12592},{x:4.1,label:'08/24/2016',y:12592},{x:5.1,label:'08/25/2016',y:12592},{x:6.1,label:'08/26/2016',y:12592},{x:7.1,label:'08/27/2016',y:12592},{x:9.1,label:'08/29/2016',y:12568},{x:10.1,label:'08/30/2016',y:12568}],
color: '#1E90FF'
}
]
}); // End of new chart variable
chart.render();