Old school D3 from simpler times

All examples By author By category About

timelyportfolio

Full window Github gist

dimple define tick labels on x axis

Forked from this jsfiddle in response to Stack Overflow dimple.js: unequal time periods and missing labels.

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>

<div id="volumeReport">

<script>
    var svg = dimple.newSvg("#volumeReport", 590, 500);
    var data = [
    {"Date": "22/7/2014", "Volume" : 0},
    {"Date": "15/11/2014", "Volume" : 1000},
    {"Date": "5/01/2015", "Volume" : 2000},
    {"Date": "5/2/2015", "Volume" : 3000},
    {"Date": "31/3/2015", "Volume" : 4000}
    ];
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 510, 305)
    var x = myChart.addTimeAxis("x", "Date", "%d-%m-%Y %H:%M:%S:%L", "%d-%m-%Y");
    x.addOrderRule("Date");
    x.timeField = "Date";
    x.dateParseFormat = "%d/%m/%Y";
    myChart.addMeasureAxis("y", "Volume");
    var s = myChart.addSeries(null, dimple.plot.area);
    s.interpolation = "step";
    s.lineWeight = 1;
    s.lineMarkers = true;
    myChart.draw();
    
    myChart.axes[0].shapes.call(
      d3.svg.axis()
        .orient("bottom")
        .scale(myChart.axes[0]._scale)
        .tickValues(data.map(function(d,i){
            return d3.time.format("%d/%m/%Y").parse(d.Date)
          })
        )
        .tickFormat(d3.time.format("%d-%m-%Y"))
    )
  </script>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://dimplejs.org/dist/dimple.v2.1.0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://dimplejs.org/dist/dimple.v2.1.0.min.js