Live / Realtime updates of data and striplines are supported out of the box. Striplines / Trendlines can be used in both x and y-axes. In the below example, you can observe the stripline being updated dynamically.
window.onload = function () {
var dataPoints = [], currentDate = new Date();
var stockChart = new CanvasJS.StockChart("chartContainer",{
theme: "light2",
title:{
text:"Dynamic StockChart with Stripline"
},
charts: [{
axisX: {
crosshair: {
enabled: true,
valueFormatString: "MMM DD, YYYY HH:mm:ss"
}
},
axisY: {
title: "Pageviews Per Second",
stripLines: [{
showOnTop: true,
lineDashType: "dash",
color: "#ff4949",
labelFontColor: "#ff4949",
labelFontSize: 14
}]
},
toolTip: {
shared: true
},
data: [{
type: "line",
name: "Pageviews",
xValueFormatString: "MMM DD, YYYY HH:mm:ss",
xValueType: "dateTime",
dataPoints : dataPoints
}]
}],
rangeSelector: {
selectedRangeButtonIndex: 0,
buttons: [{
range: 1,
rangeType: "minute",
label: "1m"
}, {
range: 5,
rangeType: "minute",
label: "5m"
}, {
rangeType: "all",
label: "All"
}],
inputFields: {
enabled: false
}
}
});
var dataCount = 700, ystart = 50, interval = 1000, xstart = (currentDate.getTime() - (700 * 1000));
updateChart(xstart, ystart, dataCount, interval);
function updateChart(xstart, ystart, length, interval) {
var xVal = xstart, yVal = ystart;
for(var i = 0; i < length; i++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
yVal = Math.min(Math.max(yVal, 5), 90);
dataPoints.push({x: xVal,y: yVal});
xVal += interval;
}
stockChart.options.charts[0].axisY.stripLines[0].value = dataPoints[dataPoints.length - 1].y;
stockChart.options.charts[0].axisY.stripLines[0].label = stockChart.options.charts[0].axisY.stripLines[0]["value"];
xstart = xVal;
dataCount = 1;
ystart = yVal;
stockChart.render();
setTimeout(function() { updateChart(xstart, ystart, dataCount, interval); }, 1000);
}
}