how to format time for dimple.js

I am attempting a multi-line graph with dimple.js based on sample code. I have flattened my JSON into an array and I thought I understood the code but I'm not getting anywhere.

I am referencing these 2 libraries (using the cloudflare dimple because my system won't allow an insecure link):

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.1.6/dimple.latest.min.js"></script>

I have formatted my data like so (below). This data should give me 2 completely separate horizontal lines, one for 'ALL the things' and the other for 'More'.

coordinates = [{"title":"ALL the things","date":"2017-11-14T00:00:00.000Z","hours":0.5},
               {"title":"ALL the things","date":"2017-11-20T00:00:00.000Z","hours":0.5},
               {"title":"More","date":"2017-11-27T00:00:00.000Z","hours":0.91},
               {"title":"More","date":"2017-12-04T00:00:00.000Z","hours":0.91},
               {"title":"More","date":"2017-12-11T00:00:00.000Z","hours":0.91},
               {"title":"More","date":"2017-12-18T00:00:00.000Z","hours":0.91},
               {"title":"More","date":"2017-12-25T00:00:00.000Z","hours":0.91}];

And here is the dimple code. It seems so simple but I'm clearly missing something:

var svg = dimple.newSvg("#graph", 590, 400);
var myChart = new dimple.chart(svg, coordinates);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addTimeAxis("x", "date");
x.addOrderRule("date");
var y = myChart.addTimeAxis("y", "hours");
var s = myChart.addSeries("title", dimple.plot.line);
s.interpolation = "cardinal";
myChart.draw();

Firefox gives me a

TypeError: a.time is undefined

Chrome says:

Uncaught TypeError: Cannot read property 'scale' of undefined.

That's why I think it might be a formatting issue. I have tried various time formats with no success. I have also tried a few different types of axes but they were shots in the dark. I have searched and searched but either there's not much out there on this or I'm asking the wrong questions. I'd appreciate some suggestions.

Solution

Use Dimple.js version 2.3.0 for d3v4. Also, you should use addMeasureAxis for y axis:

var y = myChart.addMeasureAxis("y", "hours");

And appropriate tick formating for x axis:

var x = myChart.addTimeAxis("x", "date");
x.tickFormat = "%Y-%m-%d"
x.addOrderRule("date");

Look at working example below:

var coordinates = [{
  "title": "ALL the things",
  "date": "2017-11-14T00:00:00.000Z",
  "hours": 0.5
}, {
  "title": "ALL the things",
  "date": "2017-11-20T00:00:00.000Z",
  "hours": 0.5
}, {
  "title": "More",
  "date": "2017-11-27T00:00:00.000Z",
  "hours": 0.91
}, {
  "title": "More",
  "date": "2017-12-04T00:00:00.000Z",
  "hours": 0.91
}, {
  "title": "More",
  "date": "2017-12-11T00:00:00.000Z",
  "hours": 0.91
}, {
  "title": "More",
  "date": "2017-12-18T00:00:00.000Z",
  "hours": 0.91
}, {
  "title": "More",
  "date": "2017-12-25T00:00:00.000Z",
  "hours": 0.91
}];

var svg = dimple.newSvg("#graph", 590, 400);
var myChart = new dimple.chart(svg, coordinates);

myChart.setBounds(60, 30, 505, 305);

var x = myChart.addTimeAxis("x", "date");
x.tickFormat = "%Y-%m-%d";
x.addOrderRule("date");

var y = myChart.addMeasureAxis("y", "hours");
var s = myChart.addSeries("title", dimple.plot.line);
s.interpolation = "cardinal";

myChart.draw();

<div id="graph"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js"></script>