chartnew.js
Version:
Simple HTML5 Charts using the canvas element
222 lines (187 loc) • 5.13 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>
defCanvasWidth=1200;
defCanvasHeight=600;
var mydata3 = {
labels : [""],
datasets : [
{
data : [70],
fillColor : "rgba(151,187,205,1)",
title : "data1"
},
{
data : [30],
fillColor : "rgba(220,220,220,1)",
title : "data1"
}
],
shapesInChart : [
{
position : "RELATIVE",
shape : "TEXT",
text : dispPct,
x1 : 2,
y1 : 2,
textAlign : "center",
textBaseline : "middle",
fontColor : "black",
fontSize : 50
}
]
};
var mydata4 = {
labels : [""],
datasets : [
{
data : [70],
fillColor : "rgba(151,187,205,1)",
title : "data1"
},
{
data : [30],
fillColor : "rgba(220,220,220,1)",
title : "data1"
}
],
shapesInChart : [
{
position : "RELATIVE",
shape : "TEXT",
text : dispPct2,
x1 : 2,
y1 : 2,
textAlign : "center",
textBaseline : "middle",
fontColor : "black",
fontSize : 50
}
]
};
var mydata5 = {
labels : ["2015","2016"],
datasets : [
{
data : [70,100],
fillColor : "rgba(151,187,205,1)",
title : "data1"
},
{
data : [30,50],
fillColor : "rgba(220,220,220,1)",
title : "data1"
}
],
shapesInChart : [
{
position : "RELATIVE",
shape : "TEXT",
text : dispPct3,
x1 : 2,
y1 : 2,
textAlign : "center",
textBaseline : "middle",
fontColor : "black",
fontSize : 35
}
]
};
function dispPct(numtxt,valtxt,ctx,config,posX,posY,borderX,borderY,overlay,data,animPC){
// alert("INIT");
return(Math.round(100*animPC));
}
var crosstxt3 = {
animationEasing : "linear",
endDrawDataFunction: drawShapes,
graphTitle : "Draw text through the graph",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
spaceTop : 30,
spaceBottom : 30,
spaceLeft : 30,
spaceRight : 30,
startAngle : 180,
dynamicDisplay : true
}
function dispPct2(numtxt,valtxt,ctx,config,posX,posY,borderX,borderY,overlay,data,animPC){
return(Math.round(animPC*data.datasets[0].data[0]));
}
function dispPct3(numtxt,valtxt,ctx,config,posX,posY,borderX,borderY,overlay,data,animPC){
var result;
var pct;
result="";
for(var i=0;i<data.datasets.length;i++){
pct=Math.round(100*animPC*data.datasets[0].data[i]/(data.datasets[0].data[i]+data.datasets[1].data[i]));
result=result+"\n"+data.labels[i]+" : "+pct+" %";
}
return(result.substring(1));
}
var crosstxt4 = {
animationEasing : "linear",
endDrawDataFunction: drawShapes,
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "Draw text through the graph",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
spaceTop : 30,
spaceBottom : 30,
spaceLeft : 30,
spaceRight : 30,
startAngle : 180,
dynamicDisplay : true
}
var crosstxt5 = {
animationEasing : "linear",
endDrawDataFunction: drawShapes,
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "Draw text through the graph",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
inGraphDataShow : true,
inGraphDataFontSize : 30,
inGraphDataFontStyle : "bold",
inGraphDataPaddingRadius : -10,
spaceTop : 30,
spaceBottom : 30,
spaceLeft : 30,
spaceRight : 30,
startAngle : 180,
dynamicDisplay : 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_doughnut2\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_doughnut3\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_doughnut4\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
var myLine = new Chart(document.getElementById("canvas_doughnut2").getContext("2d")).Doughnut(mydata3,crosstxt3);
var myLine = new Chart(document.getElementById("canvas_doughnut3").getContext("2d")).Doughnut(mydata4,crosstxt4);
var myLine = new Chart(document.getElementById("canvas_doughnut4").getContext("2d")).Doughnut(mydata5,crosstxt5);
}
</script>
</body>
</html>