chartnew.js
Version:
Simple HTML5 Charts using the canvas element
94 lines (84 loc) • 2.11 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/shapesInChart.js'></script>
</head>
<body>
<canvas id="mycanvas" height="600" width="1000"></canvas>
<script>
var DoughnutData = {
labels : [""],
datasets : [
{
data : [30],
fillColor : "#D97041",
title : "January"
},
{
data : [90],
fillColor : "#C7604C",
title : "February"
},
{
data : [24],
fillColor : "#21323D",
title : "March"
},
{
data : [58],
fillColor : "#9D9B7F",
title : "April"
},
{
data : [82],
fillColor : "#7D4F6D",
title : "May"
},
{
data : [8],
fillColor : "#584A5E",
title : "June"
}
],
shapesInChart : [
{
position : "RELATIVE",
shape : "TEXT",
text : "text\nin\ncenter",
x1 : 2,
y1 : 2,
textAlign : "center",
textBaseline : "middle",
fontColor : "black",
fontSize : 50
}
]
};
var opts= {legend : true,
// crossText : ["text\nin\ncenter"],
// crossTextIter: ["all"],
// crossTextOverlay : [true],
// crossTextFontSize : [50],
// crossTextFontColor : ["black"],
// crossTextRelativePosX : [2],
// crossTextRelativePosY : [2],
// crossTextPosX : [0],
// crossTextPosY : [0],
// crossTextAlign : ["center"],
// crossTextBaseline : ["middle"],
// USE NEW MODULE shapesInChart.js
endDrawDataFunction: drawShapes,
//
canvasBorders : true,
graphTitle : "Issue 62"
};
window.onload = function() {
var myBar = new Chart(document.getElementById("mycanvas").getContext("2d")).Doughnut(DoughnutData,opts);
}
</script>
</body>
</html>