Skip to content

Commit f4defa6

Browse files
author
scottjehl
committed
initial commit
0 parents  commit f4defa6

15 files changed

+1879
-0
lines changed

‎css/basic.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* page styles */
2+
body { font-family: "Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif; }
3+
table { border-collapse: collapse; }
4+
td, th {
5+
text-align: center;
6+
border: 1px solid #ddd;
7+
padding:2px 5px;
8+
}
9+
10+
caption {margin: 0 0 .5em; font-weight: bold; }

‎css/visualize-dark.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* page styles */
2+
body { font-size:62.5%; }
3+
4+
/*demo styles*/
5+
table {width: 500px; height: 200px; margin-left: 30px; }
6+
table.accessHide { position: absolute; left: -999999px; }
7+
td, th { font-size: 1.2em; padding: 2px; width: 13%; }
8+
th { background-color:#f4f4f4; }
9+
caption { font-size: 1.5em; }
10+
11+
/*visualize extension styles*/
12+
.visualize { margin: 60px 0 0 30px; padding: 70px 40px 90px; background: #222 url(../images/chartbg.png) top repeat-x; border: 1px solid #000; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; }
13+
.visualize canvas { border: 1px solid #888; margin: -1px; background: #222; }
14+
.visualize-labels-x, .visualize-labels-y { top: 70px; left: 40px; z-index: 100; }
15+
.visualize-pie .visualize-labels { position: absolute; top: 70px; left: 40px; }
16+
.visualize-labels-x li span.label, .visualize-labels-y li span.label { color: #aaa; font-size: 1.3em; padding-right: 5px; }
17+
.visualize-labels-y li span.line { border-style: dotted; opacity: .6; }
18+
.visualize .visualize-info { border: 0; position: static; opacity: 1; background: none; }
19+
.visualize .visualize-title { position: absolute; top: 20px; color: #fff; margin-bottom: 0; left: 20px; font-size: 2.1em; font-weight: bold; }
20+
.visualize ul.visualize-key { position: absolute; bottom: 15px; background: #444; z-index: 10; padding: 10px 0; color: #aaa; width: 100%; left: 0; }
21+
.visualize ul.visualize-key li { font-size: 1.2em; margin-left: 20px; padding-left: 18px; }
22+
.visualize ul.visualize-key .visualize-key-color { width: 10px; height: 10px; margin-top: -4px; }
23+
.visualize ul.visualize-key .visualize-key-label { color: #fff; }
24+
25+
26+

‎css/visualize-light.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/* page styles */
2+
body { font-size:62.5%; }
3+
4+
/*demo styles*/
5+
table {width: 500px; height: 200px; margin-left: 30px; }
6+
table.accessHide { position: absolute; left: -999999px; }
7+
td, th { font-size: 1.2em; padding: 2px; width: 13%; }
8+
th { background-color:#f4f4f4; }
9+
caption { font-size: 1.5em; }
10+
11+
/*visualize extension styles*/
12+
.visualize { margin: 60px 0 0 30px; padding: 70px 40px 90px; background: #ccc url(../images/chartbg-vanilla.png) top repeat-x; border: 1px solid #ddd; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; }
13+
.visualize canvas { border: 1px solid #aaa; margin: -1px; background: #fff; }
14+
.visualize-labels-x, .visualize-labels-y { top: 70px; left: 40px; z-index: 100; }
15+
.visualize-pie .visualize-labels { position: absolute; top: 70px; left: 40px; }
16+
.visualize-labels-x li span.label, .visualize-labels-y li span.label { color: #444; font-size: 1.3em; padding-right: 5px; }
17+
.visualize-labels-y li span.line { border-style: solid; opacity: .7; }
18+
.visualize .visualize-info { border: 0; position: static; opacity: 1; background: none; }
19+
.visualize .visualize-title { position: absolute; top: 20px; color: #333; margin-bottom: 0; left: 20px; font-size: 2.1em; font-weight: bold; }
20+
.visualize ul.visualize-key { position: absolute; bottom: 15px; background: #eee; z-index: 10; padding: 10px 0; color: #aaa; width: 100%; left: 0; }
21+
.visualize ul.visualize-key li { font-size: 1.2em; margin-left: 20px; padding-left: 18px; }
22+
.visualize ul.visualize-key .visualize-key-color { width: 10px; height: 10px; margin-top: -4px; }
23+
.visualize ul.visualize-key .visualize-key-label { color: #333; }

‎css/visualize.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*plugin styles*/
2+
.visualize { border: 1px solid #888; position: relative; background: #fafafa; }
3+
.visualize canvas { position: absolute; }
4+
.visualize ul,.visualize li { margin: 0; padding: 0;}
5+
6+
/*table title, key elements*/
7+
.visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; position: absolute; top: -20px; right: 10px; opacity: .8; }
8+
.visualize .visualize-title { display: block; color: #333; margin-bottom: 3px; font-size: 1.1em; }
9+
.visualize ul.visualize-key { list-style: none; }
10+
.visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
11+
.visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px; }
12+
.visualize ul.visualize-key .visualize-key-label { color: #000; }
13+
14+
/*pie labels*/
15+
.visualize-pie .visualize-labels { list-style: none; }
16+
.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute; margin: 0; padding:0; }
17+
.visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; }
18+
.visualize-pie-outside .visualize-label { color: #000; font-weight: normal; }
19+
20+
/*line,bar, area labels*/
21+
.visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
22+
.visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
23+
.visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555; }
24+
.visualize-labels-x li span.line, .visualize-labels-y li span.line { position: absolute; border: 0 solid #ccc; }
25+
.visualize-labels-x li { height: 100%; }
26+
.visualize-labels-x li span.label { top: 100%; margin-top: 5px; }
27+
.visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
28+
.visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
29+
.visualize-labels-y li { width: 100%; }
30+
.visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
31+
.visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
32+
.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }

‎editable.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
5+
<title>Charting</title>
6+
<link href="css/basic.css" type="text/css" rel="stylesheet" />
7+
<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>
8+
<script type="text/javascript">
9+
// Run capabilities test
10+
enhance({
11+
loadScripts: [
12+
{src: 'js/excanvas.js', iecondition: 'all'},
13+
'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
14+
'js/visualize.jQuery.js',
15+
'js/example-editable.js'
16+
],
17+
loadStyles: [
18+
'css/visualize.css',
19+
'css/visualize-dark.css'
20+
]
21+
});
22+
</script>
23+
<style type="text/css">
24+
table { float: left; margin: 140px 40px 0 0; }
25+
td input { border: 1px solid orange; background: yellow; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: absolute; padding: 8px 0; text-align: center; width: 60px; margin: -17px 0 0 4px; font-size: 1.4em; }
26+
td.input { padding: 0; position: relative; }
27+
.visualize { float: left; }
28+
</style>
29+
</head>
30+
<body>
31+
32+
<table>
33+
<caption>2009 Employee Sales by Department</caption>
34+
<thead>
35+
<tr>
36+
<td></td>
37+
<th scope="col">food</th>
38+
<th scope="col">auto</th>
39+
<th scope="col">household</th>
40+
<th scope="col">furniture</th>
41+
<th scope="col">kitchen</th>
42+
<th scope="col">bath</th>
43+
</tr>
44+
</thead>
45+
<tbody>
46+
<tr>
47+
<th scope="row">Mary</th>
48+
<td>190</td>
49+
<td>160</td>
50+
<td>40</td>
51+
<td>120</td>
52+
<td>30</td>
53+
<td>70</td>
54+
</tr>
55+
<tr>
56+
<th scope="row">Tom</th>
57+
<td>3</td>
58+
<td>40</td>
59+
<td>30</td>
60+
<td>45</td>
61+
<td>35</td>
62+
<td>49</td>
63+
</tr>
64+
<tr>
65+
<th scope="row">Brad</th>
66+
<td>10</td>
67+
<td>180</td>
68+
<td>10</td>
69+
<td>85</td>
70+
<td>25</td>
71+
<td>79</td>
72+
</tr>
73+
<tr>
74+
<th scope="row">Kate</th>
75+
<td>40</td>
76+
<td>80</td>
77+
<td>90</td>
78+
<td>25</td>
79+
<td>15</td>
80+
<td>119</td>
81+
</tr>
82+
</tbody>
83+
</table>
84+
85+
</body>
86+
</html>

‎filtering.html

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
5+
<title>Charting subsets of table data - Visualize</title>
6+
<link href="css/basic.css" type="text/css" rel="stylesheet" />
7+
<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>
8+
<script type="text/javascript">
9+
// Run capabilities test
10+
enhance({
11+
loadScripts: [
12+
{src: 'js/excanvas.js', iecondition: 'all'},
13+
'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
14+
'js/visualize.jQuery.js',
15+
'js/example-filtering.js'
16+
],
17+
loadStyles: [
18+
'css/visualize.css',
19+
'css/visualize-dark.css'
20+
]
21+
});
22+
</script>
23+
<style type="text/css">
24+
/*some demo styles*/
25+
body { font-size: 62.5%; }
26+
.enhanced h2, .enhanced pre { margin: 3em 20px .5em; }
27+
.enhanced pre { width: 50%; overflow: auto; font-size: 1.4em; margin-top: 0; background: #444; padding: 15px; color: #fff; }
28+
</style>
29+
</head>
30+
<body>
31+
32+
<table >
33+
<caption>2009 Employee Sales by Department</caption>
34+
<thead>
35+
<tr>
36+
<td></td>
37+
<th scope="col">food</th>
38+
<th scope="col">auto</th>
39+
<th scope="col">household</th>
40+
<th scope="col">furniture</th>
41+
<th scope="col">kitchen</th>
42+
<th scope="col">bath</th>
43+
<th scope="col">Total</th>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
<tr>
48+
<th scope="row">Mary</th>
49+
<td>190</td>
50+
<td>160</td>
51+
<td>40</td>
52+
<td>120</td>
53+
<td>30</td>
54+
<td>70</td>
55+
<td>610</td>
56+
</tr>
57+
<tr>
58+
<th scope="row">Tom</th>
59+
<td>3</td>
60+
<td>40</td>
61+
<td>30</td>
62+
<td>45</td>
63+
<td>35</td>
64+
<td>49</td>
65+
<td>202</td>
66+
</tr>
67+
<tr>
68+
<th scope="row">Brad</th>
69+
<td>10</td>
70+
<td>180</td>
71+
<td>10</td>
72+
<td>85</td>
73+
<td>25</td>
74+
<td>79</td>
75+
<td>389</td>
76+
</tr>
77+
<tr>
78+
<th scope="row">Kate</th>
79+
<td>40</td>
80+
<td>80</td>
81+
<td>90</td>
82+
<td>25</td>
83+
<td>15</td>
84+
<td>119</td>
85+
<td>369</td>
86+
</tr>
87+
<tr>
88+
<th scope="row">Total</th>
89+
<td>243</td>
90+
<td>460</td>
91+
<td>170</td>
92+
<td>275</td>
93+
<td>105</td>
94+
<td>317</td>
95+
<td>1570</td>
96+
</tr>
97+
</tbody>
98+
</table>
99+
100+
</body>
101+
</html>

‎images/chartbg-vanilla.png

3.55 KB
Loading

‎images/chartbg.png

3.34 KB
Loading

‎index.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
5+
<title>Charting</title>
6+
<link href="css/basic.css" type="text/css" rel="stylesheet" />
7+
<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>
8+
<script type="text/javascript">
9+
// Run capabilities test
10+
enhance({
11+
loadScripts: [
12+
{src: 'js/excanvas.js', iecondition: 'all'},
13+
'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
14+
'js/visualize.jQuery.js',
15+
'js/example.js'
16+
],
17+
loadStyles: [
18+
'css/visualize.css',
19+
'css/visualize-dark.css'
20+
]
21+
});
22+
</script>
23+
</head>
24+
<body>
25+
26+
<table >
27+
<caption>2009 Employee Sales by Department</caption>
28+
<thead>
29+
<tr>
30+
<td></td>
31+
<th scope="col">food</th>
32+
<th scope="col">auto</th>
33+
<th scope="col">household</th>
34+
<th scope="col">furniture</th>
35+
<th scope="col">kitchen</th>
36+
<th scope="col">bath</th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
<tr>
41+
<th scope="row">Mary</th>
42+
<td>190</td>
43+
<td>160</td>
44+
<td>40</td>
45+
<td>120</td>
46+
<td>30</td>
47+
<td>70</td>
48+
</tr>
49+
<tr>
50+
<th scope="row">Tom</th>
51+
<td>3</td>
52+
<td>40</td>
53+
<td>30</td>
54+
<td>45</td>
55+
<td>35</td>
56+
<td>49</td>
57+
</tr>
58+
<tr>
59+
<th scope="row">Brad</th>
60+
<td>10</td>
61+
<td>180</td>
62+
<td>10</td>
63+
<td>85</td>
64+
<td>25</td>
65+
<td>79</td>
66+
</tr>
67+
<tr>
68+
<th scope="row">Kate</th>
69+
<td>40</td>
70+
<td>80</td>
71+
<td>90</td>
72+
<td>25</td>
73+
<td>15</td>
74+
<td>119</td>
75+
</tr>
76+
</tbody>
77+
</table>
78+
79+
</body>
80+
</html>

‎js/example-editable.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
//make table editable, refresh charts on blur$(function(){
3+
$(function(){
4+
$('table').visualize({type: 'pie', height: '300px', width: '420px'});
5+
6+
$('table td')
7+
.click(function(){
8+
if( !$(this).is('.input') ){
9+
$(this).addClass('input')
10+
.html('<input type="text" value="'+ $(this).text() +'" />')
11+
.find('input').focus()
12+
.blur(function(){
13+
//remove td class, remove input
14+
$(this).parent().removeClass('input').html($(this).val() || 0);
15+
//update charts
16+
$('.visualize').trigger('visualizeRefresh');
17+
});
18+
}
19+
})
20+
.hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); });
21+
});

0 commit comments

Comments
 (0)