Add Trellis Example

advanced_examples_meta.json

@@ -28,5 +28,11 @@
         "title":"Grouped Mekko",
         "shortTitle":"Grouped Mekko",
         "desc":"A marimekko chart showing SKUs grouped by owner and brand.  They have dynamic saturation and are animated by month just for good measure."
+    },
+    {
+        "id":"advanced_trellis_bar",
+        "title":"Trellis Bars",
+        "shortTitle":"Trellis Bars",
+        "desc":"This demonstrates how to build a trellis chart by iterating and inserting chart objects."
     }
 ]

dist/dimple.v1.js

@@ -87,12 +87,12 @@ var dimple = {
                 if (len > 3) {
                     chunks = Math.min(Math.floor((len - 1) / 3), 4);
                     suffix = "kmBT".substring(chunks - 1, chunks);
-                    dp = (len - chunks * 3 <= 2 ? 1 : 0);
+                    dp = (len - chunks * 3 <= 1 ? 1 : 0);
                     returnFormat = function (n) {
                         return (n === 0 ? 0 : d3.format(",." + dp + "f")(n / Math.pow(1000, chunks)) + suffix);
                     };
                 } else {
-                    dp = (len <= 2 ? 1 : 0);
+                    dp = (len <= 1 ? 1 : 0);
                     returnFormat = d3.format(",." + dp + "f");
                 }
             } else {

examples/advanced_trellis_bar.html

@@ -0,0 +1,95 @@
+<div id="chartContainer">
+  <script src="http://d3js.org/d3.v3.min.js"></script>
+  <script src="/dist/dimple.v1.min.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+
+      // Get a unique list of dates
+      var months = dimple.getUniqueValues(data, "Date");
+
+      // Set the bounds for the charts
+      var row = 2,
+          col = 3,
+          top = 20,
+          left = 50,
+          inMarg = 15,
+          width = 115,
+          height = 90;
+
+      // Sort the months in descending order so that when tooltips are drawn
+      // they won't be behind the chart on the right.  This is because all
+      // chart shapes (including tooltips) are grouped.
+      months.sort(function (a, b) { return Date.parse(b) - Date.parse(a); });
+
+      // Pick the latest 12 dates
+      months = months.slice(0, 12);
+
+      // Draw a chart for each of the 12 dates
+      months.forEach(function (month) {
+          
+          // Wrap to the row above
+          if (col < 0) {
+            row -= 1;
+            col = 3;
+          }
+          
+          // Filter for the month in the iteration
+          var chartData = dimple.filterData(data, "Date", month);
+          
+          // Use d3 to draw a text label for the month
+          svg
+            .append("text")
+                .attr("x", left + (col * (width + inMarg)) + (width / 2))
+                .attr("y", top + (row * (height + inMarg)) + (height / 2) + 12)
+                .style("font-family", "sans-serif")
+                .style("text-anchor", "middle")
+                .style("font-size", "28px")
+                .style("opacity", 0.2)
+                .text(chartData[0].Month.substring(0, 3));
+          
+          // Create a chart at the correct point in the trellis
+          var myChart = new dimple.chart(svg, chartData);
+          myChart.setBounds(
+            left + (col * (width + inMarg)),
+            top + (row * (height + inMarg)),
+            width,
+            height);
+          
+          // Add x and fix ordering so that all charts are the same
+          var x = myChart.addCategoryAxis("x", "Owner");
+          x.addOrderRule(["Black Mesa", "Aperture", "Tyrell Corp", "Rekall", "MomCorp", "LexCorp", "Stark Ind", "Wayne Ent"])
+          
+          // Add y and fix scale so that all charts are the same
+          var y = myChart.addMeasureAxis("y", "Sales Value");
+          y.overrideMax = 16000000;
+          
+          // Draw the bars.  Passing null here would draw all bars with
+          // the same color.  Passing owner second colors by owner, which
+          // is normally bad practice in a bar chart but works in a trellis.
+          // Month is only passed here so that it shows in the tooltip.
+          myChart.addSeries(["Month", "Owner"], dimple.plot.bar);
+
+          // Draw the chart
+          myChart.draw();
+
+          // Once drawn we can access the shapes
+          // If this is not in the first column remove the y text
+          if (col > 0) {
+            y.shapes.selectAll("text").remove();
+          }
+          // If this is not in the last row remove the x text
+          if (row < 2) {
+             x.shapes.selectAll("text").remove();
+          }
+          // Remove the axis labels
+          y.titleShape.remove();
+          x.titleShape.remove();
+
+          // Move to the next column
+          col -= 1;
+
+      }, this);
+    });
+  </script>
+</div>