chartnew.js
Version:
Simple HTML5 Charts using the canvas element
72 lines (52 loc) • 2.05 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>
var charJSPersonalDefaultOptions = { decimalSeparator : "," , thousandSeparator : ".", roundNumber : "none", graphTitleFontSize: 2 };
defCanvasWidth=1200;
defCanvasHeight=600;
var mydata1 = {
labels : [new Date(2014,0,1,0,0,0),new Date(2014,0,1,3,0,0),new Date(2014,0,1,6,0,0),new Date(2014,0,1,9,0,0),new Date(2014,0,1,12,0,0),new Date(2014,0,1,15,0,0),new Date(2014,0,1,18,0,0),new Date(2014,0,1,21,0,0),new Date(2014,0,1,24,0,0)],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "rgba(220,220,220,1)",
data : [95,53,99,87,73,27,82],
xPos : [new Date(2014,0,1,2,43,12),new Date(2014,0,1,3,17,10),new Date(2014,0,1,7,33,25),new Date(2014,0,1,11,9,01),new Date(2014,0,1,15,52,10),new Date(2014,0,1,18,23,56),new Date(2014,0,1,21,34,41)],
title : "With xPos"
}
]
}
var opt1 = {
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "Time graphic",
legend : true,
inGraphDataShow : true,
inGraphDataTmpl : "<%=v3 + ' (' + v2 + ')'%>",
fmtV2 : "fmtdatetime MM/DD/YYYY HH:mm:ss",
graphTitleFontSize: 18,
fmtXLabel : "fmttime HH:mm",
graphMin : 0,
yAxisMinimumInterval : 5,
}
</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>