Line Chart with ZoomEnabled - CanvasJS JavaScript Charts
Line Chart with ZoomEnabled - CanvasJS JavaScript Charts
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>JavaScript
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
var chart1 = new CanvasJS.Chart("chartContainer1",
{
zoomEnabled: true,
title:{
text: "Zoom And Observe AxisX Labels"
},
axisX :{
labelAngle: -30
},
axisY :{
includeZero: false
},
data: data, // random generator below
});
chart1.render();
dataPoints.push({
x: new Date(2016,03,30,07,04,26),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,28),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,30),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,32),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,34),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,36),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,38),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,40),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,42),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,44),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,46),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,48),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,50),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,52),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,54),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,56),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,04,58),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,05,00),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,05,02),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,05,04),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,05,06),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,05,08),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,05,10),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,05,12),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,05,14),
y: 0.0
});
dataPoints.push({
x: new Date(2016,03,30,07,05,16),
y:...