chartnew.js
Version:
Simple HTML5 Charts using the canvas element
68 lines (59 loc) • 4.16 kB
HTML
<html>
<head>
<title></title>
<SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/annotate.js'></script>
<SCRIPT>
var annotate_shape='ARROW';
</SCRIPT>
</head>
<body>
<center><FONT size=25>some sample tooltip position for (stacked)bar charts</FONT></CENTER>
<canvas id="mycanvas0" height="400" width="400"></canvas>
<canvas id="mycanvas1" height="400" width="400"></canvas>
<canvas id="mycanvas2" height="400" width="400"></canvas>
<canvas id="mycanvas3" height="400" width="400"></canvas>
<canvas id="mycanvas4" height="400" width="400"></canvas>
<canvas id="mycanvas5" height="400" width="400"></canvas>
<canvas id="mycanvas6" height="400" width="400"></canvas>
<canvas id="mycanvas7" height="400" width="400"></canvas>
<canvas id="mycanvas8" height="400" width="400"></canvas>
<canvas id="mycanvas9" height="400" width="400"></canvas>
<script>
var LineData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(129, 172, 123, 0.5)",
strokeColor : "rgba(129, 172, 123, 1)",
pointColor : "rgba(129, 172, 123, 1)",
pointStrokeColor : "#fff",
data : [30,44,42,-90,90,-37,20],
title : "Line 1"
},
{
fillColor : "rgba(159, 90, 90, 0.5)",
strokeColor : "rgba(159, 90, 90, 1)",
pointColor : "rgba(159, 90, 90, 1)",
// type :"Line" ,
pointStrokeColor : "#fff",
data : [65,59,40,77,56,-10,40],
title : "Line 2"
}
]
};
window.onload = function() {
var myStackedChart0 = new Chart(document.getElementById("mycanvas0").getContext("2d")).StackedBar(LineData,{animation: false, canvasBorders: true, annotateDisplay: true, annotatePaddingX: 0, annotatePaddingY : -10, annotatePositionX : "center", annotatePositionY : "top" });
var myStackedChart1 = new Chart(document.getElementById("mycanvas1").getContext("2d")).StackedBar(LineData,{animation: false, canvasBorders: true, annotateDisplay: true, annotatePaddingX: -15, annotatePaddingY : -10, annotatePositionX : "right", annotatePositionY : "Stop" });
var myStackedChart2 = new Chart(document.getElementById("mycanvas2").getContext("2d")).StackedBar(LineData,{animation: false, canvasBorders: true, annotateDisplay: true, annotatePaddingX: 15, annotatePaddingY : -10, annotatePositionX : "left", annotatePositionY : "SXtop" });
var myStackedChart3 = new Chart(document.getElementById("mycanvas3").getContext("2d")).StackedBar(LineData,{animation: false, canvasBorders: true, annotateDisplay: true, annotatePaddingX: 0, annotatePaddingY : 10, annotatePositionX : "center", annotatePositionY : "Sbottom" });
var myStackedChart4 = new Chart(document.getElementById("mycanvas4").getContext("2d")).StackedBar(LineData,{animation: false, canvasBorders: true, annotateDisplay: true, annotatePaddingX: 0, annotatePaddingY : 10, annotatePositionX : "center", annotatePositionY : "SXbottom" });
var myStackedChart5 = new Chart(document.getElementById("mycanvas5").getContext("2d")).StackedBar(LineData,{animation: false, canvasBorders: true, annotateDisplay: true, annotatePaddingX: 5, annotatePaddingY : 0, annotatePositionX : "right", annotatePositionY : "center" });
var myStackedChart6 = new Chart(document.getElementById("mycanvas6").getContext("2d")).StackedBar(LineData,{animation: false, canvasBorders: true, annotateDisplay: true, annotatePaddingX: 0, annotatePaddingY : -20, annotatePositionX : "center", annotatePositionY : "MXtop" });
var myStackedChart7 = new Chart(document.getElementById("mycanvas7").getContext("2d")).StackedBar(LineData,{animation: false, canvasBorders: true, annotateDisplay: true, annotatePaddingX: 0, annotatePaddingY : 0, annotatePositionY : 5, annotatePositionX : 5, graphSpaceBefore: 30 });
var myStackedChart8 = new Chart(document.getElementById("mycanvas8").getContext("2d")).StackedBar(LineData,{animation: false, canvasBorders: true, annotateDisplay: true, annotatePaddingX: 0, annotatePaddingY : 0, annotatePositionY : 5, annotatePositionX : "50%", graphSpaceBefore: 30 });
}
</script>
</body>
</html>