Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
scottjehl committed Nov 29, 2010
0 parents commit f4defa6
Show file tree
Hide file tree
Showing 15 changed files with 1,879 additions and 0 deletions.
10 changes: 10 additions & 0 deletions css/basic.css
@@ -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; }
26 changes: 26 additions & 0 deletions css/visualize-dark.css
@@ -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; }



23 changes: 23 additions & 0 deletions css/visualize-light.css
@@ -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; }
32 changes: 32 additions & 0 deletions css/visualize.css
@@ -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; }
86 changes: 86 additions & 0 deletions editable.html
@@ -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>
101 changes: 101 additions & 0 deletions filtering.html
@@ -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>
Binary file added images/chartbg-vanilla.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/chartbg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
80 changes: 80 additions & 0 deletions index.html
@@ -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>
21 changes: 21 additions & 0 deletions js/example-editable.js
@@ -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'); });
});

0 comments on commit f4defa6

Please sign in to comment.