Back

Group values by weekday

Time chart example where multiple values are displayed as a stack in the monthly view, but when the user drills down to a specific week, each day is displayed as a separate column. Achieved with a custom valueFunction.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    var data = [
        [1430982000, 2400.58],
        [1430722800, 1278.47],
        [1430809200, 2448.67],
        [1431154800, 3946.18],
        [1431068400, 4363.81],
        [1431241200, 2983.57],
        [1431327600, 1701.67],
        [1431414000, 1932.21],
        [1431500400, 1407.51],
        [1431586800, 1896.28],
        [1431673200, 4523.33],
        [1432364400, 4004],
        [1431846000, 5513.45],
        [1431932400, 1895.08],
        [1432018800, 1897.54],
        [1432105200, 2348.54],
        [1432191600, 2906.58],
        [1432278000, 4201.97],
        [1431759600, 183.25],
        [1433574000, 4783.01],
        [1433487600, 4633.47],
        [1432450800, 4436.24],
        [1432537200, 3619.05],
        [1432623600, 2036.2]
    ];
    data.sort(function (a, b) { return a[0] - b[0] });

    function createDaySeries(name, number, color) {
        // a separate series object for each weekday has to be created.
        // the configuration for all of them is very similar, the key being the use of `valueFunction`.
        return {
            name: name,
            id: name,
            type: "columns",
            stack: "s1",
            data: {
                valueFunction: function(values) {
                    var weekDay = (new Date(values[0]).getDay());
                    return weekDay === number ? values[1] : null;
                }
            },
            style: {
                fillColor: color
            }
        }
    }

    var t = new TimeChart({
        container: document.getElementById("demo"),
        data: [{
                preloaded: {
                    values: data,
                    unit: "d",
                    dataLimitFrom: 1430722800,
                    dataLimitTo: 1433574000
                },
                timestampInSeconds: true
            }],
        area: {
            height: null,
            displayUnits: [
                {unit: "1 d", name: "day"},
                {unit: "1 w", name: "week"},
                {unit: "1 M", name: "month"},
                {unit: "1 y", name: "year"}
            ]
        },
        navigation: {
            initialDisplayUnit: '1 w'
        },
        series: [
            createDaySeries("Saturday", 6, "rgba(234, 226, 83, 1)"),
            createDaySeries("Fridays", 5, "rgba(255, 75, 88, 1)"),
            createDaySeries("Thursday", 4, "rgba(255, 180, 44, 1)"),
            createDaySeries("Wednesday", 3, "rgba(108, 189, 149, 1)"),
            createDaySeries("Tuesday", 2, "rgba(224, 98, 137, 1)"),
            createDaySeries("Monday", 1, "rgba(162, 201, 245, 1)"),
            createDaySeries("Sunday", 0, "rgba(178, 138, 229, 1)")
        ]
    });

Data

Data 
//No separate data for this example