chartnew.js
Version:
Simple HTML5 Charts using the canvas element
60 lines (56 loc) • 1.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>
<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>
var LineData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [565,559,590,581,556,555,540],
title : "First data"
},
{
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [528,548,540,519,596,527,580],
title : "Second data"
}
]
}
var opts = {
scaleLineColor: "gray",
scaleShowLabels: false,
scaleFontColor: "gray",
scaleFontSize: 10,
scaleGridLineColor: 'rgba(0, 0, 0, .03)',
bezierCurve: false,
pointDotStrokeWidth: 1,
datasetStrokeWidth: 1,
animation: true,
animationStartWithData: 4,
inGraphDataShow: true,
inGraphDataPaddingX: 6,
inGraphDataPaddingY: 4,
inGraphDataFontSize: 10,
inGraphDataFontColor: "gray",
scaleXGridLinesStep: 0,
datasetFill: false
}
window.onload = function() {
var myBar = new Chart(document.getElementById("mycanvas").getContext("2d")).Line(LineData,opts);
}
</script>
</body>
</html>