forked from gwatts/jquery.sparkline
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsample.html
128 lines (114 loc) · 6.36 KB
/
sample.html
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<style>
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="dist/jquery.sparkline.js"></script>
<script type="text/javascript">
$(function() {
/** This code runs when everything has been loaded on the page */
/* Inline sparklines take their values from the contents of the tag */
$('.inlinesparkline').sparkline();
/* Sparklines can also take their values from the first argument
passed to the sparkline() function */
var myvalues = [[100,80,50,70,40,40,10], [90,40,20,60,80,20,19]];
$('.dynamicsparkline').sparkline(myvalues);
/* The second argument gives options such as chart type */
$('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );
/* Use 'html' instead of an array of values to pass options
to a sparkline with data in the tag */
$('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
// ROLL MY OWN
/** Timeline sparkline chart
* Given a list of events with begin/finish times, graph them horizontally by event type.
* events = [
* {s:11, e:12, t:'meeting'},
* {s:12, e:13, t:'lunch'},
* {s:13, e:18, t:'work'}
* ]
* colors = [meeting: 'red', lunch: 'green', work: 'blue', 'default': 'white']
* let 1 pixel = 1 minute
* let 8 am be the sparkline start
* let 8 pm be the sparkline stop
* let 720 pixels be the total duration
* so 8 to 11 is 3 hours * 60 = 180 minutes
* so 11 to 12 is 1 hour * 60 = 60 minutes
* so 12 to 13 is 1 hour * 60 = 60 minutes
* so 13 to 18 is 5 hours * 60 = 300 minutes
* so 18 to 20 is 2 hours * 60 = 120 minutes
* then graph
* |white for 180 pixels||red for 60 pixels||green for 60 pixels||blue for 300 pixels||white for 120 pixels|
*/
var options = {
type: 'timeline',
begin: new Date(2013, 1, 1, 0, 0),
finish: new Date(2013, 1, 1, 23, 59),
// interval in minutes to modulate time markers
timeMarkInterval: 30,
init: function (userData, index) {
// return the region data used to render timeline segment and tooltip data
// begin and finish fields should be a Date (or a number of miliseconds since epoch)
// {begin: <Date>, finish: <Date>, color: <String>, title: <String>}
userData.duration = ((userData.finish.getHours() * 60) + userData.finish.getMinutes()) -
((userData.begin.getHours() * 60) + userData.begin.getMinutes());
return userData;
},
tooltipFormat: $.spformat('<span style="color: {{color}}">●</span> <span style="color: {{color}}">{{duration}} min</span>: {{title}}'),
lineColor: 'white',
fillColor: '#eee',
// chose width/height in multiples of timeMarkInterval + 1 for best results with time marks
//orientation: 'vertical', width: 25, height: 241,
orientation: 'horizontal', width: 241, height: 10,
};
var data1 = [
{begin: new Date(2013, 1, 1, 1, 0), finish: new Date(2013, 1, 1, 2, 15), color: '#c75f61', title: 'One Event'},
{begin: new Date(2013, 1, 1, 7, 0), finish: new Date(2013, 1, 1, 8, 30), color: '#bc74e0', title: 'Two Event'},
{begin: new Date(2013, 1, 1, 15, 0), finish: new Date(2013, 1, 1, 18, 0), color: '#BF3030', title: 'Overlapping'},
{begin: new Date(2013, 1, 1, 11, 0), finish: new Date(2013, 1, 1, 12, 0), color: '#d9ce71', title: 'Three Event'},
{begin: new Date(2013, 1, 1, 12, 0), finish: new Date(2013, 1, 1, 13, 0), color: '#7dd16d', title: 'Lunch Event'},
{begin: new Date(2013, 1, 1, 12, 30), finish: new Date(2013, 1, 1, 13, 0), color: '#A60101', title: 'Overlapping'},
{begin: new Date(2013, 1, 1, 13, 0), finish: new Date(2013, 1, 1, 18, 0), color: '#78b6e5', title: 'Four Event'},
{begin: new Date(2013, 1, 1, 18, 0), finish: new Date(2013, 1, 1, 19, 30), color: '', title: 'Default Color'},
{begin: new Date(2013, 1, 1, 20, 45), finish: new Date(2013, 1, 1, 22, 30), color: 'yellow', title: 'Named Color'},
];
var data2 = [
{begin: new Date(2013, 1, 1, 1, 0), finish: new Date(2013, 1, 1, 2, 15), color: '#c75f61', title: 'One Event'},
{begin: new Date(2013, 1, 1, 7, 0), finish: new Date(2013, 1, 1, 8, 30), color: '#bc74e0', title: 'Two Event'},
{begin: new Date(2013, 1, 1, 15, 0), finish: new Date(2013, 1, 1, 18, 0), color: '#BF3030', title: 'Overlapping'},
{begin: new Date(2013, 1, 1, 11, 0), finish: new Date(2013, 1, 1, 12, 0), color: '#d9ce71', title: 'Three Event'},
{begin: new Date(2013, 1, 1, 12, 0), finish: new Date(2013, 1, 1, 13, 0), color: '#7dd16d', title: 'Lunch Event'},
{begin: new Date(2013, 1, 1, 12, 30), finish: new Date(2013, 1, 1, 13, 0), color: '#A60101', title: 'Overlapping'},
{begin: new Date(2013, 1, 1, 13, 0), finish: new Date(2013, 1, 1, 18, 0), color: '#78b6e5', title: 'Four Event'},
{begin: new Date(2013, 1, 1, 18, 0), finish: new Date(2013, 1, 1, 19, 30), color: '', title: 'Default Color'},
{begin: new Date(2013, 1, 1, 20, 45), finish: new Date(2013, 1, 1, 22, 30), color: 'yellow', title: 'Named Color'},
];
/* The second argument gives options such as chart type */
$('.timeline1').sparkline(data1, options);
options.lineColor = '#578577'
options.timeMarkInterval = 0;
$('.timeline2').sparkline(data2, options);
});
</script>
</head>
<body>
<p>
Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<p>
Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>
</p>
<p>
Bar chart with dynamic data: <span class="dynamicbar">Loading..</span>
</p>
<p>
Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span>
</p>
<p>
Timeline chart with time marks: <span class="timeline1">Loading..</span>
</p>
<p>
Timeline chart without time marks: <div class="timeline2" style="background-color:#578577;line-height:1px;display:inline-block;">Loading..</div>
</p>
</body>
</html>