chartnew.js
Version:
Simple HTML5 Charts using the canvas element
149 lines (123 loc) • 3.65 kB
HTML
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]-->
<SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/shapesInChart.js'></script>
<SCRIPT src='../Add-ins/specialInChartData.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 : ["2015","2016"],
datasets : [
{
data : [40,10],
fillColor : "rgba(220,0,220,0.2)",
title : "data1"
},
{
data : [80,25],
fillColor : "rgba(0,0,220,0.2)",
title : "data2",
fontStyle : "bold",
fontSize : [35,15],
expandOutRadius : 0.1,
expandInRadius : 0.1
},
{
data : [24,5],
fillColor : "rgba(220,0,0,0.2)",
title : "data3"
},
{
data : [58,30],
fillColor : "rgba(0,220,220,0.2)",
title : "data4",
},
{
data : [50],
fillColor : "rgba(0,220,0,0.2)",
title : "data5",
},
{
data : [,0],
fillColor : "rgba(50,100,150,0.2)",
title : "data7",
}
]
};
var mydata1S = {
labels : ["2015"],
datasets : [
{
data : [40],
fillColor : "rgba(220,0,220,0.2)",
title : "data1"
},
{
data : [80],
fillColor : "rgba(0,0,220,0.2)",
title : "data2",
fontStyle : "bold",
fontSize : 35,
expandOutRadius : 0.1,
expandInRadius : 0.1
},
{
data : [24],
fillColor : "rgba(220,0,0,0.2)",
title : "data3"
},
{
data : [58],
fillColor : "rgba(0,220,220,0.2)",
title : "data4",
},
{
data : [50],
fillColor : "rgba(0,220,0,0.2)",
title : "data5",
},
{
data : [0],
fillColor : "rgba(50,100,150,0.2)",
title : "data7",
}
]
};
var image=new Image();
image.src="plus_sign.jpg";
var opt1 = {
animation : false,
canvasBorders : true,
spaceBottom : 40,
spaceTop : 55,
endDrawDataFunction: drawShapes
};
pushInGraphData("Doughnut",mydata1,opt1,{text: "<Title> (<Value>)", imageLoad : image,imageWidth : 30, imageHeight : 30, avoidOverwrite : true,link : "triangle"});
pushInGraphData("Doughnut",mydata1S,opt1,{text: "<Title> (<Value>)", imageLoad : image,imageWidth : 30, imageHeight : 30, avoidOverwrite : true,link : "triangle"});
</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=\"canvas1\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas2\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
var myLine = new Chart(document.getElementById("canvas1").getContext("2d")).Doughnut(mydata1S,opt1);
var myLine = new Chart(document.getElementById("canvas2").getContext("2d")).Doughnut(mydata1,opt1);
}
</script>
</body>
</html>