Untitled

<html>
<div id="chartContainer">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 1180, 800);
    d3.csv("test_items.csv", function (data) {

      // Get a unique list of dates.
      var scraper_names = dimple.getUniqueValues(data, "scraper_name");

      // Set the bounds for the charts.
      var totalWidth = parseFloat(svg.attr("width")),
          row = 0,
          col = 0,
          top = 30,
          ouMarg = 30,
          inMarg = 50,
          width = (totalWidth - 2*ouMarg - 2*inMarg)/3,
          height = 190;

      // Draw a chart for each of the scrapers.
      scraper_names.forEach(function (scraper_name) {

          // Wrap to the row above
          if (2*ouMarg + ((col) * (width + inMarg)) > totalWidth) {
            row += 1;
            col = 0;
          }

          // Filter for the scraper_name in the iteration.
          var chartData = dimple.filterData(data, "scraper_name", scraper_name);

          // Use d3 to draw a text label for the scraper_name.
          svg
            .append("text")
                .attr("x", ouMarg + (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.3)
                .text(chartData[0].scraper_name);

          // Create a chart at the correct point in the trellis.
          var myChart = new dimple.chart(svg, chartData);
          myChart.setBounds(
            ouMarg + (col * (width + inMarg)),
            top + (row * (height + inMarg)),
            width,
            height);

          // Add x and fix ordering so that all charts are the same
          var x = myChart.addTimeAxis("x", "date", "%Y-%m-%d", "%m/%d");
          x.timePeriod = d3.time.days;
          x.timeInterval = 2;
          x.showGridlines = null;
          //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", "items");
          y.showGridlines = null;
          //y.overrideMax = 16000000;

          // Draw the bars.  Passing null here would draw all bars with
          // the same color.  Passing date second colors by date, which
          // is normally bad practice in a bar chart but works in a trellis.
          // scraper_name is only passed here so that it shows in the tooltip.
          myChart.addSeries("scraper_name", dimple.plot.bubble);

          // Add a line to connect the points.
          var s = myChart.addSeries("scraper_name", dimple.plot.line);
          //s.lineMarkers = true;

          // Draw the chart
          myChart.draw();

          // Remove the axis labels
          y.titleShape.remove();
          x.titleShape.remove();

          // Move to the next column
          col += 1;

      }, this);
    });
  </script>
</div>
</html>