D3 Examples - dimple.js example

xxxxxxxxxx
 
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
    </head>
  <body>
    <div id="chartContainer" style="height: 100%">
      <script type="text/javascript">
        // In version 1.1.0 it's possible to initialise any size parameter with a
        // % value as well as pixels
        var svg = dimple.newSvg("#chartContainer", "100%", "100%");
        
        d3.select("html")
          .style("height", "100%")
          .style("overflow", "hidden");
        d3.select("body")
          .style("height", "100%")
          .style("overflow", "hidden");
        
        // Set up a standard chart
        var myChart;
        d3.tsv("example_data.tsv", function (data) {
          myChart = new dimple.chart(svg, data);
          
          // Fix the margins
          myChart.setMargins("8%", "8%", "12%", "15%");
          myChart.aggregate = dimple.aggregateMethod.avg;
          
          // Continue to set up a standard chart
          var xAxis = myChart.addCategoryAxis("x", "Month")
          xAxis.addOrderRule("Date");
          xAxis.fontSize = "auto";
          var yAxis = myChart.addMeasureAxis("y", "Unit Sales");
​
          yAxis.fontSize = "auto";
          myChart.addSeries("Channel", dimple.plot.bar);
          
          // Set the legend using negative values to set the co-ordinate from the right
          myChart.addLegend("90%", "7%", "100px", "-70px");
          myChart.ease = "cubic";
          myChart.staggerDraw = true;
          myChart.draw(700);
        });
        
        // Add a method to draw the chart on resize of the window
        window.onresize = function () {
          // As of 1.1.0 the second parameter here allows you to draw
          // without reprocessing data.  This saves a lot on performance
          // when you know the data won't have changed.
          myChart.draw(0, true);
        };
​
      </script>
    </div>
  </body>
</html>
    