chartnew.js
Version:
Simple HTML5 Charts using the canvas element
89 lines (82 loc) • 2.67 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
</head>
<body>
<canvas id="mycanvas1" height="800" width="1400"></canvas>
<canvas id="mycanvas2" height="800" width="1400"></canvas>
<script>
var mydata1 = {
labels : ["January","February","March","April","May","June","July"],
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,90,81,-56,55,40],
title : "First data"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,-40,19,96,-27,100],
title : "Second data"
}
]
};
var mydata2 = {
labels : ["January","February","March","April","May","June","July"],
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,90,81,56,55,40],
title : "First data"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100],
title : "Second data"
}
]
};
function computeScaleStepWidth(area,ctx,data,statData,posi,posj,othervars) {
return 10;
};
function computeStepValue(area,ctx,data,statData,posi,posj,othervars) {
return 20;
};
function computeStartValue(area,ctx,data,statData,posi,posj,othervars) {
var minimumValue=Number.MAX_VALUE;
for(var i=0;i<data.datasets.length;i++) {
for (var j=0;j<data.datasets[i].data.length;j++) minimumValue=Math.min(minimumValue,1*data.datasets[i].data[j]);
}
if(minimumValue>=0)return(0);
else return(-100);
};
var options =
{
scaleOverride: true,
scaleSteps: computeStepValue,
scaleStepWidth: computeScaleStepWidth,
scaleStartValue : computeStartValue
};
window.onload = function() {
var myLine1 = new Chart(document.getElementById("mycanvas1").getContext("2d")).Bar(mydata1,options);
var myLine2 = new Chart(document.getElementById("mycanvas2").getContext("2d")).Bar(mydata2,options);
}
</script>
</body>
</html>