chartnew.js
Version:
Simple HTML5 Charts using the canvas element
164 lines (141 loc) • 4.11 kB
HTML
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT>
function setColor(area,ctx,data,statdata,i,j,othervars)
{
return(data.datasets[i].fillColor);
}
var charJSPersonnalDefaultOptions = { decimalSeparator : "," , thousandSeparator : ".", roundNumber : "none", graphTitleFontSize: 2 };
defCanvasWidth=800;
defCanvasHeight=650;
var mydata1 = {
labels : [""],
datasets : [
{
data : [7],
fillColor : "blue",
title : "Sektorius 1"
},
{
data : [20],
fillColor : "orange",
title : "Sektorius 2"
},
{
data : [11],
fillColor : "green",
title : "Sektorius 3"
},
{
data : [17],
fillColor : "magenta",
title : "Sektorius 4"
},
{
data : [30],
fillColor : "red",
title : "Sektorius 5"
}
]
};
var mydata2 = {
labels : ["2015","2016"],
datasets : [
{
data : [7,14],
fillColor : "blue",
title : "Sektorius 1"
},
{
data : [20,90],
fillColor : "orange",
title : "Sektorius 2"
},
{
data : [,18],
fillColor : "green",
title : "Sektorius 3"
},
{
data : [13,],
fillColor : "magenta",
title : "Sektorius 4"
},
{
data : [,30],
fillColor : "red",
title : "Sektorius 5"
}
]
};
var startWithDataset =1;
var startWithData =1;
var opt1 = {
animation : false,
canvasBorders : true,
inGraphDataShow : true,
legend : true,
startAngle : -180,
inGraphDataTmpl: "<%=v6+' %'%>",
percentageInnerCutout : 90,
inGraphDataFontSize: 25,
inGraphDataFontColor : setColor,
annotateDisplay : true,
canvasBackgroundColor: "#EFF5FB"
}
var opt2 = {
animation : false,
canvasBorders : true,
inGraphDataShow : true,
startAngle : 0,
inGraphDataPaddingRadius : 65,
inGraphDataTmpl: "<%=v6+' %\n'+v1%>",
inGraphDataAlign : "center",
inGraphDataVAlign : "middle",
percentageInnerCutout : 90,
spaceRight : 140,
spaceLeft : 140,
spaceTop : 80,
spaceBottom : 80,
inGraphDataFontSize: 25,
inGraphDataFontColor :["blue","orange","green","magenta","red"],
annotateDisplay : true,
canvasBackgroundColor: "#EFF5FB"
}
var opt3 = {
inGraphDataAlign : ["to-center","off-center"],
inGraphDataRadiusPosition : [1,3],
inGraphDataVAlign : ["to-center","off-center"],
inGraphDataPaddingRadius : [-3,0],
animation : false,
canvasBorders : true,
inGraphDataShow : true,
legend : true,
startAngle : -180,
inGraphDataTmpl: "<%=v6+' %('+v2+')'%>",
percentageInnerCutout : 90,
inGraphDataFontSize: 25,
inGraphDataFontColor : setColor,
annotateDisplay : true,
canvasBackgroundColor: "#EFF5FB"
}
</SCRIPT>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>Demo ChartNew.js</title>
</head>
<body>
<center>
<script>
document.write("<canvas id=\"canvas_Doughnut1\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_Doughnut2\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_Doughnut3\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
var myDoughnut = new Chart(document.getElementById("canvas_Doughnut1").getContext("2d")).Doughnut(mydata1,opt1);
var myDoughnut = new Chart(document.getElementById("canvas_Doughnut2").getContext("2d")).Doughnut(mydata1,opt2);
var myDoughnut = new Chart(document.getElementById("canvas_Doughnut3").getContext("2d")).Doughnut(mydata2,opt3);
}
</script>
</body>
</html>