chartnew.js
Version:
Simple HTML5 Charts using the canvas element
105 lines (83 loc) • 2.72 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 src='../Add-ins/gradientColor.js'></script>
<SCRIPT>
var charJSPersonnalDefaultOptions = { decimalSeparator : "," , thousandSeparator : ".", roundNumber : "none", graphTitleFontSize: 2 };
defCanvasWidth=600;
defCanvasHeight=300;
var BarLineData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
type: "Line",
fill: false,
strokeColor : "rgb(230, 14, 14)",
pointColor : "rgb(205, 151, 155)",
pointStrokeColor : "#f56691",
pointDotStrokeWidth : 1,
data : [0.30,0.44,0.42,0.19,0.90,0.37,1.20],
// data : [-0.30,-0.44,-0.42,-0.19,-0.90,-0.37,-1.20],
// data : [-0.30,0.44,-0.42,0.19,-0.90,-0.37,1.20],
// data : [,,0.4,0.19,,0.37,0.4],
// data : [0,0,0,0,0,0,0],
// data : [0,,,0,,0,0],
title : "line 1",
axis : 1
},
{
fillColor : gradientColor,
gradientColors : ["#00FFFF 50%","green","yellow"],
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointDotStrokeWidth : 1,
pointStrokeColor : "blue",
// data : [0.30,0.44,0.42,0.19,0.90,0.37,1.20],
data : [-0.30,-0.44,-0.42,-0.19,-0.90,-0.37,-1.20],
// data : [-0.30,0.44,-0.42,0.19,-0.90,-0.37,1.20],
// data : [,,0.4,0.19,,0.37,0.4],
// data : [0,0,0,0,0,0,0],
// data : [0,,,0,,0,0],
title : "Bar 1"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointDotStrokeWidth : 1,
pointStrokeColor : "#fff",
data : [0.28,0.48,0.40,0.19,0.96,0.27,1.00],
title : "Bar 2"
},
{
type: "Line",
fill: false,
fillColor : "rgba(151, 205, 172, 0.5)",
strokeColor : "rgb(87, 147, 106)",
pointColor : "rgb(151, 205, 172)",
pointDotStrokeWidth : 1,
pointStrokeColor : "#fff",
data : [0.42,0.58,0.44,0.22,0.84,0.17,0.70],
title : "Line 3",
axis : 1
}
]
}
</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>
<canvas id="canvas_Line" height="600" width="800"></canvas>
<script>
var opts= {animation : false,legend : true,annotateDisplay:true,inGraphDataShow : true, datasetFill : false,legendBlockSize :40, legendPosX : 4, legendPosY : 2, barValueSpacing : 10};
window.onload = function() {
var bar = new Chart(document.getElementById("canvas_Line").getContext("2d")).Bar(BarLineData,opts);
}
</script>
</body>
</html>