svg-timegraph v1.2.1

svg-timegraph

Easy to use Node.JS/Browserify library to render time graph into SVG.

Example

How to use it?

$ npm install svg-timegraph

Generate a time-graph using:

var SVGTimeGraph = require('svg-timegraph');

var output = SVGTimeGraph(
    // List of data series
    [
        {
            title: "Visits",
            color: "#1d7fb3",
            points: [
                {
                    value: 200,
                    date: new Date(2015, 06, 10)
                },
                {
                    value: 100,
                    date: new Date(2015, 06, 11)
                },
                {
                    value: 230,
                    date: new Date(2015, 06, 12)
                },
                {
                    value: 600,
                    date: new Date(2015, 06, 13)
                }
            ]
        }
    ],

    //
    {
        // Size of the SVG
        width: 800,
        height: 300,

        // Minimum value for the Y axe
        // if null, it will be extracted from data
        minValue: null,

        // Radius  of point
        pointRadius: 4,

        // Stroke width
        lineWidth: 1,

        // Color for axe
        axeColor: '#eee',

        // Text styling
        textColor: '#aaa',
        textFontSize: 10,
        textFontFamily: 'helvetica'
    }
);

Use the autoFill option when a time serie is incomplete:

var SVGTimeGraph = require('svg-timegraph');

var output = SVGTimeGraph(
    // List of data series
    [
        {
            title: "Visits",
            color: "#1d7fb3",
            points: [
                {
                    value: 200,
                    date: new Date(2015, 06, 10)
                },
                {
                    value: 100,
                    date: new Date(2015, 06, 11)
                },
                {
                    value: 600,
                    date: new Date(2015, 06, 13)
                }
            ]
        }
    ],

    //
    {
        // Activate the auto-fill
        autoFill: true,

        // Value to use for missing data
        // Default is 0
        autoFillValue: 0,

        // Interval of the time serie in ms
        // Points that are not in the interval will be ignored
        autoFillInterval: 1000 * 60 * 60 * 24,

        // By default, autoFill completes the serie from the minimum date
        // to the maximum date of the series
        // Override this behavior by setting the two following options

        // Default to minimum date of the series
        autoFillStartTime: new Date(2015, 06, 07),
        // Default to maximum date of the series
        autoFillEndTime: new Date(2015, 06, 14)

        // Other options...
    }
);