forked from filamentgroup/jQuery-Visualize
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
scottjehl
committed
Nov 29, 2010
0 parents
commit f4defa6
Showing
15 changed files
with
1,879 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
/* page styles */ | ||
body { font-family: "Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif; } | ||
table { border-collapse: collapse; } | ||
td, th { | ||
text-align: center; | ||
border: 1px solid #ddd; | ||
padding:2px 5px; | ||
} | ||
|
||
caption {margin: 0 0 .5em; font-weight: bold; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
/* page styles */ | ||
body { font-size:62.5%; } | ||
|
||
/*demo styles*/ | ||
table {width: 500px; height: 200px; margin-left: 30px; } | ||
table.accessHide { position: absolute; left: -999999px; } | ||
td, th { font-size: 1.2em; padding: 2px; width: 13%; } | ||
th { background-color:#f4f4f4; } | ||
caption { font-size: 1.5em; } | ||
|
||
/*visualize extension styles*/ | ||
.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; } | ||
.visualize canvas { border: 1px solid #888; margin: -1px; background: #222; } | ||
.visualize-labels-x, .visualize-labels-y { top: 70px; left: 40px; z-index: 100; } | ||
.visualize-pie .visualize-labels { position: absolute; top: 70px; left: 40px; } | ||
.visualize-labels-x li span.label, .visualize-labels-y li span.label { color: #aaa; font-size: 1.3em; padding-right: 5px; } | ||
.visualize-labels-y li span.line { border-style: dotted; opacity: .6; } | ||
.visualize .visualize-info { border: 0; position: static; opacity: 1; background: none; } | ||
.visualize .visualize-title { position: absolute; top: 20px; color: #fff; margin-bottom: 0; left: 20px; font-size: 2.1em; font-weight: bold; } | ||
.visualize ul.visualize-key { position: absolute; bottom: 15px; background: #444; z-index: 10; padding: 10px 0; color: #aaa; width: 100%; left: 0; } | ||
.visualize ul.visualize-key li { font-size: 1.2em; margin-left: 20px; padding-left: 18px; } | ||
.visualize ul.visualize-key .visualize-key-color { width: 10px; height: 10px; margin-top: -4px; } | ||
.visualize ul.visualize-key .visualize-key-label { color: #fff; } | ||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
/* page styles */ | ||
body { font-size:62.5%; } | ||
|
||
/*demo styles*/ | ||
table {width: 500px; height: 200px; margin-left: 30px; } | ||
table.accessHide { position: absolute; left: -999999px; } | ||
td, th { font-size: 1.2em; padding: 2px; width: 13%; } | ||
th { background-color:#f4f4f4; } | ||
caption { font-size: 1.5em; } | ||
|
||
/*visualize extension styles*/ | ||
.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; } | ||
.visualize canvas { border: 1px solid #aaa; margin: -1px; background: #fff; } | ||
.visualize-labels-x, .visualize-labels-y { top: 70px; left: 40px; z-index: 100; } | ||
.visualize-pie .visualize-labels { position: absolute; top: 70px; left: 40px; } | ||
.visualize-labels-x li span.label, .visualize-labels-y li span.label { color: #444; font-size: 1.3em; padding-right: 5px; } | ||
.visualize-labels-y li span.line { border-style: solid; opacity: .7; } | ||
.visualize .visualize-info { border: 0; position: static; opacity: 1; background: none; } | ||
.visualize .visualize-title { position: absolute; top: 20px; color: #333; margin-bottom: 0; left: 20px; font-size: 2.1em; font-weight: bold; } | ||
.visualize ul.visualize-key { position: absolute; bottom: 15px; background: #eee; z-index: 10; padding: 10px 0; color: #aaa; width: 100%; left: 0; } | ||
.visualize ul.visualize-key li { font-size: 1.2em; margin-left: 20px; padding-left: 18px; } | ||
.visualize ul.visualize-key .visualize-key-color { width: 10px; height: 10px; margin-top: -4px; } | ||
.visualize ul.visualize-key .visualize-key-label { color: #333; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
/*plugin styles*/ | ||
.visualize { border: 1px solid #888; position: relative; background: #fafafa; } | ||
.visualize canvas { position: absolute; } | ||
.visualize ul,.visualize li { margin: 0; padding: 0;} | ||
|
||
/*table title, key elements*/ | ||
.visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; position: absolute; top: -20px; right: 10px; opacity: .8; } | ||
.visualize .visualize-title { display: block; color: #333; margin-bottom: 3px; font-size: 1.1em; } | ||
.visualize ul.visualize-key { list-style: none; } | ||
.visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;} | ||
.visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px; } | ||
.visualize ul.visualize-key .visualize-key-label { color: #000; } | ||
|
||
/*pie labels*/ | ||
.visualize-pie .visualize-labels { list-style: none; } | ||
.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute; margin: 0; padding:0; } | ||
.visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; } | ||
.visualize-pie-outside .visualize-label { color: #000; font-weight: normal; } | ||
|
||
/*line,bar, area labels*/ | ||
.visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; } | ||
.visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; } | ||
.visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555; } | ||
.visualize-labels-x li span.line, .visualize-labels-y li span.line { position: absolute; border: 0 solid #ccc; } | ||
.visualize-labels-x li { height: 100%; } | ||
.visualize-labels-x li span.label { top: 100%; margin-top: 5px; } | ||
.visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; } | ||
.visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/ | ||
.visualize-labels-y li { width: 100%; } | ||
.visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; } | ||
.visualize-labels-y li span.line { border-top-width: 1px; width: 100%; } | ||
.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> | ||
<title>Charting</title> | ||
<link href="css/basic.css" type="text/css" rel="stylesheet" /> | ||
<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script> | ||
<script type="text/javascript"> | ||
// Run capabilities test | ||
enhance({ | ||
loadScripts: [ | ||
{src: 'js/excanvas.js', iecondition: 'all'}, | ||
'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', | ||
'js/visualize.jQuery.js', | ||
'js/example-editable.js' | ||
], | ||
loadStyles: [ | ||
'css/visualize.css', | ||
'css/visualize-dark.css' | ||
] | ||
}); | ||
</script> | ||
<style type="text/css"> | ||
table { float: left; margin: 140px 40px 0 0; } | ||
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; } | ||
td.input { padding: 0; position: relative; } | ||
.visualize { float: left; } | ||
</style> | ||
</head> | ||
<body> | ||
|
||
<table> | ||
<caption>2009 Employee Sales by Department</caption> | ||
<thead> | ||
<tr> | ||
<td></td> | ||
<th scope="col">food</th> | ||
<th scope="col">auto</th> | ||
<th scope="col">household</th> | ||
<th scope="col">furniture</th> | ||
<th scope="col">kitchen</th> | ||
<th scope="col">bath</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<th scope="row">Mary</th> | ||
<td>190</td> | ||
<td>160</td> | ||
<td>40</td> | ||
<td>120</td> | ||
<td>30</td> | ||
<td>70</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">Tom</th> | ||
<td>3</td> | ||
<td>40</td> | ||
<td>30</td> | ||
<td>45</td> | ||
<td>35</td> | ||
<td>49</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">Brad</th> | ||
<td>10</td> | ||
<td>180</td> | ||
<td>10</td> | ||
<td>85</td> | ||
<td>25</td> | ||
<td>79</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">Kate</th> | ||
<td>40</td> | ||
<td>80</td> | ||
<td>90</td> | ||
<td>25</td> | ||
<td>15</td> | ||
<td>119</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> | ||
<title>Charting subsets of table data - Visualize</title> | ||
<link href="css/basic.css" type="text/css" rel="stylesheet" /> | ||
<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script> | ||
<script type="text/javascript"> | ||
// Run capabilities test | ||
enhance({ | ||
loadScripts: [ | ||
{src: 'js/excanvas.js', iecondition: 'all'}, | ||
'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', | ||
'js/visualize.jQuery.js', | ||
'js/example-filtering.js' | ||
], | ||
loadStyles: [ | ||
'css/visualize.css', | ||
'css/visualize-dark.css' | ||
] | ||
}); | ||
</script> | ||
<style type="text/css"> | ||
/*some demo styles*/ | ||
body { font-size: 62.5%; } | ||
.enhanced h2, .enhanced pre { margin: 3em 20px .5em; } | ||
.enhanced pre { width: 50%; overflow: auto; font-size: 1.4em; margin-top: 0; background: #444; padding: 15px; color: #fff; } | ||
</style> | ||
</head> | ||
<body> | ||
|
||
<table > | ||
<caption>2009 Employee Sales by Department</caption> | ||
<thead> | ||
<tr> | ||
<td></td> | ||
<th scope="col">food</th> | ||
<th scope="col">auto</th> | ||
<th scope="col">household</th> | ||
<th scope="col">furniture</th> | ||
<th scope="col">kitchen</th> | ||
<th scope="col">bath</th> | ||
<th scope="col">Total</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<th scope="row">Mary</th> | ||
<td>190</td> | ||
<td>160</td> | ||
<td>40</td> | ||
<td>120</td> | ||
<td>30</td> | ||
<td>70</td> | ||
<td>610</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">Tom</th> | ||
<td>3</td> | ||
<td>40</td> | ||
<td>30</td> | ||
<td>45</td> | ||
<td>35</td> | ||
<td>49</td> | ||
<td>202</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">Brad</th> | ||
<td>10</td> | ||
<td>180</td> | ||
<td>10</td> | ||
<td>85</td> | ||
<td>25</td> | ||
<td>79</td> | ||
<td>389</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">Kate</th> | ||
<td>40</td> | ||
<td>80</td> | ||
<td>90</td> | ||
<td>25</td> | ||
<td>15</td> | ||
<td>119</td> | ||
<td>369</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">Total</th> | ||
<td>243</td> | ||
<td>460</td> | ||
<td>170</td> | ||
<td>275</td> | ||
<td>105</td> | ||
<td>317</td> | ||
<td>1570</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
|
||
</body> | ||
</html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> | ||
<title>Charting</title> | ||
<link href="css/basic.css" type="text/css" rel="stylesheet" /> | ||
<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script> | ||
<script type="text/javascript"> | ||
// Run capabilities test | ||
enhance({ | ||
loadScripts: [ | ||
{src: 'js/excanvas.js', iecondition: 'all'}, | ||
'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', | ||
'js/visualize.jQuery.js', | ||
'js/example.js' | ||
], | ||
loadStyles: [ | ||
'css/visualize.css', | ||
'css/visualize-dark.css' | ||
] | ||
}); | ||
</script> | ||
</head> | ||
<body> | ||
|
||
<table > | ||
<caption>2009 Employee Sales by Department</caption> | ||
<thead> | ||
<tr> | ||
<td></td> | ||
<th scope="col">food</th> | ||
<th scope="col">auto</th> | ||
<th scope="col">household</th> | ||
<th scope="col">furniture</th> | ||
<th scope="col">kitchen</th> | ||
<th scope="col">bath</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<th scope="row">Mary</th> | ||
<td>190</td> | ||
<td>160</td> | ||
<td>40</td> | ||
<td>120</td> | ||
<td>30</td> | ||
<td>70</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">Tom</th> | ||
<td>3</td> | ||
<td>40</td> | ||
<td>30</td> | ||
<td>45</td> | ||
<td>35</td> | ||
<td>49</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">Brad</th> | ||
<td>10</td> | ||
<td>180</td> | ||
<td>10</td> | ||
<td>85</td> | ||
<td>25</td> | ||
<td>79</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">Kate</th> | ||
<td>40</td> | ||
<td>80</td> | ||
<td>90</td> | ||
<td>25</td> | ||
<td>15</td> | ||
<td>119</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
|
||
//make table editable, refresh charts on blur$(function(){ | ||
$(function(){ | ||
$('table').visualize({type: 'pie', height: '300px', width: '420px'}); | ||
|
||
$('table td') | ||
.click(function(){ | ||
if( !$(this).is('.input') ){ | ||
$(this).addClass('input') | ||
.html('<input type="text" value="'+ $(this).text() +'" />') | ||
.find('input').focus() | ||
.blur(function(){ | ||
//remove td class, remove input | ||
$(this).parent().removeClass('input').html($(this).val() || 0); | ||
//update charts | ||
$('.visualize').trigger('visualizeRefresh'); | ||
}); | ||
} | ||
}) | ||
.hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }); | ||
}); |
Oops, something went wrong.