Permalink
Browse files

add more examples

  • Loading branch information...
1 parent ebcaf5a commit 871c055c2976863cc52a9f060da324614fcd8eb5 @eads committed Jul 26, 2012
Showing with 190 additions and 0 deletions.
  1. +190 −0 examples/big-chart.html
View
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <title>jQuery Tablechart plugin examples</title>
+
+ <script src="../lib/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
+ <script src="../lib/jqplot/excanvas.min.js" type="text/javascript"></script>
+ <script src="../lib/jqplot/jquery.jqplot.min.js" type="text/javascript"></script>
+ <script src="../lib/jqplot/plugins/jqplot.categoryAxisRenderer.js" type="text/javascript"></script>
+ <script src="../lib/jqplot/plugins/jqplot.barRenderer.js" type="text/javascript"></script>
+ <script src="../lib/jqplot/plugins/jqplot.pointLabels.js" type="text/javascript"></script>
+ <script src="../lib/jqplot/plugins/jqplot.highlighter.js" type="text/javascript"></script>
+ <script src="../jquery.tablechart.js" type="text/javascript"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
+ <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="../lib/jqplot/jquery.jqplot.min.css" />
+
+ <script type="text/javascript">
+ (function($) {
+ function updateTable(scale) {
+ $('#animate-formula tbody tr').each(function(i) {
+ var flip = 1;
+ $('td', this).each(function(j) {
+ var flip = (flip) ? -1 : 1;
+ var num = parseFloat(this.innerText);
+ if (j === 0) {
+ $(this).text( num + (flip * Math.random()) );
+ }
+ if (j === 1) {
+ $(this).text( num + 0.2 + (flip * Math.sin(num)) );
+ }
+ if (j === 2) {
+ $(this).text( num - (flip * Math.random()) );
+ }
+ if (j === 3) {
+ $(this).text( num );
+ }
+ });
+
+ });
+ }
+ function createTable() {
+ var tbody = $('#animate-formula').find('tbody');
+ var i = 0;
+ while (i < 25) {
+ var row = $('<tr>').appendTo(tbody).append('<th>' + i + '</th>').append('<td>').append('<td>').append('<td>');
+ i += 1;
+ }
+ $('#animate-formula tbody tr').each(function(i) {
+ $('td', this).each(function(j) {
+ var num = Math.random() * 5;
+ if (j === 0) {
+ //$(this).text( (scale + 1) * -2 * Math.cos( i / Math.PI ) );
+ $(this).text( num );
+ }
+ if (j === 1) {
+ $(this).text( num + 1.5 );
+ }
+ if (j === 2) {
+ $(this).text( num + 4.5 + Math.sqrt(num) );
+ }
+ if (j === 3) {
+ $(this).text( num + 7.5 + Math.sqrt(num) );
+ }
+ });
+ });
+ }
+
+ $(document).ready(function() {
+
+ $('#slider').slider({
+ min: 0,
+ max: 10,
+ step: 0.4,
+ slide: function(event, ui) {
+ updateTable(ui.value);
+ $('#animate-formula').tablechart();
+ }
+ });
+
+ createTable();
+ updateTable(0);
+ $('#animate-formula').tablechart({
+ //parseX: Tablechart.parseFloat,
+ plotOptions: {
+ stackSeries : true,
+ seriesDefaults: {
+ lineWidth : 4.5,
+ fill: true,
+ fillAndStroke: true,
+ fillAlpha: '0.1',
+ markerOptions: {
+ lineWidth: 0,
+ color: '#ffffff',
+ size: 3.75
+ }
+ },
+ grid: {
+ borderWidth: 0.5
+ },
+ axes: {
+ yaxis: {
+ min: 0,
+ max: 30,
+ numberTicks: 5,
+ tickOptions: {
+ formatString: '%.1f',
+ }
+ }
+ },
+ highlighter: {
+ show: true,
+ showTooltip: true,
+ sizeAdjust: 10,
+ tooltipLocation: 'n',
+ tooltipAxes: 'y'
+ }
+ }
+ });
+
+ });
+ })(jQuery);
+ </script>
+
+ <style>
+ body {
+ width: 75%;
+ padding: 0 20px;
+ font-family: Helvetica,Arial,sans-serif;
+ }
+ pre {
+ background-color: #eee;
+ padding: 5px 10px;
+ border: 1px dotted #555;
+ margin-bottom: 21px;
+ }
+ table.data {
+ min-width: 250px;
+ margin-bottom: 21px;
+ }
+ table.data caption {
+ border-bottom: 1px dotted #777;
+ }
+ table.data td, table.data th {
+ text-align: center;
+ padding: 3px 8px;
+ border: 1px solid #fff;
+ }
+ table.data tbody td, table.data tbody th {
+ background-color: #ddd;
+ }
+ .tablechart {
+ margin-bottom: 21px;
+ }
+ h2 {
+ margin-top: 60px;
+ border-bottom: 1px dotted #777;
+ }
+ .tablechart {
+ width: 100%;
+ height: 500px;
+ }
+ #slider {
+ width: 100%;
+ }
+ </style>
+</head>
+
+<body>
+
+<h2>Slider control</h2>
+
+<div id="slider"></div>
+
+<table id="animate-formula" style="display: none;">
+ <thead>
+ <tr>
+ <th>x</th>
+ <th>fn(1)</th>
+ <th>fn(2)</th>
+ <th>fn(3)</th>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+</table>
+
+</body>
+</html>

0 comments on commit 871c055

Please sign in to comment.