From 86efa631b4fce92dfab2a56eee1a8b23669de6d0 Mon Sep 17 00:00:00 2001
From: johnkiernander <jkiernander@pmsi-consulting.com>
Date: Mon, 28 Apr 2014 23:22:12 +0100
Subject: [PATCH] New Examples

---
 adhoc/adhoc_bar_custom_tooltips.html          | 22 +++++++++
 adhoc/adhoc_bar_labels.html                   | 47 +++++++++++++++++++
 .../adhoc_bar_scroll.html                     |  2 +-
 .../adhoc_bounce_stagger.html                 |  2 +-
 adhoc/adhoc_composite_axis_category.html      | 22 +++++++++
 adhoc/adhoc_composite_axis_measure.html       | 20 ++++++++
 adhoc/adhoc_dual_axis.html                    | 19 ++++++++
 examples/advanced_bar_scroll.html             | 35 --------------
 examples/advanced_elastic_bubbles.html        | 23 ---------
 ...d_bounce_stagger.html => lines_curvy.html} | 13 +++--
 .../templates/advanced_elastic_bubbles.html   | 20 --------
 examples/templates/lines_curvy.html           | 19 ++++++++
 12 files changed, 157 insertions(+), 87 deletions(-)
 create mode 100644 adhoc/adhoc_bar_custom_tooltips.html
 create mode 100644 adhoc/adhoc_bar_labels.html
 rename examples/templates/advanced_bar_scroll.html => adhoc/adhoc_bar_scroll.html (96%)
 rename examples/templates/advanced_bounce_stagger.html => adhoc/adhoc_bounce_stagger.html (93%)
 create mode 100644 adhoc/adhoc_composite_axis_category.html
 create mode 100644 adhoc/adhoc_composite_axis_measure.html
 create mode 100644 adhoc/adhoc_dual_axis.html
 delete mode 100644 examples/advanced_bar_scroll.html
 delete mode 100644 examples/advanced_elastic_bubbles.html
 rename examples/{advanced_bounce_stagger.html => lines_curvy.html} (70%)
 delete mode 100644 examples/templates/advanced_elastic_bubbles.html
 create mode 100644 examples/templates/lines_curvy.html

