chartnew.js
Version:
Simple HTML5 Charts using the canvas element
84 lines (78 loc) • 2.12 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>
<SCRIPT src='../mathFunctions.js'></script>
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
</head>
<body>
<canvas id="mycanvas" height="600" width="800"></canvas>
<script>
function deviationValue(params) {
var data = params.data;
var datasetNr = params.datasetNr;
return(data.datasets[datasetNr].deviationValue);
}
var BarData = {
labels : [""],
datasets : [
{
fillColor : "blue",
strokeColor : "rgba(129, 172, 123, 1)",
pointColor : "rgba(129, 172, 123, 1)",
pointStrokeColor : "#fff",
drawMathDeviation: "deviationValue",
deviationStrokeColor: "#000",
deviationWidth: 5,
deviationValue : 10,
data : ["60"],
title : "bar 1"
},
{
fillColor : "green",
strokeColor : "rgba(129, 172, 123, 1)",
pointColor : "rgba(129, 172, 123, 1)",
pointStrokeColor : "#fff",
drawMathDeviation: "deviationValue",
deviationStrokeColor: "#000",
deviationWidth: 5,
deviationValue : 20,
data : ["70"],
title : "bar 2"
},
{
fillColor : "red",
strokeColor : "rgba(129, 172, 123, 1)",
pointColor : "rgba(129, 172, 123, 1)",
pointStrokeColor : "#fff",
drawMathDeviation: "deviationValue",
deviationStrokeColor: "#000",
deviationWidth: 5,
deviationValue : 15,
data : ["75"],
title : "bar 3"
},
{
fillColor : "yellow",
strokeColor : "rgba(129, 172, 123, 1)",
pointColor : "rgba(129, 172, 123, 1)",
pointStrokeColor : "#fff",
drawMathDeviation: "deviationValue",
deviationStrokeColor: "#000",
deviationWidth: 5,
deviationValue : 50,
data : ["65"],
title : "bar 4"
}
]
}
var opts= { legend: true,graphMin : 0
};
window.onload = function() {
var myBar = new Chart(document.getElementById("mycanvas").getContext("2d")).Bar(BarData,opts);
}
</script>
</body>
</html>