dimple/examples/advanced_trellis_bar.html

<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 = 0,
          col = 0,
          top = 25,
          left = 60,
          inMarg = 15,
          width = 115,
          height = 90,
          totalWidth = parseFloat(svg.attr("width"));

      // Pick the latest 12 dates
      months = months.slice(months.length - 12);

      // Draw a chart for each of the 12 dates
      months.forEach(function (month) {
          
          // Wrap to the row above
          if (left + ((col + 1) * (width + inMarg)) > totalWidth) {
            row += 1;
            col = 0;
          }
          
          // 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>