Hi Sunil –
This is running on Windows7 – I’ve played a little more – I can get the chart working if I open it in a separate tab – however I see the error if the chart is embedded in a frame….
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
<title>V50</title>
</head>
<frameset rows=”56px,85%”>
<frame src=”header.html” noresize frameborder=”0″/>
<frameset cols=”264px,*”>
<frame src=”dmap.html” name=”map” border=”0″ noresize frameborder=”0″/>
<frame src=”chart.html” name=”menu” noresize frameborder=”0″/>
</frameset>
</frameset>
</html>
chart.html:
<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
window.onload = function () {
var l1dps = [{x: 0, y: 0},];
var l2dps = [{x: 0, y: 0},];
var l3dps = [{x: 0, y: 0},];
var l4dps = [{x: 0, y: 0},];
var chart = new CanvasJS.Chart(“chartContainer0”,{
title :{
text: “Test Chart 1 ”
},
zoomEnabled: true, panEnabled: true,
axisX: {
title: “Time”,
valueFormatString: “HH:mm:ss”},
axisY: {
title: “”
},
data: [{
type: “line”,
xValueType: “dateTime”,
showInLegend: true,
legendText: “DCHANSTATS – RxBytes(TP:0)”,dataPoints : l1dps
}]
});
loadCSV(“chart0.csv”);
chart.render();
function loadCSV(file) {
if (window.XMLHttpRequest) {
var request = new XMLHttpRequest();
}
else {
var request = new ActiveXObject(‘Microsoft.XMLHTTP’);
}
request.open(‘GET’, file, false);
request.send();
parseCSV(request.responseText);
}
function parseCSV(data){
var rows = data.split(“\n”);
var now = new Date();
for (var i = 0; i < rows.length; i++){
if (rows[i]) {
var column = rows[i].split(“,”);
var xVal, yVal;if (column[1]){
xVal = parseInt(column[0],16);
yVal = parseInt(column[1],16);
xVal = now-(xVal*1000);
l1dps.push({x: xVal,y: yVal,});
if (l1dps.length > 360)
{
l1dps.shift();
}
}
}
}
}
var updateChart = function(){
loadCSV(“chart0.csv”);
chart.render();
};
setInterval(function(){updateChart()},5000 );
}
</script>
<script type=”text/javascript” src=”canvasjs.min.js”></script>
</head>
<body>
<div id=”chartContainer0″ style=”height: 450px; width: 100%”>
</div>
</body>
</html>
Hi Sunil –
The browser mode is IE9
The document mode is IE9 Standards
Thanks,
Paul
Hi Sunil –
Here is the code – it is auto-generated from our embedded system – I’ve tried to tidy it up a little to make it more readable:
<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
window.onload = function () {
var l1dps = [{x: 0, y: 0},];
var chart = new CanvasJS.Chart(“chartContainer0”,{
title :{
text: “Test Chart 1 ”
},
zoomEnabled: true, panEnabled: true,
axisX: {
title: “Time”,
valueFormatString: “HH:mm:ss”},
axisY: {
title: “”
},
data: [{
type: “line”,
xValueType: “dateTime”,
showInLegend: true,
legendText: “DCHANSTATS – RxBytes(TP:0)”,dataPoints : l1dps
}]
});
loadCSV(“chart0.csv”);
chart.render();
function loadCSV(file) {
if (window.XMLHttpRequest) {
var request = new XMLHttpRequest();
}
else {
var request = new ActiveXObject(‘Microsoft.XMLHTTP’);
}
request.open(‘GET’, file, false);
request.send();
parseCSV(request.responseText);
}
function parseCSV(data){
var rows = data.split(“\n”);
var now = new Date();
for (var i = 0; i < rows.length; i++){
if (rows[i]) {
var column = rows[i].split(“,”);
var xVal, yVal;if (column[1]){
xVal = parseInt(column[0],16);
yVal = parseInt(column[1],16);
xVal = now-(xVal*1000);
l1dps.push({x: xVal,y: yVal,});
if (l1dps.length > 360)
{
l1dps.shift();
}
}
}
}
}
var updateChart = function(){
loadCSV(“chart0.csv”);
chart.render();
};
setInterval(function(){updateChart()},5000 );
}
</script>
<script type=”text/javascript” src=”canvasjs.min.js”></script>
</head>
<body>
<div id=”chartContainer0″ style=”height: 450px; width: 100%”>
</div>
</body>
</html>
The CSV file