1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| $(document).ready(function () {
| $('#sales').css({
| height: '200px',
| width: 'auto'
| });
|
| var monitors = [[1, 200], [2, 258], [3, 121], [4, 132], [5, 126], [6, 189], [7, 358], [8, 234], [9, 201], [10, 160], [11, 180], [12, 195], [13, 232], [14, 233], [15, 212]];
| var memory = [[1, 356], [2, 345], [3, 452], [4, 345], [5, 325], [6, 424], [7, 478], [8, 464], [9, 558], [10, 443], [11, 562], [12, 535], [13, 342], [14, 348], [15, 402]];
|
| var plot = $.plot($("#sales"), [
| { label: "Monitors", data: monitors },
| { label: "Memory", data: memory }
| ], {
| lines: {
| show: true
| },
| points: {
| show: true
| },
| grid: {
| backgroundColor: '#fffaff',
| hoverable: true,
| clickable: true
| },
| legend: {
| show: false
| }
| });
|
| function showTooltip(x, y, contents) {
| $('<div id="tooltip">' + contents + '</div>').css({
| position: 'absolute',
| display: 'none',
| top: y + -36,
| left: x + -6,
| border: '1px solid #fdd',
| padding: '4px',
| 'background-color': '#fee',
| opacity: 0.80
| }).appendTo("body").fadeIn(200);
| }
|
| var previousPoint = null;
|
| $("#sales").bind("plothover", function (event, pos, item) {
| $("#x").text(pos.x.toFixed(2));
| $("#y").text(pos.y.toFixed(2));
|
| if (item) {
| if (previousPoint != item.datapoint) {
| previousPoint = item.datapoint;
|
| $("#tooltip").remove();
| var x = item.datapoint[0].toFixed(2),
| y = item.datapoint[1].toFixed(2);
|
| showTooltip(item.pageX, item.pageY, Math.round(y) + " " + item.series.label);
| }
| }
| else {
| $("#tooltip").remove();
| previousPoint = null;
| }
| });
| });
|
|
