New Examples

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>

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>

examples/templates/advanced_bar_scroll.html → 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 = [

examples/templates/advanced_bounce_stagger.html → 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) {

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>

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>

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>

examples/advanced_bounce_stagger.html → 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>

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>