Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Annotate.js #492

Merged
merged 14 commits into from
Jan 3, 2017
Merged

Annotate.js #492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9923303
Create annotate.js
Dec 31, 2016
c83fae7
Update ChartNew.js
Dec 31, 2016
7be89ba
Update ChartNew.js
Jan 2, 2017
14b190a
Sample for issue 491
Jan 2, 2017
adeae10
Update annotate.js
Jan 2, 2017
a9e9249
Update chart_list.js
Jan 2, 2017
6af8d6d
Create annotate_bubble.html
Jan 2, 2017
f4bea18
Create annotate_arrow.html
Jan 2, 2017
2a34951
Create annotate_for_line_charts.html
Jan 2, 2017
7554f90
Create annotate_for_bar_charts.html
Jan 2, 2017
6107137
Create annotate_for_stackedbar_charts.html
Jan 2, 2017
5e0397a
Create annotate_for_circular_charts.html
Jan 2, 2017
ce85e6b
Update annotate.js
Jan 3, 2017
2210005
Update annotate.js
Jan 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,481 changes: 1,481 additions & 0 deletions Add-ins/annotate.js
View file
Open in desktop

Large diffs are not rendered by default.

273 changes: 190 additions & 83 deletions ChartNew.js
View file
Open in desktop

Large diffs are not rendered by default.

189 changes: 189 additions & 0 deletions Samples/annotate_arrow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
190 changes: 190 additions & 0 deletions Samples/annotate_bubble.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading