Permalink
Browse files

Added interaction example.

  • Loading branch information...
1 parent 87c59c8 commit d5173a38a095bf24fcec9652d274650a0c7656e8 @irae committed May 24, 2010
Showing with 97 additions and 1 deletion.
  1. +5 −1 css/visualize.css
  2. +1 −0 index.html
  3. +91 −0 interactive.html
View
@@ -29,4 +29,8 @@
.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; }
+.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }
+
+/* tooltip */
+.visualize-tooltip {background:#fff;padding:3px;border:1px solid black;}
+.visualize-tooltip p {margin:0;}
View
@@ -20,6 +20,7 @@
</head>
<body>
<h1>jQuery Visualize demos</h1>
+<p><a href="interaction.html">See also with interaction</a></p>
<h2>Charts from the same data</h2>
View
@@ -0,0 +1,91 @@
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Interaction demo page</title>
+ <link type="text/css" rel="stylesheet" href="css/visualize.css"/>
+ <!-- <link type="text/css" rel="stylesheet" href="css/visualize-dark.css"/> -->
+ <link type="text/css" rel="stylesheet" href="demopage.css"/>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+ <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
+ <script type="text/javascript" src="visualize.jQuery.js"></script>
+ <script src="tooltip.visualize.jQuery.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+ $(function(){
+ //make some charts
+ $('table.pie').visualize({
+ type: 'pie',
+ pieMargin: 10,
+ title: '2009 Total Sales by Individual',
+ interaction: true,
+ tooltip: true
+ });
+ $('table.line').visualize({
+ type: 'line',
+ lineDots: 'double',
+ interaction: true,
+ tooltip: true
+ });
+ });
+ </script>
+ </head>
+ <body>
+<h1>jQuery Visualize demos</h1>
+<p><a href="index.html">Return to basic demos.</a></p>
+
+<h2>Charts from the same data</h2>
+
+<table class="pie line">
+ <caption>2009 Employee Sales by Department</caption>
+ <thead>
+ <tr>
+ <td></td>
+ <th>food</th>
+ <th>auto</th>
+ <th>household</th>
+ <th>furniture</th>
+ <th>kitchen</th>
+ <th>bath</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>Mary</th>
+ <td>190</td>
+ <td>0</td>
+ <td>40</td>
+ <td>120</td>
+ <td>30</td>
+ <td>-70</td>
+ </tr>
+ <tr>
+ <th>Tom</th>
+ <td>-3</td>
+ <td>40</td>
+ <td>30</td>
+ <td>45</td>
+ <td>35</td>
+ <td>49</td>
+ </tr>
+ <tr>
+ <th>Brad</th>
+ <td>10</td>
+ <td>180</td>
+ <td>10</td>
+ <td>85</td>
+ <td>25</td>
+ <td>79</td>
+ </tr>
+ <tr>
+ <th>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 comments on commit d5173a3

Please sign in to comment.