Skip to content

Commit 27f4917

Browse files
Jeff TianJeff Tian
Jeff Tian
authored and
Jeff Tian
committed
Documentation.
1 parent 7dc7434 commit 27f4917

File tree

4 files changed

+276
-2
lines changed

4 files changed

+276
-2
lines changed

‎README.md

+135
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,137 @@
11
jquery.flot.comments.js
22
=======================
3+
4+
Flot plugin that shows extra comments to the flot chart. There are several types of comments:
5+
- **tooltip**: Show the data point value (x, y) when mouse over a data point;
6+
- **comment**: A callout style textbox that always shows at the specified position;
7+
- **sidenote**: Texts that shows at the right side of the chart that only associated with the
8+
y-axis coordinate.
9+
10+
**Usage:**
11+
12+
Inside the `<head></head>` area of your html page, add the following lines:
13+
14+
```html
15+
<script type="text/javascript" src="http://zizhujy.com/Scripts/flot/jquery.flot.comment.js"></script>
16+
```
17+
18+
pass your comments, sidenotes to the options object when you draw the flot chart by $.plot():
19+
20+
```javascript
21+
var options = {
22+
comment: {
23+
show: true
24+
},
25+
comments: [
26+
{
27+
x: -2,
28+
y: 1,
29+
contents: "this point 1"
30+
},
31+
...
32+
],
33+
sidenote: {
34+
show: true
35+
},
36+
sidenotes: [
37+
{
38+
y: -4,
39+
contents: "Low Level",
40+
offsetX: 0,
41+
offsetY: 0,
42+
maxWidth: 0.15
43+
},
44+
...
45+
]
46+
};
47+
48+
$.plot("#canvas-wrapper", data, options);
49+
```
50+
51+
**Online examples:**
52+
53+
- [Comment Example](examples/CommentExample.html "Comment Example")
54+
55+
**Dependencies:**
56+
57+
- jquery.js
58+
- jquery.colorhelpers.js
59+
- jquery.flot.js
60+
61+
**Customizations:**
62+
63+
```javascript
64+
options{
65+
comment: {
66+
"class": "jquery-flot-comment",
67+
wrapperCss: {
68+
"position": "absolute",
69+
"display": "block",
70+
"margin": "0",
71+
"line-height": "1em",
72+
"background-color": "transparent",
73+
"color": "white",
74+
"padding": "0",
75+
"font-size": "xx-small",
76+
"box-sizing": "border-box",
77+
"text-align": "center"
78+
},
79+
notch: {
80+
size: "5px"
81+
},
82+
htmlTemplate: function() {
83+
return "<div class='{1}'><div class='callout' style='position: relative; margin: 0; padding: 0; background-color: #000; width: 1%\0 /* IE 8 width hack */; box-sizing: border-box; padding: 5px;'><div style='line-height: 1em; position: relative;'>{{0}}</div><b class='notch' style='position: absolute; bottom: -{0}; left: 50%; margin: 0 0 0 -{0}; border-top: {0} solid #000; border-left: {0} solid transparent; border-right: {0} solid transparent; border-bottom: 0; padding: 0; width: 0; height: 0; font-size: 0; line-height: 0; _border-right-color: pink; _border-left-color: pink; _filter: chroma(color=pink);'></b></div></div>".format(this.notch.size, this.class);
84+
},
85+
show: true,
86+
position: {
87+
offsetX: 0,
88+
offsetY: 0,
89+
x: function (x) {
90+
return {
91+
"left": x + parseFloat(this.offsetX || 0)
92+
};
93+
},
94+
y: function (y) {
95+
return {
96+
"top": y + parseFloat(this.offsetY || 0)
97+
};
98+
}
99+
}
100+
},
101+
sidenote: {
102+
"class": "jquery-flot-sidenote",
103+
wrapperCss: {
104+
"position": "absolute",
105+
"display": "block",
106+
"line-height": "1.1em",
107+
"margin": "0",
108+
"font-size": "smaller"
109+
},
110+
maxWidth: 0.2, /* Width percentage of the whole chart width */
111+
show: true,
112+
position: {
113+
offsetX: "5px",
114+
offsetY: 0,
115+
x: function(x) {
116+
return {
117+
"left": x + parseFloat(this.offsetX || 0)
118+
};
119+
},
120+
y: function(y) {
121+
return {
122+
"top": y + parseFloat(this.offsetY || 0)
123+
};
124+
}
125+
}
126+
}
127+
}
128+
```
129+
130+
**Online demos:**
131+
132+
- [Online plotter (tooltip)](http://zizhujy.com/plotter "Online plotter")
133+
- [Online Function Grapher (tooltip)](http://zizhujy.com/functiongrapher "Online Function Grapher")
134+
135+
**Screenshots:**
136+
137+
![Screenshot for jquery.flot.comment.js usage](images/screenshotForCommentPlugin.png "Screenshot for jquery.flot.comment.js usage")

‎examples/CommentExample.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,14 @@
2525
[7, 8]
2626
],
2727
[
28+
[-1, Math.sin(-1)],
29+
[0, Math.sin(0)],
2830
[1, Math.sin(1)],
2931
[2, Math.sin(2)],
3032
[3, Math.sin(3)],
31-
[4, Math.sin(4)]
33+
[4, Math.sin(4)],
34+
[5, Math.sin(5)],
35+
[6, Math.sin(6)]
3236
]
3337
];
3438

