Add day chart

[inbo]

Add day chart

[bartaelterman]

Currently, the chart shows the timestamps on the x-axis that are present in the data. In order to be able to set the x-axis to always show 24 hours, I would need to know how to pass missing data to C3. Do you know how to do this?

[bartaelterman]

The default C3 tooltip is shown. If we leave this on, I think it should have the same style as the heatmap tooltips.

[peterdesmet]

To answer your question, I'd have to see the current chart: I don't see it in the live application, is it already there?

[bartaelterman]

pushed!

[bartaelterman]

To explain it with code:

The data format is something like:

{
    columns: [
        ["x", 1, 2, 3, 4],
        ["distance", 20, 10, 4, 23]
    ]
}

Currently, if one or more timestamps would be missing, the arrays would just have less then 25 values. If we would try to fix the x-axis, I think you need to make sure you always provide a column array with "x" as first element and next elements ranging from 0 to 23. But say you don't have data for 0h, then what do you put on that position in the "distances" array? null?

[peterdesmet]

Yep, null works. Or, you can set axis type to timeseries: http://c3js.org/samples/timeseries.html, but then you need to pass a date.

[bartaelterman]

Ok, I'll make sure the first array in the columns property always contains 25 elements ('x', and 0 to 23) and the next column contains null if there is no data for a given hour.

[bartaelterman]

fixed here: bbef7b7

The chart does not connect dots if there is no data in between. (see for example bird Jurgen, on February 3, 2014). Exactly what we wanted.

[bartaelterman]

When year or month is selected, show some explanatory text in the div This could be done with the empty tag from C3 but then the chart must be initialised immediately (and never be removed completely) and the user will always see the axes.

The other option is to just insert text in the div by default, and show/hide that as appropriate.

[bartaelterman]

Implemented the text in 25cf33a.
Text can be changed if preferred.