I have created a dynamic line chart using canvasJS with play/pause facility.However the line in the chart does not seem to be flowing through the y-axis .There is some space between the starting of line and the y-axis.How to remove that space so that the line moves to constantly flowing/moving on pressing PLAY button.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="canvasjs.min.js"></script>
<script type="text/javascript">
var dataArray = [{
x: 0,
y: 0
},{
x: 1,
y: 10
}, {
x: 2,
y: 13
}, {
x: 3,
y: 18
}, {
x: 4,
y: 20
}, {
x: 5,
y: 17
}, {
x: 6,
y: 10
}, {
x: 7,
y: 13
}, {
x: 8,
y: 18
}, {
x: 9,
y: 20
}, {
x: 10,
y: 17
}, {
x: 11,
y: 13
}, {
x: 12,
y: 18
}, {
x: 13,
y: 20
}, {
x: 14,
y: 17
}, {
x: 15,
y: 10
}, {
x: 17,
y: 13
}, {
x: 18,
y: 18
}, {
x: 19,
y: 20
}, {
x: 20,
y: 100
}];
function plot(dataArray,windowFrame,chartTitle,xAxisTitle,yAxisTitle) {
var dps=[];
for(var a=0;a<windowFrame;a++)
{
dps[a]=dataArray[a];
}
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: chartTitle
},
axisX: {
title: xAxisTitle
},
axisY: {
title: yAxisTitle
},
data: [{
type: "line",
dataPoints: dps
}]
});
chart.render();
$(".canvasjs-chart-credit").empty();
var updateInterval = 1000;
var flag = true;
var interval;
var updateChart = function() {
if(a<dataArray.length)
{
dps.push({
x: dataArray[a].x,
y: dataArray[a].y
});
a++;
if (dps.length > windowFrame+1) {
dps.shift();
}
}
chart.render();
// update chart after specified time.
};
$('#playPause').click(function() {
if (flag) {
$(this).html('Pause');
interval = setInterval(function() {
updateChart()
}, updateInterval);
} else {
$(this).html('Play');
clearInterval(interval);
}
flag = !flag;
});
}
</script>
</head>
<body>
<button id="Plot" onclick="plot(dataArray,5,'Chart Title','x-axisTitle','y-axis Title')">Plot</button>
<div id="chartContainer" style="height: 600px; width: 500px;">
</div>
<button id="playPause">Play/ Pause</button>
</body>
</html>
To remove space between axisY and the line you can set/update viewportMinimum to starting x value. Here is updated code snippet.
var dataArray = [{
x: 0,
y: 0
},{
x: 1,
y: 10
}, {
x: 2,
y: 13
}, {
x: 3,
y: 18
}, {
x: 4,
y: 20
}, {
x: 5,
y: 17
}, {
x: 6,
y: 10
}, {
x: 7,
y: 13
}, {
x: 8,
y: 18
}, {
x: 9,
y: 20
}, {
x: 10,
y: 17
}, {
x: 11,
y: 13
}, {
x: 12,
y: 18
}, {
x: 13,
y: 20
}, {
x: 14,
y: 17
}, {
x: 15,
y: 10
}, {
x: 17,
y: 13
}, {
x: 18,
y: 18
}, {
x: 19,
y: 20
}, {
x: 20,
y: 100
}];
document.getElementById("Plot").onclick = function(){
plot(dataArray,5,'Chart Title','x-axisTitle','y-axis Title')
}
function plot(dataArray,windowFrame,chartTitle,xAxisTitle,yAxisTitle) {
var dps=[];
for(var a=0;a<windowFrame;a++)
{
dps[a]=dataArray[a];
}
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: chartTitle
},
axisX: {
title: xAxisTitle,
viewportMinimum: 0
},
axisY: {
title: yAxisTitle
},
data: [{
type: "line",
dataPoints: dps
}]
});
chart.render();
$(".canvasjs-chart-credit").empty();
var updateInterval = 1000;
var flag = true;
var interval;
var updateChart = function() {
if(a<dataArray.length)
{
dps.push({
x: dataArray[a].x,
y: dataArray[a].y
});
a++;
if (dps.length > windowFrame+1) {
dps.shift();
}
}
chart.options.axisX.viewportMinimum = dps[0].x;
chart.render();
// update chart after specified time.
};
$('#playPause').click(function() {
if (flag) {
$(this).html('Pause');
interval = setInterval(function() {
updateChart()
}, updateInterval);
} else {
$(this).html('Play');
clearInterval(interval);
}
flag = !flag;
});
}<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Plot" >Plot</button>
<div id="chartContainer" style="height: 600px; width: 500px;">
</div>
<button id="playPause">Play/ Pause</button>