diff --git a/adhoc/adhoc_bar_custom_tooltips.html b/adhoc/adhoc_bar_custom_tooltips.html
new file mode 100644
index 00000000..43c06521
--- /dev/null
+++ b/adhoc/adhoc_bar_custom_tooltips.html
@@ -0,0 +1,22 @@
+<div id="chartContainer">
+    <script src="/lib/d3.v3.min.js"></script>
+    <script src="/dist/dimple.v2.0.0.js"></script>
+    <script type="text/javascript">
+        var svg = dimple.newSvg("#chartContainer", 590, 400);
+        d3.tsv("/data/example_data.tsv", function (data) {
+            var myChart = new dimple.chart(svg, data);
+            myChart.setBounds(75, 30, 480, 330)
+            myChart.addMeasureAxis("x", "Unit Sales");
+            myChart.addCategoryAxis("y", "Brand");
+            var mySeries = myChart.addSeries("Channel", dimple.plot.bar);
+            mySeries.getTooltipText = function (e) {
+                return [
+                    "Hey you hovered over " + e.aggField[0] + "!",
+                    "Each element in the array becomes a new line."
+                ];
+            };
+            myChart.addLegend(60, 10, 510, 20, "right");
+            myChart.draw();
+        });
+    </script>
+</div>
\ No newline at end of file
diff --git a/adhoc/adhoc_bar_labels.html b/adhoc/adhoc_bar_labels.html
new file mode 100644
index 00000000..c49ae264
--- /dev/null
+++ b/adhoc/adhoc_bar_labels.html
@@ -0,0 +1,47 @@
+<div id="chartContainer">
+  <script src="/lib/d3.v3.min.js"></script>
+  <script src="/dist/dimple.v2.0.0.js"></script>
+  <script type="text/javascript">
+    // This is the simple vertical grouped stacked 100% bar example
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(65, 45, 505, 315)
+      var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
+      var y = myChart.addPctAxis("y", "Unit Sales");
+      var s = myChart.addSeries("Owner", dimple.plot.bar);
+      // Using the afterDraw callback means this code still works with animated
+      // draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
+      // also be used to clear the text from the previous frame)
+      s.afterDraw = function (shape, data) {
+        // Get the shape as a d3 selection
+        var s = d3.select(shape),
+          rect = {
+            x: parseFloat(s.attr("x")),
+            y: parseFloat(s.attr("y")),
+            width: parseFloat(s.attr("width")),
+            height: parseFloat(s.attr("height"))
+          };
+        // Only label bars where the text can fit
+        if (rect.height >= 8) {
+          // Add a text label for the value
+          svg.append("text")
+            // Position in the centre of the shape (vertical position is
+            // manually set due to cross-browser problems with baseline)
+            .attr("x", rect.x + rect.width / 2)
+            .attr("y", rect.y + rect.height / 2 + 3.5)
+            // Centre align
+            .style("text-anchor", "middle")
+            .style("font-size", "10px")
+            .style("font-family", "sans-serif")
+            // Make it a little transparent to tone down the black
+            .style("opacity", 0.6)
+            // Format the number
+            .text(d3.format(",.1f")(data.yValue / 1000) + "k");
+        }
+      };
+      myChart.addLegend(200, 10, 380, 20, "right");
+      myChart.draw(2000);
+    });
+  </script>
+</div>
\ No newline at end of file
diff --git a/examples/templates/advanced_bar_scroll.html b/adhoc/adhoc_bar_scroll.html
similarity index 96%
rename from examples/templates/advanced_bar_scroll.html
rename to adhoc/adhoc_bar_scroll.html
index 19c6fe6a..41ff423a 100644
--- a/examples/templates/advanced_bar_scroll.html
+++ b/adhoc/adhoc_bar_scroll.html
@@ -1,6 +1,6 @@
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.{version}.js"></script>
+  <script src="/dist/dimple.v2.0.0.js"></script>
   <script type="text/javascript">
     // Start off with a couple of rows of data
     var data = [
diff --git a/examples/templates/advanced_bounce_stagger.html b/adhoc/adhoc_bounce_stagger.html
similarity index 93%
rename from examples/templates/advanced_bounce_stagger.html
rename to adhoc/adhoc_bounce_stagger.html
index aa15227a..2751b4e3 100644
--- a/examples/templates/advanced_bounce_stagger.html
+++ b/adhoc/adhoc_bounce_stagger.html
@@ -1,6 +1,6 @@
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.{version}.js"></script>
+  <script src="/dist/dimple.v2.0.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/adhoc/adhoc_composite_axis_category.html b/adhoc/adhoc_composite_axis_category.html
new file mode 100644
index 00000000..672e43a9
--- /dev/null
+++ b/adhoc/adhoc_composite_axis_category.html
@@ -0,0 +1,22 @@
+<div id="chartContainer">
+  <script src="/lib/d3.v3.min.js"></script>
+  <script src="/dist/dimple.v2.0.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 50, 480, 280);
+      var priceTierAxis = myChart.addCategoryAxis("x", "Price Tier");
+      var monthAxis = myChart.addCategoryAxis(priceTierAxis, "Month");
+      monthAxis.addOrderRule("Date");
+      var packTypeAxis = myChart.addCategoryAxis(priceTierAxis, "Pack Type");
+      var volumeAxis = myChart.addPctAxis("y", "Unit Sales");
+      myChart.addSeries("Owner",  dimple.plot.bar, [priceTierAxis, volumeAxis]);
+      myChart.addSeries("Owner",  dimple.plot.area, [monthAxis, volumeAxis]);
+      myChart.addSeries("Owner",  dimple.plot.bar, [packTypeAxis, volumeAxis]);
+      myChart.addLegend(200, 10, 380, 20, "right");
+      priceTierAxis.title = null;
+      myChart.draw();
+    });
+  </script>
+</div>
\ No newline at end of file
diff --git a/adhoc/adhoc_composite_axis_measure.html b/adhoc/adhoc_composite_axis_measure.html
new file mode 100644
index 00000000..58883ecd
--- /dev/null
+++ b/adhoc/adhoc_composite_axis_measure.html
@@ -0,0 +1,20 @@
+<div id="chartContainer">
+  <script src="/lib/d3.v3.min.js"></script>
+  <script src="/dist/dimple.v2.0.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 50, 480, 280);
+      var monthAxis = myChart.addCategoryAxis("x", "Month");
+      monthAxis.addOrderRule("Date");
+      var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
+      var profitAxis = myChart.addMeasureAxis(volumeAxis, "Operating Profit");
+      myChart.addSeries("Quantity",  dimple.plot.line, [monthAxis, volumeAxis]);
+      myChart.addSeries("Op. Profit",  dimple.plot.line, [monthAxis, profitAxis]);
+      myChart.addLegend(200, 10, 380, 20, "right");
+      volumeAxis.title = "£";
+      myChart.draw();
+    });
+  </script>
+</div>
\ No newline at end of file
diff --git a/adhoc/adhoc_dual_axis.html b/adhoc/adhoc_dual_axis.html
new file mode 100644
index 00000000..e5ed9164
--- /dev/null
+++ b/adhoc/adhoc_dual_axis.html
@@ -0,0 +1,19 @@
+<div id="chartContainer">
+    <script src="/lib/d3.v3.min.js"></script>
+    <script src="/dist/dimple.v2.0.0.js"></script>
+    <script type="text/javascript">
+        var svg = dimple.newSvg("#chartContainer", 590, 400);
+        d3.tsv("/data/example_data.tsv", function (data) {
+            var myChart = new dimple.chart(svg, data);
+            myChart.setBounds(60, 50, 460, 280);
+            var monthAxis = myChart.addCategoryAxis("x", "Month");
+            monthAxis.addOrderRule("Date");
+            var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
+            var profitAxis = myChart.addMeasureAxis("y", "Operating Profit");
+            myChart.addSeries("Quantity",  dimple.plot.line, [monthAxis, volumeAxis]);
+            myChart.addSeries("Op. Profit",  dimple.plot.line, [monthAxis, profitAxis]);
+            myChart.addLegend(200, 10, 380, 20, "right");
+            myChart.draw();
+        });
+    </script>
+</div>
\ No newline at end of file
diff --git a/examples/advanced_bar_scroll.html b/examples/advanced_bar_scroll.html
deleted file mode 100644
index 824d4926..00000000
--- a/examples/advanced_bar_scroll.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!----------------------------------------------------------------->
-<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
-<!----------------------------------------------------------------->
-<div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v2.0.0.js"></script>
-  <script type="text/javascript">
-    // Start off with a couple of rows of data
-    var data = [
-      { "Date": Date.now(), "Value": 2000000 * Math.random() }
-    ];
-    var svg = dimple.newSvg("#chartContainer", 590, 400);
-    var myChart = new dimple.chart(svg, [].concat(data));
-    myChart.setBounds(60, 50, 480, 250)
-    x = myChart.addTimeAxis("x", "Date", null, "%d/%m/%Y");
-    myChart.addMeasureAxis("y", "Value");
-    myChart.addSeries("Sales",  dimple.plot.bar);
-    myChart.ease = "linear";
-    window.setInterval(function () {
-      // Let 60 bars accumulate and then start slicing them off the front
-      if (data.length > 60) { data = data.slice(1); }
-      // Keep a day's gap at each end of the axis
-      x.overrideMin = data[0]["Date"] - 86400000;
-      x.overrideMax = data[data.length - 1]["Date"] + 86400000;
-      data.push({
-          "Date": data[data.length - 1]["Date"] + 86400000,
-          "Value": 2000000 * Math.random() });
-      // Update the data, using a clone to maintain order
-      myChart.data = [].concat(data);
-      // Draw with an animation. Each bar will take 1 second to draw and a new
-      // one is added every 500ms so there will be a few animating at once
-      myChart.draw(1000);
-    }, 500);
-  </script>
-</div>
\ No newline at end of file
diff --git a/examples/advanced_elastic_bubbles.html b/examples/advanced_elastic_bubbles.html
deleted file mode 100644
index b7bf0e94..00000000
--- a/examples/advanced_elastic_bubbles.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!----------------------------------------------------------------->
-<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
-<!----------------------------------------------------------------->
-<div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v2.0.0.js"></script>
-  <script type="text/javascript">
-    var svg = dimple.newSvg("#chartContainer", 590, 400);
-    d3.tsv("/data/example_data.tsv", function (data) {
-      var myChart = new dimple.chart(svg, data);
-      myChart.setBounds(60, 80, 480, 260)
-      myChart.addMeasureAxis("x", "Price Monthly Change");
-      myChart.addMeasureAxis("y", "Distribution Monthly Change");
-      myChart.addMeasureAxis("z", "Sales Value");
-      myChart.addSeries(["SKU", "Channel", "Owner"],  dimple.plot.bubble);
-      myChart.addLegend(200, 10, 380, 20, "right");
-      myChart.setStoryboard("Date");
-      myChart.ease = "elastic";
-      myChart.draw(2000);
-      myChart.legends = [];
-    });
-  </script>
-</div>
\ No newline at end of file
diff --git a/examples/advanced_bounce_stagger.html b/examples/lines_curvy.html
similarity index 70%
rename from examples/advanced_bounce_stagger.html
rename to examples/lines_curvy.html
index 575368ec..a568d2ce 100644
--- a/examples/advanced_bounce_stagger.html
+++ b/examples/lines_curvy.html
@@ -7,17 +7,16 @@
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
       var myChart = new dimple.chart(svg, data);
