Group values by weekday
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