Permalink
Browse files

initial commit

  • Loading branch information...
0 parents commit f4defa6c12b46241dadd0839c651b10b25e387da scottjehl committed Nov 29, 2010
@@ -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; }
@@ -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; }
+
+
+
@@ -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; }
@@ -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; }
@@ -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>
@@ -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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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>
@@ -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.

0 comments on commit f4defa6

Please sign in to comment.