chartnew.js
Version:
Simple HTML5 Charts using the canvas element
236 lines (201 loc) • 5.75 kB
HTML
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/shapesInChart.js'></script>
<SCRIPT>
function setColor(area,data,config,i,j,animPct,value)
{
if(value > 35)return("rgba(220,0,0,"+animPct);
else return("rgba(0,220,0,"+animPct);
}
var charJSPersonnalDefaultOptions = { decimalSeparator : "," , thousandSeparator : ".", roundNumber : "none", graphTitleFontSize: 2 };
defCanvasWidth=1200;
defCanvasHeight=600;
var mydata1 = {
labels : ["January","February","March","April","May","June","July"],
// labels : ["January"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointstrokeColor : "yellow",
data : [95,53,99,,73,27,82],
title : "2014",
myInGraphData : ["smiley_75x75.jpg",,"99 (max)",,,"27 (min)"]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "green",
pointstrokeColor : "yellow",
data : [35,43,59,,31,50,66],
title : "2013",
myInGraphData : [,,"smiley_small.gif",,"smiley_big.gif"]
}
]
} ;
var mydata2 = {
labels : ["2014","2015","2016"],
datasets : [
{
data : [30,15,14],
fillColor : "#D97041",
title : "data1",
myInGraphData : [,"smiley_small.gif",undefined]
},
{
data : [90,,25],
fillColor : "#C7604C",
title : "data2",
myInGraphData : ["90 (max)",,"25 max"],
},
{
data : [24,10],
fillColor : "#21323D",
title : "data3"
},
{
data : [58],
fillColor : "#9D9B7F",
title : "data4",
myInGraphData : "smiley_big.gif"
},
{
data : [,82,17],
fillColor : "#7D4F6D",
title : "data5"
},
{
data : [,8,],
fillColor : "#584A5E",
title : "data6",
myInGraphData : "8 (min)"
}
]
};
var cntshapes=0;
var paddingval=3;
var spaceval=0.05;
//var tot=0;
//for(var i=0;i<mydata2.datasets.length;i++) {
// tot+=1*mydata2.datasets[i].data[0];
//}
var tot=[];
for(var i=0;i<mydata2.datasets.length;i++) {
for(j=0;j<mydata2.labels.length;j++) {
if(i==0)tot[j]=0;
if((1*mydata2.datasets[i].data[j])>0)tot[j]+=1*mydata2.datasets[i].data[j];
}
}
var startAngle;
var align, baseline;
mydata2.shapesInChart=[];
//for(j=0;j<1;j++)
var objectToDraw;
for(j=0;j<mydata2.labels.length;j++)
{
startAngle=90;
for(var i=0;i<mydata2.datasets.length;i++) {
if(!((1*mydata2.datasets[i].data[j])>0))continue;
startAngle-= 180*((1*mydata2.datasets[i].data[j])/tot[j]);
if (startAngle==90 || startAngle==-90 || startAngle==-270)align="center";
else if (startAngle < -90)align="right";
else align="left"
if (startAngle==0 || startAngle==-180)baseline="middle";
else if (startAngle <0 && startAngle > -180)baseline="top";
else baseline="bottom";
startAngle-= 180*((1*mydata2.datasets[i].data[j])/tot[j]);
if(typeof mydata2.datasets[i].myInGraphData=="object") {
objectToDraw=mydata2.datasets[i].myInGraphData[Math.min(j,mydata2.datasets[i].myInGraphData.length-1)];
}else if(typeof mydata2.datasets[i].myInGraphData!="undefined")objectToDraw=mydata2.datasets[i].myInGraphData;
else objectToDraw=undefined;
if(typeof objectToDraw == "string") {
if(objectToDraw.toUpperCase().indexOf(".JPG")>=0 || objectToDraw.toUpperCase().indexOf(".GIF")>=0) {
mydata2.shapesInChart[cntshapes] = {
position : "INCHART",
shape: "IMAGE",
imagesrc : "" + objectToDraw,
x1: i,
y1: 1,
posj : j,
paddingX1 : 0,
paddingY1 : +10,
imageAlign : align,
imageBaseline : baseline,
imageWidth : 50,
imageHeight : 50,
iter : "last"
};
} else {
mydata2.shapesInChart[cntshapes] = {
position : "INCHART",
shape: "Text",
text : "" + objectToDraw,
x1: i,
y1: 1+spaceval,
posj : j,
paddingX1 : 0,
paddingY1 : 0,
textAlign : align,
textBaseline : baseline,
fontColor : "black",
fontStyle : "normal",
fontSize : 12,
fontFamily : "'Arial'",
iter : "last"
};
}
cntshapes++;
} else if(typeof mydata2.datasets[i].data[j] != "undefined") {
mydata2.shapesInChart[cntshapes] = {
position : "INCHART",
shape: "Text",
text : "" + mydata2.datasets[i].data[j],
x1: i,
y1: 1+spaceval,
posj : j,
paddingX1 : 0,
paddingY1 : 0,
textAlign : align,
textBaseline : baseline,
fontColor : "black",
fontStyle : "normal",
fontSize : 12,
fontFamily : "'Arial'",
iter : "last"
};
cntshapes++;
}
}
}
var startWithDataset =1;
var startWithData =1;
var opt = {
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "my inGraphData",
graphMin : 0,
legend : true,
inGraphDataShow : false, // -> ingraphData are written through shapes in the chart
annotateDisplay : true,
graphTitleFontSize: 18,
endDrawDataFunction: drawShapes
}
</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_Doughnut\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
var myLine = new Chart(document.getElementById("canvas_Doughnut").getContext("2d")).Doughnut(mydata2,opt);
}
</script>
</body>
</html>