chartnew.js
Version:
Simple HTML5 Charts using the canvas element
84 lines (65 loc) • 2.88 kB
HTML
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/format.js'></script>
<SCRIPT src='../Add-ins/stats.js'></script>
<SCRIPT>
var charJSPersonalDefaultOptions = { decimalSeparator : "," , thousandSeparator : ".", roundNumber : "none", graphTitleFontSize: 2 };
defCanvasWidth=1200;
defCanvasHeight=600;
var mydata1 = {
labels : ["01 June","11 June","21 June","1 July"],
xBegin : new Date(2015,5,1,0,0,0).getTime(),
xEnd : new Date(2015,6,1,0,0,0).getTime(),
datasets : [
{
pointColor : "black",
strokeColor : "rgba(0,0,0,0)",
pointStrokeColor : "black",
data : [12.1,25.3,7.9,9.1,31.3,28.1,24.5,19.8,27.1,25.6,18.9,16.8,23.2,10.1,13,15.5],
xPos : [new Date(2015,5,12,5,0,0).getTime(),new Date(2015,5,14,12,0,0).getTime(),new Date(2015,5,13,2,0,0).getTime(),
new Date(2015,5,4,5,0,0).getTime(),new Date(2015,5,25,16,0,0).getTime(),new Date(2015,5,28,13,0,0).getTime(),
new Date(2015,5,27,8,0,0).getTime(),new Date(2015,5,21,1,0,0).getTime(),new Date(2015,5,22,17,0,0).getTime(),
new Date(2015,5,28,2,0,0).getTime(),new Date(2015,5,13,18,0,0).getTime(),new Date(2015,5,13,23,0,0).getTime(),
new Date(2015,5,19,8,0,0).getTime(),new Date(2015,5,8,10,0,0).getTime(),new Date(2015,5,8,14,0,0).getTime(),new Date(2015,5,13,5,0,0).getTime()],
title : "points"
},
{
pointColor : "rgba(0,0,0,0)",
strokeColor : "red",
pointStrokeColor : "rgba(0,0,0,0)",
data : ["<%=#linear_regression_b0#+new Date(2015,5,1,0,0,0).getTime()*#linear_regression_b1#%>",,,"<%=#linear_regression_b0#+new Date(2015,6,1,0,0,0).getTime()*#linear_regression_b1#%>"],
title : "regression line"
}
]
};
var opt1 = {
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
datasetFill : false,
graphTitle : "Regression line: <%=#linear_regression_b0#%>+<%=#linear_regression_b1#%>*X",
graphTitleFontSize: 18,
graphMin : 0,
yAxisMinimumInterval : 5,
bezierCurve: false,
inGraphDataShow : true,
inGraphDataTmpl : "<%=(v1 == 'regression line' ? '' : '('+fmtChartJSPerso(null,new Date(lgtxt2),\"FMTDATETIME DD/MM/YYYY HH:mm\") + ';' + v3 + ')')%>"
} ;
stats(mydata1,opt1);
</SCRIPT>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>Demo ChartNew.js</title>
</head>
<body>
<center>
<FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR>
<script>
document.write("<canvas id=\"canvas_Line1\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
var myLine = new Chart(document.getElementById("canvas_Line1").getContext("2d")).Line(mydata1,opt1);
}
</script>
</body>
</html>