chartnew.js
Version:
Simple HTML5 Charts using the canvas element
143 lines (114 loc) • 4.33 kB
HTML
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT>
var charJSPersonalDefaultOptions = { decimalSeparator : "," , thousandSeparator : ".", roundNumber : "none", graphTitleFontSize: 2 };
defCanvasWidth=1200;
defCanvasHeight=600;
var mydata1 = {
labels : [0,5,10,15,20],
datasets : [
{
pointColor : "black",
strokeColor : "black",
pointStrokeColor : "black",
fillColor : "blue",
data : [12.1,25.3,7.9,9.1,31.3],
title : "line1"
},
{
pointColor : "red",
strokeColor : "red",
pointStrokeColor : "red",
fillColor : "green",
data : [10,21.3,12.5,5.7,22.3],
title : "line2"
}
]
}
// fctMouseMove is called each time you move the mouse over the canvas;
function fctMouseMove(event,ctx,config,data,other)
{
var canvas_pos = getMousePos(ctx.canvas, event);
if(other != null) {
document.getElementById('divmousepos').innerHTML = "Mouse Position : ["+canvas_pos.x+","+canvas_pos.y+"] - Hover Bar: ["+other.i+","+other.j+"]";
} else {
document.getElementById('divmousepos').innerHTML = "Mouse Position : ["+canvas_pos.x+","+canvas_pos.y+"]";
}
}
// fctMouseOut is called each time the mouse leaves the canvas;
function fctMouseOut(event,ctx,config,data,other)
{
var canvas_pos = getMousePos(ctx.canvas, event);
document.getElementById('divmousepos').innerHTML = "Mouse not in canvas";
}
// inBar function is called each time you enter hover a Bar;
function inBar(area,ctx,data,statdata,posi,posj,othervars) {
document.getElementById('divmouseobject').innerHTML = " - In Bar ("+posi+","+posj+")";
};
// outBar function is called each time you leave a Bar;
function outBar(area,ctx,data,statdata,posi,posj,othervars) {
document.getElementById('divmouseobject').innerHTML = " - Last leaved Bar ("+posi+","+posj+")";
};
var opt1 = {
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
datasetFill : false,
graphTitle : "mouse action sample",
graphTitleFontSize: 18,
graphMin : 0,
yAxisMinimumInterval : 5,
bezierCurve: false,
inGraphDataShow : true,
// following option is necessary to activate the annotateFunctionIn and annotateFunctionOut options;
annotateDisplay : true,
// following 2 options are necessary to have a empty and not displayed annotation
annotateBackgroundColor : "rgba(0,0,0,0)",
annotateLabel : "<%=''%>",
// Following 4 options associate functions to mouse actions;
annotateFunctionIn : inBar,
annotateFunctionOut : outBar,
mouseMove : fctMouseMove,
mouseOut : fctMouseOut
}
</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>
<script>
document.write("<canvas id=\"canvas_Line1\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
var element = document.createElement('divmousepos');
element.id = "divmousepos";
document.body.appendChild(element);
var mouseDiv = document.getElementById('divmousepos');
mouseDiv.style.zIndex='3';
mouseDiv.style.color='rgb(255,255,0)';
mouseDiv.style.background='rgb(0,102,153)';
mouseDiv.style.width='700px';
mouseDiv.style.height='200px';
mouseDiv.style.left='500px';
mouseDiv.style.top='90px';
mouseDiv.innerHTML = "Mouse not in canvas";
var element = document.createElement('divmouseobject');
element.id = "divmouseobject";
document.body.appendChild(element);
var mouseDiv = document.getElementById('divmouseobject');
mouseDiv.style.zIndex='3';
mouseDiv.style.color='rgb(255,255,0)';
mouseDiv.style.background='rgb(0,102,153)';
mouseDiv.style.width='700px';
mouseDiv.style.height='200px';
mouseDiv.style.left='500px';
mouseDiv.style.top='90px';
mouseDiv.innerHTML = " - Mouse never hover a bar";
window.onload = function() {
var myLine = new Chart(document.getElementById("canvas_Line1").getContext("2d")).Bar(mydata1,opt1);
}
</script>
</body>
</html>