-      myChart.setBounds(60, 50, 480, 280)
+      myChart.setBounds(60, 30, 505, 305);
       var x = myChart.addCategoryAxis("x", "Month");
       x.addOrderRule("Date");
       myChart.addMeasureAxis("y", "Unit Sales");
-      myChart.addSeries("Owner",  dimple.plot.bar);
-      myChart.setStoryboard("Price Tier");
-      myChart.ease = "bounce"
-      myChart.staggerDraw = true;
-      myChart.addLegend(200, 10, 380, 20, "right");
-      myChart.draw(800);
+      var s = myChart.addSeries("Channel", dimple.plot.line);
+      s.interpolation = "cardinal";
+      myChart.addLegend(60, 10, 500, 20, "right");
+      myChart.draw();
     });
   </script>
 </div>
\ No newline at end of file
diff --git a/examples/templates/advanced_elastic_bubbles.html b/examples/templates/advanced_elastic_bubbles.html
deleted file mode 100644
index fb68a993..00000000
--- a/examples/templates/advanced_elastic_bubbles.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.{version}.js"></script>
-  <script type="text/javascript">
-    var svg = dimple.newSvg("#chartContainer", 590, 400);
-    d3.tsv("/data/example_data.tsv", function (data) {
-      var myChart = new dimple.chart(svg, data);
-      myChart.setBounds(60, 80, 480, 260)
-      myChart.addMeasureAxis("x", "Price Monthly Change");
-      myChart.addMeasureAxis("y", "Distribution Monthly Change");
-      myChart.addMeasureAxis("z", "Sales Value");
-      myChart.addSeries(["SKU", "Channel", "Owner"],  dimple.plot.bubble);
-      myChart.addLegend(200, 10, 380, 20, "right");
-      myChart.setStoryboard("Date");
-      myChart.ease = "elastic";
-      myChart.draw(2000);
-      myChart.legends = [];
-    });
-  </script>
-</div>
\ No newline at end of file
diff --git a/examples/templates/lines_curvy.html b/examples/templates/lines_curvy.html
new file mode 100644
index 00000000..aa6b9490
--- /dev/null
+++ b/examples/templates/lines_curvy.html
@@ -0,0 +1,19 @@
+<div id="chartContainer">
+  <script src="/lib/d3.v3.min.js"></script>
+  <script src="/dist/dimple.{version}.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 30, 505, 305);
+      var x = myChart.addCategoryAxis("x", "Month");
+      x.addOrderRule("Date");
+      myChart.addMeasureAxis("y", "Unit Sales");
+      var s = myChart.addSeries("Channel", dimple.plot.line);
+      s.interpolation = "cardinal";
+      myChart.addLegend(60, 10, 500, 20, "right");
+      myChart.draw();
+    });
+  </script>
+</div>
\ No newline at end of file