chartnew.js
Version:
Simple HTML5 Charts using the canvas element
191 lines (161 loc) • 4.67 kB
HTML
<html>
<head>
<title></title>
<SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/annotate.js'></script>
<SCRIPT>
var annotate_shape='bubble_tooltip';
</SCRIPT>
</head>
<body>
<center><FONT size=25>Bubble_tooltip</FONT></CENTER>
<canvas id="mycanvas1" height="600" width="400"></canvas>
<canvas id="mycanvas2" height="600" width="400"></canvas>
<canvas id="mycanvas3" height="400" width="400"></canvas>
<canvas id="mycanvas4" 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"
}
]
};
var PieData = {
labels : [""],
datasets : [
{
fillColor : "red",
strokeColor : "red",
data : [30],
title : "Piece 1"
},
{
fillColor : "blue",
strokeColor : "blue",
data : [50],
title : "Piece 2"
},
{
fillColor : "green",
strokeColor : "green",
data : [20],
title : "Piece 3"
},
{
fillColor : "yellow",
strokeColor : "yellow",
data : [40],
title : "Piece 4"
}
]
};
var opts1= {
annotateDisplay: true,
// annotateFontFamily: "'courrierNew'",
// annotateBorder: 'groove',
// annotateBorderRadius: '10px',
// annotateBackgroundColor: 'rgba(0,0,0,0.4)',
// annotateFontSize: 20,
// annotateFontColor: 'red',
// annotateFontStyle: "italic",
// annotatePadding: "10px",
canvasBorders : true,
annotatePositionY: "center",
annotatePositionX: "right",
// annotatePositionRadius: "out",
// annotatePositionAngle: "middle",
annotatePaddingY : -4,
annotatePaddingX : 15,
// annotatePaddingAngle : 90,
// annotatePaddingRadius : 50,
animation : true
};
var opts2= {
annotateDisplay: true,
// annotateFontFamily: "'courrierNew'",
// annotateBorder: 'groove',
// annotateBorderRadius: '10px',
// annotateBackgroundColor: 'rgba(0,0,0,0.4)',
// annotateFontSize: 20,
// annotateFontColor: 'red',
// annotateFontStyle: "italic",
// annotatePadding: "10px",
canvasBorders : true,
annotatePositionY: "Stop",
annotatePositionX: "center",
// annotatePositionRadius: "out",
// annotatePositionAngle: "middle",
annotatePaddingY : -10,
annotatePaddingX : 0,
// annotatePaddingAngle : 90,
// annotatePaddingRadius : 50,
animation : true
};
var opts3= {
annotateDisplay: true,
// annotateFontFamily: "'courrierNew'",
// annotateBorder: 'groove',
// annotateBorderRadius: '10px',
// annotateBackgroundColor: 'rgba(0,0,0,0.4)',
// annotateFontSize: 20,
// annotateFontColor: 'red',
// annotateFontStyle: "italic",
// annotatePadding: "10px",
canvasBorders : true,
// annotatePositionY: "Stop",
// annotatePositionX: "center",
annotatePositionRadius: "in",
annotatePositionAngle: "atMousePosition",
annotatePaddingY : 0,
annotatePaddingX : 0,
annotatePaddingAngle : 0,
annotatePaddingRadius : -15,
animation : true
};
var opts4= {
annotateDisplay: true,
// annotateFontFamily: "'courrierNew'",
// annotateBorder: 'groove',
// annotateBorderRadius: '10px',
// annotateBackgroundColor: 'rgba(0,0,0,0.4)',
// annotateFontSize: 20,
// annotateFontColor: 'red',
// annotateFontStyle: "italic",
// annotatePadding: "10px",
canvasBorders : true,
// annotatePositionY: "Stop",
// annotatePositionX: "center",
annotatePositionRadius: "center",
annotatePositionAngle: "center",
annotatePaddingY : 0,
annotatePaddingX : 0,
annotatePaddingAngle : 0,
annotatePaddingRadius : -15,
animation : true
};
window.onload = function() {
var myLine = new Chart(document.getElementById("mycanvas1").getContext("2d")).Line(LineData,opts1);
var myBar = new Chart(document.getElementById("mycanvas2").getContext("2d")).Bar(LineData,opts2);
var myDoughnut = new Chart(document.getElementById("mycanvas3").getContext("2d")).Doughnut(PieData,opts3);
var myPie = new Chart(document.getElementById("mycanvas4").getContext("2d")).Pie(PieData,opts4);
}
</script>
</body>
</html>