how to format time for dimple.js

Question

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.

Answer 1

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>

Answer 2

This is how your data object should look like.
So.. Date is formatted like this: DD/MM/YYYY

coordinates = [{"title":"ALL the things","date":"14/11/2017","hours":0.5}]; 

  var data = [
        {"Date": "22/7/2014", "etc" : 0},
        {"Date": "15/11/2014", "etc" : 1000},
        {"Date": "5/01/2015", "etc" : 2000}
  ];