Merge pull request #492 from FVANCOP/annotate.js

With the new add-ins Add-ins/annotate.js, you can define new shapes for the annotates (=tooltip) and put the annotates on specific positions. See following samples : http://fvancop.github.io/ChartNew.js/Samples/annotate_for_line_charts.html http://fvancop.github.io/ChartNew.js/Samples/annotate_for_bar_charts.html http://fvancop.github.io/ChartNew.js/Samples/annotate_for_stackedbar_charts.html http://fvancop.github.io/ChartNew.js/Samples/annotate_for_circular_charts.html http://fvancop.github.io/ChartNew.js/Samples/annotate_arrow.html http://fvancop.github.io/ChartNew.js/Samples/annotate_bubble.html This add-ins provides a solution for issue #460 Documentation : https://github.com/FVANCOP/ChartNew.js/wiki/900_100_Annotate_add-ins
FVANCOP · Jan 3, 2017 · eaf8f53 · eaf8f53
2 parents f979f3e + 2210005
commit eaf8f53
Show file tree

Hide file tree

Showing 10 changed files with 2,508 additions and 83 deletions.
diff --git a/Add-ins/annotate.js b/Add-ins/annotate.js
diff --git a/ChartNew.js b/ChartNew.js
diff --git a/Samples/annotate_arrow.html b/Samples/annotate_arrow.html
@@ -0,0 +1,189 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<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>tooltip with an arrow</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>
diff --git a/Samples/annotate_bubble.html b/Samples/annotate_bubble.html
@@ -0,0 +1,190 @@
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<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>