chartnew.js
Version:
Simple HTML5 Charts using the canvas element
107 lines (83 loc) • 2.95 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<title></title>
</head>
<body>
<SCRIPT>
var clickPosJ=-1;
function fnMouseDownLeft(event,ctx,config,data,other){
if(other != null){
clickPosJ = other.v12;
}else{
clickPosJ = -1;
}
updateChart(document.getElementById("canvas_2").getContext("2d"),mydata2,setopts2,false,false)
}
var mydata1 = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
function setPointDefinitionForSecondChart(area, ctx, data,statData, posi,posj,othervars) {
if(area=="MARKERFILLCOLOR") {
if(posj==clickPosJ)return("red");
else return("rgba(220,220,220,1)");
} else if(area=="MARKERSTROKESTYLE") {
if(posj==clickPosJ)return("red");
else return("#fff");
} else if (area=="MARKERRADIUS") {
if(posj==clickPosJ)return(12);
else return(4);
} else if (area=="MARKERSHAPE") {
if(posj==clickPosJ)return("diamond");
else return("circle");
}
};
var mydata2 = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
// pointColor: "rgba(220,220,220,1)",
// pointStrokeColor: "#fff",
pointStrokeColor: setPointDefinitionForSecondChart,
pointColor: setPointDefinitionForSecondChart,
pointDotRadius :setPointDefinitionForSecondChart,
markerShape : setPointDefinitionForSecondChart,
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [25, 79, 30, 51, 16, 75, 90]
}
]
};
var setopts1 = {
animation : false,
mouseDownLeft : fnMouseDownLeft,
}
var setopts2 = {
animation : false
}
document.write("<canvas id=\"canvas_1\" height=\"200\" width=\"450\"></canvas>");
document.write("<canvas id=\"canvas_2\" height=\"200\" width=\"450\"></canvas>");
var Cht1 = new Chart(document.getElementById("canvas_1").getContext("2d")).Line(mydata1,setopts1);
var Cht2 = new Chart(document.getElementById("canvas_2").getContext("2d")).Line(mydata2,setopts2);
/* **************************************************** */
</SCRIPT>
</body>
</html>