‎images/screenshotForCommentPlugin.png

36.7 KB
Loading

‎jquery.flot.comments.js

+136-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,139 @@
1-
;
1+
//jquery.flot.comments.js
2+
//=======================
3+
// Copyright (c) 2013 http://zizhujy.com.
4+
//
5+
//Flot plugin that shows extra comments to the flot chart. There are several types of comments:
6+
// - **tooltip**: Show the data point value (x, y) when mouse over a data point;
7+
//- **comment**: A callout style textbox that always shows at the specified position;
8+
//- **sidenote**: Texts that shows at the right side of the chart that only associated with the
9+
// y-axis coordinate.
10+
//
11+
// **Usage:**
12+
//
13+
//Inside the `<head></head>` area of your html page, add the following lines:
14+
//
15+
//```html
16+
//<script type="text/javascript" src="http://zizhujy.com/Scripts/flot/jquery.flot.comment.js"></script>
17+
//```
18+
//
19+
//pass your comments, sidenotes to the options object when you draw the flot chart by $.plot():
20+
//
21+
//```javascript
22+
//var options = {
23+
// comment: {
24+
// show: true
25+
// },
26+
// comments: [
27+
// {
28+
// x: -2,
29+
// y: 1,
30+
// contents: "this point 1"
31+
// },
32+
// ...
33+
// ],
34+
// sidenote: {
35+
// show: true
36+
// },
37+
// sidenotes: [
38+
// {
39+
// y: -4,
40+
// contents: "Low Level",
41+
// offsetX: 0,
42+
// offsetY: 0,
43+
// maxWidth: 0.15
44+
// },
45+
// ...
46+
// ]
47+
//};
48+
//
49+
//$.plot("#canvas-wrapper", data, options);
50+
//```
51+
//
52+
//**Online examples:**
53+
//
54+
//- [Comment Example](examples/CommentExample.html "Comment Example")
55+
//
56+
//**Dependencies:**
57+
//
58+
//- jquery.js
59+
//- jquery.colorhelpers.js
60+
//- jquery.flot.js
61+
//
62+
//**Customizations:**
63+
//
64+
//```javascript
65+
//options{
66+
// comment: {
67+
// "class": "jquery-flot-comment",
68+
// wrapperCss: {
69+
// "position": "absolute",
70+
// "display": "block",
71+
// "margin": "0",
72+
// "line-height": "1em",
73+
// "background-color": "transparent",
74+
// "color": "white",
75+
// "padding": "0",
76+
// "font-size": "xx-small",
77+
// "box-sizing": "border-box",
78+
// "text-align": "center"
79+
// },
80+
// notch: {
81+
// size: "5px"
82+
// },
83+
// htmlTemplate: function() {
84+
// return "<div class='{1}'><div class='callout' style='position: relative; margin: 0; padding: 0; background-color: #000; width: 1%\0 /* IE 8 width hack */; box-sizing: border-box; padding: 5px;'><div style='line-height: 1em; position: relative;'>{{0}}</div><b class='notch' style='position: absolute; bottom: -{0}; left: 50%; margin: 0 0 0 -{0}; border-top: {0} solid #000; border-left: {0} solid transparent; border-right: {0} solid transparent; border-bottom: 0; padding: 0; width: 0; height: 0; font-size: 0; line-height: 0; _border-right-color: pink; _border-left-color: pink; _filter: chroma(color=pink);'></b></div></div>".format(this.notch.size, this.class);
85+
// },
86+
// show: true,
87+
// position: {
88+
// offsetX: 0,
89+
// offsetY: 0,
90+
// x: function (x) {
91+
// return {
92+
// "left": x + parseFloat(this.offsetX || 0)
93+
// };
94+
// },
95+
// y: function (y) {
96+
// return {
97+
// "top": y + parseFloat(this.offsetY || 0)
98+
// };
99+
// }
100+
// }
101+
// },
102+
// sidenote: {
103+
// "class": "jquery-flot-sidenote",
104+
// wrapperCss: {
105+
// "position": "absolute",
106+
// "display": "block",
107+
// "line-height": "1.1em",
108+
// "margin": "0",
109+
// "font-size": "smaller"
110+
// },
111+
// maxWidth: 0.2, /* Width percentage of the whole chart width */
112+
// show: true,
113+
// position: {
114+
// offsetX: "5px",
115+
// offsetY: 0,
116+
// x: function(x) {
117+
// return {
118+
// "left": x + parseFloat(this.offsetX || 0)
119+
// };
120+
// },
121+
// y: function(y) {
122+
// return {
123+
// "top": y + parseFloat(this.offsetY || 0)
124+
// };
125+
// }
126+
// }
127+
// }
128+
//}
129+
//```
130+
//
131+
//**Online demos:**
132+
//
133+
//- [Online plotter (tooltip)](http://zizhujy.com/plotter "Online plotter")
134+
//- [Online Function Grapher (tooltip)](http://zizhujy.com/functiongrapher "Online Function Grapher")
135+
//
136+
;
2137

3138
// String extensions:
4139
if (!String.prototype.format) {

0 commit comments

Comments
 (0)