chartnew.js
Version:
Simple HTML5 Charts using the canvas element
159 lines (121 loc) • 4.99 kB
HTML
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT>
defCanvasWidth=1200;
defCanvasHeight=600;
var mydata1 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [0.65,0.59,0.90,0.81,0.56,0.55,0.40],
title : "pFirst data"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [0.28,0.48,0.40,0.19,0.96,0.27,1.00],
title : "pSecond data"
}
]
}
var mydata2 = {
labels : [""],
datasets : [
{
data : [30],
fillColor : "#D97041",
title : "data1"
},
{
data : [90],
fillColor : "#C7604C",
title : "data2"
},
{
data : [24],
fillColor : "#21323D",
title : "data3"
},
{
data : [58],
fillColor : "#9D9B7F",
title : "data4"
},
{
data : [82],
fillColor : "#7D4F6D",
title : "data5"
},
{
data : [8],
fillColor : "#584A5E",
title : "data6"
}
]
};
function annotateAllX(area,ctx,data,statData,posi,posj,othervars) {
var retstring="";
if(ctx.tpchart=="Pie" || ctx.tpchart=="Doughnut" || ctx.tpchart=="PolarArea") {
if(statData[posi][posj].v2!="")retstring=statData[posi][posj].v2+'<BR>';
for(var i=0;i<data.datasets.length;i++){
if(typeof statData[i][posj].v3!="undefined")retstring=retstring+statData[i][posj].v1+"="+statData[i][posj].v3+"<BR>";
}
} else {
if(statData[posi][posj].v2!="")retstring=statData[posi][posj].v2+'<BR>';
for(var i=0;i<data.datasets.length;i++){
if(typeof statData[i][posj].v3!="undefined")retstring=retstring+statData[i][posj].v1+"="+statData[i][posj].v3+"<BR>";
}
}
return "<%='"+retstring+"'%>";
}
var newopts = {
inGraphDataShow : true,
annotateDisplay : true,
rotateLabels : "smart",
annotateLabel: annotateAllX,
pointHitDetectionRadius : 10,
detectAnnotateOnFullLine : true
}
</SCRIPT>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>Demo ChartNew.js</title>
</head>
<body>
<!/div>
<center>
<FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR>
<script>
document.write("<canvas id=\"canvas_radar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_line\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_bar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_stackedbar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_horizontalbar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_horizontalstackedbar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_polararea\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_pie\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_doughnut\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
setopts=newopts;
window.onload = function() {
if(1==1) {
var myLine = new Chart(document.getElementById("canvas_line").getContext("2d")).Line(mydata1,setopts);
var myLine = new Chart(document.getElementById("canvas_bar").getContext("2d")).Bar(mydata1,setopts);
var myLine = new Chart(document.getElementById("canvas_stackedbar").getContext("2d")).StackedBar(mydata1,setopts);
var myLine = new Chart(document.getElementById("canvas_horizontalbar").getContext("2d")).HorizontalBar(mydata1,setopts);
var myLine = new Chart(document.getElementById("canvas_horizontalstackedbar").getContext("2d")).HorizontalStackedBar(mydata1,setopts);
var myLine = new Chart(document.getElementById("canvas_radar").getContext("2d")).Radar(mydata1,setopts);
var myLine = new Chart(document.getElementById("canvas_polararea").getContext("2d")).PolarArea(mydata1,setopts);
var myLine = new Chart(document.getElementById("canvas_pie").getContext("2d")).Pie(mydata1,setopts);
var myLine = new Chart(document.getElementById("canvas_doughnut").getContext("2d")).Doughnut(mydata1,setopts);
}
}
</script>
</body>
</html>