chartnew.js
Version:
Simple HTML5 Charts using the canvas element
164 lines (136 loc) • 4.51 kB
HTML
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT>
defCanvasWidth=800;
defCanvasHeight=800;
var mydata2 = {
labels : [""],
datasets : [
{
data : [1],
fillColor : "#9F81F7",
title : "data1"
},
{
data : [45],
fillColor : "#F4FA58",
title : "data2"
},
{
data : [2],
fillColor : "#E6E6E6",
title : "data3"
},
{
data : [45],
fillColor : "#81F7D8",
title : "data4"
},
{
data : [1],
fillColor : "#F78181",
title : "data5"
},
{
data : [2],
fillColor : "#F5A9F2",
title : "data6"
},
{
data : [1],
fillColor : "#58FA58",
title : "data7"
}
]
};
function setPosInPie1(area,ctx,data,statData,posi,posj,othervars)
{
if(posi%4==0)return(45);
else if(posi%4==1)return(15);
else if(posi%4==2)return(-15);
else if(posi%4==3)return(-45);
}
function setPosInPie2(area,ctx,data,statData,posi,posj,othervars)
{
var minAngle=10;
var offSet=10;
var cntbef=0;
var cntaft=0;
if(statData[posi][posj].segmentAngle*360/(2*Math.PI) < minAngle )
{
for(var i=posi-1;i>=0 && statData[i][posj].segmentAngle*360/(2*Math.PI) < minAngle;i--)cntbef++;
if(cntbef==posi)for(var i=data.datasets.length-1;i>=0 && statData[i][posj].segmentAngle*360/(2*Math.PI) < minAngle;i--)cntbef++;
for(var i=posi+1;i<data.datasets.length && statData[i][posj].segmentAngle*360/(2*Math.PI) < minAngle;i++)cntaft++;
if(posi+cntaft==data.datasets.length-1)for(var i=0;i<data.datasets.length && statData[i][posj].segmentAngle*360/(2*Math.PI) < minAngle;i++)cntaft++;
if(cntbef>=data.datasets.length)cntbef=posi-1
if(cntaft>=data.datasets.length)cntaft=data.datasets.length-posi;
}
return((cntbef+cntaft)*offSet-cntaft*2*offSet);
}
var opt1A = {
animation : false,
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
inGraphDataShow : true,
inGraphDataFontColor : "black",
inGraphDataAlign : "center",
inGraphDataRadiusPosition : 2,
inGraphDataPaddingRadius : setPosInPie2
}
var opt1B = {
animation : false,
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
inGraphDataShow : true,
inGraphDataFontColor : "black",
inGraphDataAlign : "center",
inGraphDataRadiusPosition : 2,
inGraphDataPaddingRadius : setPosInPie1
}
var opt1C = {
animation : false,
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
inGraphDataShow : true,
inGraphDataFontColor : "black",
inGraphDataAlign : "center",
inGraphDataRadiusPosition : 2,
inGraphDataPaddingRadius :[-30,0,0,0,30,10,-10]
}
var opt1D = {
animation : false,
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
inGraphDataShow : true,
inGraphDataFontColor : "black",
inGraphDataAlign : "center",
inGraphDataRadiusPosition : 2,
inGraphDataMinimumAngle : 7
}
</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_PieA\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_PieB\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_PieC\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_PieD\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
var myPie = new Chart(document.getElementById("canvas_PieA").getContext("2d")).Pie(mydata2,opt1A);
var myPie = new Chart(document.getElementById("canvas_PieB").getContext("2d")).Pie(mydata2,opt1B);
var myPie = new Chart(document.getElementById("canvas_PieC").getContext("2d")).Pie(mydata2,opt1C);
var myPie = new Chart(document.getElementById("canvas_PieD").getContext("2d")).Pie(mydata2,opt1D);
}
</script>
</body>
</html>