chartnew.js
Version:
Simple HTML5 Charts using the canvas element
195 lines (158 loc) • 4.28 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=800;
defCanvasHeight=600;
var mydata2 = {
labels : [""],
datasets : [
{
data : [30],
fillColor : "#D97041",
title : "data1"
},
{
data : [90],
fillColor : "#C7604C",
title : "data2"
},
{
data : [24],
fillColor : "#21323D",
title : "data3"
},
{
data : [58],
fillColor : "#9D9B7F",
title : "data4"
},
{
data : [82],
fillColor : "#7D4F6D",
title : "data5"
},
{
data : [8],
fillColor : "#584A5E",
title : "data6"
}
] ,
shapesInChart : [
{
position : "RELATIVE",
shape: "IMAGE",
imagesrc : "smiley_150x150.jpg",
x1: 2,
y1: 2,
imageAlign : "center",
imageBaseline : "middle"
},
{
position : "RELATIVE",
shape: "IMAGE",
imagesrc : "smiley_75x75.jpg",
x1: 0,
y1: 0,
imageAlign : "left",
imageBaseline : "top"
},
{
position : "RELATIVE",
shape: "IMAGE",
imagesrc : "smiley_75x75.jpg",
x1: 0,
y1: 4,
imageAlign : "left",
imageBaseline : "bottom"
},
{
position : "RELATIVE",
shape: "IMAGE",
imagesrc : "smiley_75x75.jpg",
x1: 4,
y1: 0,
imageAlign : "right",
imageBaseline : "top"
},
{
position : "RELATIVE",
shape: "IMAGE",
imagesrc : "smiley_75x75.jpg",
x1: 4,
y1: 4,
imageAlign : "right",
imageBaseline : "bottom"
},
{
position : "RELATIVE",
shape: "IMAGE",
imagesrc : "background_800x600.jpg",
x1: 0,
y1: 0,
when : "INITFUNCTION",
imageAlign : "left",
imageBaseline : "top"
}
]
};
//var smyley_1=new Image();
//smyley_1.src="smiley_150x150.jpg";
//var smyley_2=new Image();
//smyley_2.src="smiley_75x75.jpg";
var crossImage1 = {
inGraphDataShow : true,
graphTitle : "Graph Title",
graphSubTitle : "Graph Sub Title",
footNote : "Footnote for the graph",
legend : true,
// crossImage : [smyley_1,smyley_2,smyley_2,smyley_2,smyley_2],
// crossImageRelativePosX : [2,0,0,4,4],
// crossImageRelativePosY : [2,0,4,0,4],
// crossImageAlign : ["center","left","left","right","right"],
// crossImageBaseline : ["middle","top","bottom","top","bottom"],
// crossImageIter : ["all"],
// crossImageOverlay : [false]
// use new module shapesInChart.js
endDrawDataFunction: drawShapes,
dispShapesInChart : [0,1,2,3,4]
}
//var background_img=new Image();
//background_img.src="background_800x600.jpg";
var crossImage2 = {
inGraphDataShow : true,
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "Graph Title",
graphSubTitle : "Graph Sub Title",
footNote : "Footnote for the graph",
legend : true,
animation : false,
// crossImage : [background_img],
// crossImageIter : ["background"],
// crossImageOverlay : [false]
// use new module shapesInChart.js
initFunction: drawShapes,
dispShapesInChart : [5]
}
</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_doughnut1\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_doughnut2\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
var myLine = new Chart(document.getElementById("canvas_doughnut1").getContext("2d")).Doughnut(mydata2,crossImage1);
var myLine = new Chart(document.getElementById("canvas_doughnut2").getContext("2d")).Doughnut(mydata2,crossImage2);
}
</script>
</body>
</html>