coconut-graph

Quick and dirty reusable timeseries graphs with d3, developed to visualize usage.

Currently supports line, bar, scatter.

Depends heavily on JSON structure used in the coconut wepapp:

{
    "meta": {
        "period": "day",
        "urls": {
            "next": "<url to get json for the next day>",
            "previous": "<url to get json for previous day>"
        },
        "readable_interval": "15 minuten"
    },
    "data": {
        "keys": ["timestamp", "amount"],
        "extents": ["2015-05-29T00:00:00", "2015-05-29T23:59:59"],
        "values": [
            ["2015-05-29T14:00:00", 50],
            ["2015-05-29T14:15:00", 0],
            ["2015-05-29T14:30:00", 5],
            ["2015-05-29T15:00:00", 6]
        ],
        "slices": 96
    }
}

var Loader = require('coconut-graph').Loader;
var url = '/graph-data.json'; // url to above json

var graph = new Loader(url, {
    graphs: [{
        container: 'container',
        plot: { type: 'bar', key: 'amount', label: 'verbruik [l]'}
    }]
});

// Loads the data for the next day, url defined in meta.urls
graph.load_url('next');

// previous day
graph.load_url('previous');