chartnew.js
Version:
Simple HTML5 Charts using the canvas element
105 lines (71 loc) • 2.92 kB
HTML
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT>
defCanvasWidth=1200;
defCanvasHeight=600;
var mydata = {
labels : ["January","February","March"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,30],
title : "pFirst data"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [27,38,21],
title : "pSecond data"
}
]
}
var newopts = {
inGraphDataShow : true,
canvasBorders : true,
graphTitle : "Graph Title",
graphTitleFontSize : 24,
graphMin : 0
}
</SCRIPT>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>Demo ChartNew.js</title>
</head>
<body>
<!/div>
<center>
<FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR>
<script>
document.write("<canvas id=\"canvas_line\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_line2\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_bar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_bar2\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_stackedbar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_stackedbar2\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
// Resize canvas
function resizeCanvas(canvas_name,data) {
var canvas = document.getElementById(canvas_name);
canvas.width=Math.min(canvas.width,data.labels.length*80+70);
}
resizeCanvas("canvas_line2",mydata);
resizeCanvas("canvas_bar2",mydata);
resizeCanvas("canvas_stackedbar2",mydata);
window.onload = function() {
if(1==1) {
var myLine = new Chart(document.getElementById("canvas_line").getContext("2d")).Line(mydata,newopts);
var myLine = new Chart(document.getElementById("canvas_bar").getContext("2d")).Bar(mydata,newopts);
var myLine = new Chart(document.getElementById("canvas_stackedbar").getContext("2d")).StackedBar(mydata,newopts);
var myLine = new Chart(document.getElementById("canvas_line2").getContext("2d")).Line(mydata,newopts);
var myLine = new Chart(document.getElementById("canvas_bar2").getContext("2d")).Bar(mydata,newopts);
var myLine = new Chart(document.getElementById("canvas_stackedbar2").getContext("2d")).StackedBar(mydata,newopts);
}
}
</script>
</body>
</html>