Hi all, I used canvas line chart with HTML5. I have a trouble with clear data and redraw the data. Example I drawn the random data on Y-Axis and the X-Axis increased one value in updateInterval times. I want when the X value had 200 and clear all data displayed on line chart and redraw again with X value (x=0).
Here this is my code :https://www.mediafire.com/?yp1jt2uad2xpxyc
Thank you.
This code here:
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="1200" height="600" style="border:1px solid black;"></canvas>
<script type="text/javascript">
function LineChart(config){
this.canvas = document.getElementById(config.canvasId);
this.minX = config.minX;
this.minY = config.minY;
this.maxX = config.maxX;
this.maxY = config.maxY;
this.unitsPerTickX = config.unitsPerTickX;
this.unitsPerTickY = config.unitsPerTickY;
this.padding = 10;
this.tickSize = 10;
this.axisColor = "#555";
this.pointRadius = 2;
this.font = "12pt Calibri";
this.fontHeight = 12;
this.context = this.canvas.getContext("2d");
this.rangeX = this.maxX - this.minY;
this.rangeY = this.maxY - this.minY;
this.numXTicks = Math.round(this.rangeX / this.unitsPerTickX);
this.numYTicks = Math.round(this.rangeY / this.unitsPerTickY);
this.x = this.getLongestValueWidth() + this.padding * 2;
this.y = this.padding * 2;
this.width = this.canvas.width - this.x - this.padding * 2;
this.height = this.canvas.height - this.y - this.padding -
this.fontHeight;
this.scaleX = this.width / this.rangeX;
this.scaleY = this.height / this.rangeY;
this.drawXAxis();
this.drawYAxis();
}
LineChart.prototype.getLongestValueWidth = function(){
this.context.font = this.font;
var longestValueWidth = 0;
for (var n = 0; n <= this.numYTicks; n++) {
var value = this.maxY - (n * this.unitsPerTickY);
longestValueWidth = Math.max(longestValueWidth, this.
context.measureText(value).width);
}
return longestValueWidth;
};
LineChart.prototype.drawXAxis = function(){
var context = this.context;
context.save();
context.beginPath();
context.moveTo(this.x, this.y + this.height);
context.lineTo(this.x + this.width, this.y + this.height);
context.strokeStyle = this.axisColor;
context.lineWidth = 2;
context.stroke();
for (var n = 0; n < this.numXTicks; n++) {
context.beginPath();
context.moveTo((n + 1) * this.width / this.numXTicks +
this.x, this.y + this.height);
context.lineTo((n + 1) * this.width / this.numXTicks +
this.x, this.y + this.height - this.tickSize);
context.stroke();
}
context.font = this.font;
context.fillStyle = "black";
context.textAlign = "center";
context.textBaseline = "middle";
for (var n = 0; n < this.numXTicks; n++) {
var label = Math.round((n + 1) * this.maxX / this.
numXTicks);
context.save();
context.translate((n + 1) * this.width / this.numXTicks +
this.x, this.y + this.height + this.padding);
context.fillText(label, 0, 0);
context.restore();
}
context.restore();
};
LineChart.prototype.drawYAxis = function(){
var context = this.context;
context.save();
context.save();
context.beginPath();
context.moveTo(this.x, this.y);
context.lineTo(this.x, this.y + this.height);
context.strokeStyle = this.axisColor;
context.lineWidth = 2;
context.stroke();
context.restore();
for (var n = 0; n < this.numYTicks; n++) {
context.beginPath();
context.moveTo(this.x, n * this.height / this.numYTicks +
this.y);
context.lineTo(this.x + this.tickSize, n * this.height /
this.numYTicks + this.y);
context.stroke();
}
context.font = this.font;
context.fillStyle = "black";
context.textAlign = "right";
context.textBaseline = "middle";
for (var n = 0; n < this.numYTicks; n++) {
var value = Math.round(this.maxY - n * this.maxY / this.numYTicks);
context.save();
context.translate(this.x - this.padding, n * this.height /
this.numYTicks + this.y);
context.fillText(value, 0, 0);
context.restore();
}
context.restore();
};
LineChart.prototype.drawLine = function(data, color, width){
var context = this.context;
context.save();
this.transformContext();
context.lineWidth = width;
context.strokeStyle = color;
context.fillStyle = color;
context.beginPath();
context.moveTo(data[0].x * this.scaleX, data[0].y * this.
scaleY);
for (var n = 0; n < data.length; n++) {
var point = data[n];
context.lineTo(point.x * this.scaleX, point.y * this.
scaleY);
context.stroke();
context.closePath();
context.beginPath();
context.arc(point.x * this.scaleX, point.y * this.scaleY,
this.pointRadius, 0, 2 * Math.PI, false);
context.fill();
context.closePath();
context.beginPath();
context.moveTo(point.x * this.scaleX, point.y * this.scaleY);
}
context.restore();
};
LineChart.prototype.transformContext = function(){
var context = this.context;
this.context.translate(this.x, this.y + this.height);
context.scale(1, -1);
};
window.onload = function(){
var myLineChart = new LineChart({
canvasId: "myCanvas",
minX: 0,
minY: 0,
maxX: 200,
maxY: 260,
unitsPerTickX: 20,
unitsPerTickY: 50
});
var dps = [];
var xVal = dps.length + 1;
var yVal = 15;
var updateInterval = 300;
function updatedata(){
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({x: xVal,y: yVal});
xVal++;
myLineChart.drawLine(dps, "blue", 3);
};
setInterval(function(){updatedata()}, updateInterval);
};
</script>
</body>
</html>
Submit an article or tip