A week, hour by hour: each cell is colored by its value, and the legend below gives the scale. Weekday working hours stand out, while the weekend stays quiet.
A heat map swaps numbers for colors, so a table of 168 values becomes a pattern you see at once: busy hours, quiet days, the odd spike. It suits two categories that cross, like days and hours, where a line or column chart would need a series for every row.
Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.
npm install @amcharts/amcharts5. See Getting started.
The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code."type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".
A complete page. Save it as an .html file and open it in a browser.
Paste this into an AI coding assistant to build the chart from scratch. More in amCharts & AI.
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false, // no dragging the plot
panY: false,
wheelX: "none", // the mouse wheel scrolls the page, not the chart
wheelY: "none",
paddingLeft: 0, // the weekday labels sit at the chart's left edge
layout: root.verticalLayout
}));
// Create axes and their renderers
var yRenderer = am5xy.AxisRendererY.new(root, {
visible: false, // no axis line
minGridDistance: 20, // at least 20px between labels
// the first day in the data, Sunday, at the top
inversed: true,
minorGridEnabled: true
});
yRenderer.grid.template.set("visible", false); // no grid lines
var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0, // no panning past the first or last day
renderer: yRenderer,
categoryField: "weekday"
}));
var xRenderer = am5xy.AxisRendererX.new(root, {
visible: false, // no axis line
// every second hour, so the labels don't run into each other
minGridDistance: 50,
opposite: true, // the hours along the top
minorGridEnabled: true
});
xRenderer.grid.template.set("visible", false); // no grid lines
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
renderer: xRenderer,
categoryField: "hour"
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/#Adding_series
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
// works out valueLow and valueHigh, which the heat rules and the legend use
calculateAggregates: true,
// gaps between the cells in the chart's background color
stroke: root.interfaceColors.get("background"),
clustered: false, // a cell never shares its space with other series' columns
xAxis: xAxis,
yAxis: yAxis,
categoryXField: "hour",
categoryYField: "weekday",
valueField: "value" // the value the heat rules color the cells by
}));
series.columns.template.setAll({
tooltipText: "{categoryY}, {categoryX}: {value}", // as "Sunday, 12am: 2,990"
strokeOpacity: 1, // solid...
strokeWidth: 2, // ...2px gaps
width: am5.percent(100), // each cell fills its hour...
height: am5.percent(100) // ...and its day
});
// hovering a cell marks its value on the heat legend
series.columns.template.events.on("pointerover", function(event) {
var di = event.target.dataItem;
if (di) {
heatLegend.showValue(di.get("value", 0));
}
});
// the legend runs from the lowest value on the left to the highest on the right
series.events.on("datavalidated", function() {
heatLegend.set("startValue", series.getPrivate("valueLow"));
heatLegend.set("endValue", series.getPrivate("valueHigh"));
});
// Set up heat rules: from the theme's first color for the lowest value to a later one for the highest, so the cells
// follow the theme and dark mode
// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
var lowColor = chart.get("colors").getIndex(0);
var highColor = chart.get("colors").getIndex(5);
series.set("heatRules", [{
target: series.columns.template,
min: lowColor,
max: highColor,
dataField: "value",
key: "fill" // the heat rule sets each cell's fill
}]);
// Add heat legend
// https://www.amcharts.com/docs/v5/concepts/legend/heat-legend/
var heatLegend = chart.bottomAxesContainer.children.push(am5.HeatLegend.new(root, {
orientation: "horizontal", // a color bar along the bottom
marginTop: 10, // 10px below the plot
startColor: lowColor, // the same colors as the heat rule
endColor: highColor
}));
// Set data
// https://www.amcharts.com/docs/v5/charts/xy-chart/#Setting_data
var data = [{
hour: "12am",
weekday: "Sunday",
value: 2990
}, {
hour: "1am",
weekday: "Sunday",
value: 2520
}, {
hour: "2am",
weekday: "Sunday",
value: 2334
}, {
hour: "3am",
weekday: "Sunday",
value: 2230
}, {
hour: "4am",
weekday: "Sunday",
value: 2325
}, {
hour: "5am",
weekday: "Sunday",
value: 2019
}, {
hour: "6am",
weekday: "Sunday",
value: 2128
}, {
hour: "7am",
weekday: "Sunday",
value: 2246
}, {
hour: "8am",
weekday: "Sunday",
value: 2421
}, {
hour: "9am",
weekday: "Sunday",
value: 2788
}, {
hour: "10am",
weekday: "Sunday",
value: 2959
}, {
hour: "11am",
weekday: "Sunday",
value: 3018
}, {
hour: "12pm",
weekday: "Sunday",
value: 3154
}, {
hour: "1pm",
weekday: "Sunday",
value: 3172
}, {
hour: "2pm",
weekday: "Sunday",
value: 3368
}, {
hour: "3pm",
weekday: "Sunday",
value: 3464
}, {
hour: "4pm",
weekday: "Sunday",
value: 3746
}, {
hour: "5pm",
weekday: "Sunday",
value: 3656
}, {
hour: "6pm",
weekday: "Sunday",
value: 3336
}, {
hour: "7pm",
weekday: "Sunday",
value: 3292
}, {
hour: "8pm",
weekday: "Sunday",
value: 3269
}, {
hour: "9pm",
weekday: "Sunday",
value: 3300
}, {
hour: "10pm",
weekday: "Sunday",
value: 3403
}, {
hour: "11pm",
weekday: "Sunday",
value: 3323
}, {
hour: "12am",
weekday: "Monday",
value: 3346
}, {
hour: "1am",
weekday: "Monday",
value: 2725
}, {
hour: "2am",
weekday: "Monday",
value: 3052
}, {
hour: "3am",
weekday: "Monday",
value: 3876
}, {
hour: "4am",
weekday: "Monday",
value: 4453
}, {
hour: "5am",
weekday: "Monday",
value: 3972
}, {
hour: "6am",
weekday: "Monday",
value: 4644
}, {
hour: "7am",
weekday: "Monday",
value: 5715
}, {
hour: "8am",
weekday: "Monday",
value: 7080
}, {
hour: "9am",
weekday: "Monday",
value: 8022
}, {
hour: "10am",
weekday: "Monday",
value: 8446
}, {
hour: "11am",
weekday: "Monday",
value: 9313
}, {
hour: "12pm",
weekday: "Monday",
value: 9011
}, {
hour: "1pm",
weekday: "Monday",
value: 8508
}, {
hour: "2pm",
weekday: "Monday",
value: 8515
}, {
hour: "3pm",
weekday: "Monday",
value: 8399
}, {
hour: "4pm",
weekday: "Monday",
value: 8649
}, {
hour: "5pm",
weekday: "Monday",
value: 7869
}, {
hour: "6pm",
weekday: "Monday",
value: 6933
}, {
hour: "7pm",
weekday: "Monday",
value: 5969
}, {
hour: "8pm",
weekday: "Monday",
value: 5552
}, {
hour: "9pm",
weekday: "Monday",
value: 5434
}, {
hour: "10pm",
weekday: "Monday",
value: 5070
}, {
hour: "11pm",
weekday: "Monday",
value: 4851
}, {
hour: "12am",
weekday: "Tuesday",
value: 4468
}, {
hour: "1am",
weekday: "Tuesday",
value: 3306
}, {
hour: "2am",
weekday: "Tuesday",
value: 3906
}, {
hour: "3am",
weekday: "Tuesday",
value: 4413
}, {
hour: "4am",
weekday: "Tuesday",
value: 4726
}, {
hour: "5am",
weekday: "Tuesday",
value: 4584
}, {
hour: "6am",
weekday: "Tuesday",
value: 5717
}, {
hour: "7am",
weekday: "Tuesday",
value: 6504
}, {
hour: "8am",
weekday: "Tuesday",
value: 8104
}, {
hour: "9am",
weekday: "Tuesday",
value: 8813
}, {
hour: "10am",
weekday: "Tuesday",
value: 9278
}, {
hour: "11am",
weekday: "Tuesday",
value: 10425
}, {
hour: "12pm",
weekday: "Tuesday",
value: 10137
}, {
hour: "1pm",
weekday: "Tuesday",
value: 9290
}, {
hour: "2pm",
weekday: "Tuesday",
value: 9255
}, {
hour: "3pm",
weekday: "Tuesday",
value: 9614
}, {
hour: "4pm",
weekday: "Tuesday",
value: 9713
}, {
hour: "5pm",
weekday: "Tuesday",
value: 9667
}, {
hour: "6pm",
weekday: "Tuesday",
value: 8774
}, {
hour: "7pm",
weekday: "Tuesday",
value: 8649
}, {
hour: "8pm",
weekday: "Tuesday",
value: 9937
}, {
hour: "9pm",
weekday: "Tuesday",
value: 10286
}, {
hour: "10pm",
weekday: "Tuesday",
value: 9175
}, {
hour: "11pm",
weekday: "Tuesday",
value: 8581
}, {
hour: "12am",
weekday: "Wednesday",
value: 8145
}, {
hour: "1am",
weekday: "Wednesday",
value: 7177
}, {
hour: "2am",
weekday: "Wednesday",
value: 5657
}, {
hour: "3am",
weekday: "Wednesday",
value: 6802
}, {
hour: "4am",
weekday: "Wednesday",
value: 8159
}, {
hour: "5am",
weekday: "Wednesday",
value: 8449
}, {
hour: "6am",
weekday: "Wednesday",
value: 9453
}, {
hour: "7am",
weekday: "Wednesday",
value: 9947
}, {
hour: "8am",
weekday: "Wednesday",
value: 11471
}, {
hour: "9am",
weekday: "Wednesday",
value: 12492
}, {
hour: "10am",
weekday: "Wednesday",
value: 9388
}, {
hour: "11am",
weekday: "Wednesday",
value: 9928
}, {
hour: "12pm",
weekday: "Wednesday",
value: 9644
}, {
hour: "1pm",
weekday: "Wednesday",
value: 9034
}, {
hour: "2pm",
weekday: "Wednesday",
value: 8964
}, {
hour: "3pm",
weekday: "Wednesday",
value: 9069
}, {
hour: "4pm",
weekday: "Wednesday",
value: 8898
}, {
hour: "5pm",
weekday: "Wednesday",
value: 8322
}, {
hour: "6pm",
weekday: "Wednesday",
value: 6909
}, {
hour: "7pm",
weekday: "Wednesday",
value: 5810
}, {
hour: "8pm",
weekday: "Wednesday",
value: 5151
}, {
hour: "9pm",
weekday: "Wednesday",
value: 4911
}, {
hour: "10pm",
weekday: "Wednesday",
value: 4487
}, {
hour: "11pm",
weekday: "Wednesday",
value: 4118
}, {
hour: "12am",
weekday: "Thursday",
value: 3689
}, {
hour: "1am",
weekday: "Thursday",
value: 3081
}, {
hour: "2am",
weekday: "Thursday",
value: 6525
}, {
hour: "3am",
weekday: "Thursday",
value: 6228
}, {
hour: "4am",
weekday: "Thursday",
value: 6917
}, {
hour: "5am",
weekday: "Thursday",
value: 6568
}, {
hour: "6am",
weekday: "Thursday",
value: 6405
}, {
hour: "7am",
weekday: "Thursday",
value: 8106
}, {
hour: "8am",
weekday: "Thursday",
value: 8542
}, {
hour: "9am",
weekday: "Thursday",
value: 8501
}, {
hour: "10am",
weekday: "Thursday",
value: 8802
}, {
hour: "11am",
weekday: "Thursday",
value: 9420
}, {
hour: "12pm",
weekday: "Thursday",
value: 8966
}, {
hour: "1pm",
weekday: "Thursday",
value: 8135
}, {
hour: "2pm",
weekday: "Thursday",
value: 8224
}, {
hour: "3pm",
weekday: "Thursday",
value: 8387
}, {
hour: "4pm",
weekday: "Thursday",
value: 8218
}, {
hour: "5pm",
weekday: "Thursday",
value: 7641
}, {
hour: "6pm",
weekday: "Thursday",
value: 6469
}, {
hour: "7pm",
weekday: "Thursday",
value: 5441
}, {
hour: "8pm",
weekday: "Thursday",
value: 4952
}, {
hour: "9pm",
weekday: "Thursday",
value: 4643
}, {
hour: "10pm",
weekday: "Thursday",
value: 4393
}, {
hour: "11pm",
weekday: "Thursday",
value: 4017
}, {
hour: "12am",
weekday: "Friday",
value: 4022
}, {
hour: "1am",
weekday: "Friday",
value: 3063
}, {
hour: "2am",
weekday: "Friday",
value: 3638
}, {
hour: "3am",
weekday: "Friday",
value: 3968
}, {
hour: "4am",
weekday: "Friday",
value: 4070
}, {
hour: "5am",
weekday: "Friday",
value: 4019
}, {
hour: "6am",
weekday: "Friday",
value: 4548
}, {
hour: "7am",
weekday: "Friday",
value: 5465
}, {
hour: "8am",
weekday: "Friday",
value: 6909
}, {
hour: "9am",
weekday: "Friday",
value: 7706
}, {
hour: "10am",
weekday: "Friday",
value: 7867
}, {
hour: "11am",
weekday: "Friday",
value: 8615
}, {
hour: "12pm",
weekday: "Friday",
value: 8218
}, {
hour: "1pm",
weekday: "Friday",
value: 7604
}, {
hour: "2pm",
weekday: "Friday",
value: 7429
}, {
hour: "3pm",
weekday: "Friday",
value: 7488
}, {
hour: "4pm",
weekday: "Friday",
value: 7493
}, {
hour: "5pm",
weekday: "Friday",
value: 6998
}, {
hour: "6pm",
weekday: "Friday",
value: 5941
}, {
hour: "7pm",
weekday: "Friday",
value: 5068
}, {
hour: "8pm",
weekday: "Friday",
value: 4636
}, {
hour: "9pm",
weekday: "Friday",
value: 4241
}, {
hour: "10pm",
weekday: "Friday",
value: 3858
}, {
hour: "11pm",
weekday: "Friday",
value: 3833
}, {
hour: "12am",
weekday: "Saturday",
value: 3503
}, {
hour: "1am",
weekday: "Saturday",
value: 2842
}, {
hour: "2am",
weekday: "Saturday",
value: 2808
}, {
hour: "3am",
weekday: "Saturday",
value: 2399
}, {
hour: "4am",
weekday: "Saturday",
value: 2280
}, {
hour: "5am",
weekday: "Saturday",
value: 2139
}, {
hour: "6am",
weekday: "Saturday",
value: 2527
}, {
hour: "7am",
weekday: "Saturday",
value: 2940
}, {
hour: "8am",
weekday: "Saturday",
value: 3066
}, {
hour: "9am",
weekday: "Saturday",
value: 3494
}, {
hour: "10am",
weekday: "Saturday",
value: 3287
}, {
hour: "11am",
weekday: "Saturday",
value: 3416
}, {
hour: "12pm",
weekday: "Saturday",
value: 3432
}, {
hour: "1pm",
weekday: "Saturday",
value: 3523
}, {
hour: "2pm",
weekday: "Saturday",
value: 3542
}, {
hour: "3pm",
weekday: "Saturday",
value: 3347
}, {
hour: "4pm",
weekday: "Saturday",
value: 3292
}, {
hour: "5pm",
weekday: "Saturday",
value: 3416
}, {
hour: "6pm",
weekday: "Saturday",
value: 3131
}, {
hour: "7pm",
weekday: "Saturday",
value: 3057
}, {
hour: "8pm",
weekday: "Saturday",
value: 3227
}, {
hour: "9pm",
weekday: "Saturday",
value: 3060
}, {
hour: "10pm",
weekday: "Saturday",
value: 2855
}, {
hour: "11pm",
weekday: "Saturday",
value: 2625
}
]
series.data.setAll(data);
// Auto-populate X and Y axis category data
var weekdays = [];
var hours = [];
am5.array.each(data, function(row) {
if (weekdays.indexOf(row.weekday) == -1) {
weekdays.push(row.weekday);
}
if (hours.indexOf(row.hour) == -1) {
hours.push(row.hour);
}
});
yAxis.data.setAll(weekdays.map(function(item) {
return { weekday: item }
}));
xAxis.data.setAll(hours.map(function(item) {
return { hour: item }
}));
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
chart.appear(1000, 100);{
"type": "XYChart",
"settings": {
"panX": false,
"panY": false,
"wheelX": "none",
"wheelY": "none",
"paddingLeft": 0,
"layout": {
"type": "VerticalLayout"
}
},
"properties": {
"series": [
"#series-0"
],
"xAxes": [
"#axis-0"
],
"yAxes": [
"#axis-1"
],
"bottomAxesContainer": {
"children": [
{
"type": "HeatLegend",
"settings": {
"orientation": "horizontal",
"marginTop": 10,
"startColor": "@root.interfaceColors.get('primaryButton')",
"endColor": {
"type": "Color",
"value": "#e3764f"
},
"startValue": 2019,
"endValue": 12492
}
}
]
}
},
"refs": [
{
"data-0": [
{
"hour": "12am",
"weekday": "Sunday",
"value": 2990
},
{
"hour": "1am",
"weekday": "Sunday",
"value": 2520
},
{
"hour": "2am",
"weekday": "Sunday",
"value": 2334
},
{
"hour": "3am",
"weekday": "Sunday",
"value": 2230
},
{
"hour": "4am",
"weekday": "Sunday",
"value": 2325
},
{
"hour": "5am",
"weekday": "Sunday",
"value": 2019
},
{
"hour": "6am",
"weekday": "Sunday",
"value": 2128
},
{
"hour": "7am",
"weekday": "Sunday",
"value": 2246
},
{
"hour": "8am",
"weekday": "Sunday",
"value": 2421
},
{
"hour": "9am",
"weekday": "Sunday",
"value": 2788
},
{
"hour": "10am",
"weekday": "Sunday",
"value": 2959
},
{
"hour": "11am",
"weekday": "Sunday",
"value": 3018
},
{
"hour": "12pm",
"weekday": "Sunday",
"value": 3154
},
{
"hour": "1pm",
"weekday": "Sunday",
"value": 3172
},
{
"hour": "2pm",
"weekday": "Sunday",
"value": 3368
},
{
"hour": "3pm",
"weekday": "Sunday",
"value": 3464
},
{
"hour": "4pm",
"weekday": "Sunday",
"value": 3746
},
{
"hour": "5pm",
"weekday": "Sunday",
"value": 3656
},
{
"hour": "6pm",
"weekday": "Sunday",
"value": 3336
},
{
"hour": "7pm",
"weekday": "Sunday",
"value": 3292
},
{
"hour": "8pm",
"weekday": "Sunday",
"value": 3269
},
{
"hour": "9pm",
"weekday": "Sunday",
"value": 3300
},
{
"hour": "10pm",
"weekday": "Sunday",
"value": 3403
},
{
"hour": "11pm",
"weekday": "Sunday",
"value": 3323
},
{
"hour": "12am",
"weekday": "Monday",
"value": 3346
},
{
"hour": "1am",
"weekday": "Monday",
"value": 2725
},
{
"hour": "2am",
"weekday": "Monday",
"value": 3052
},
{
"hour": "3am",
"weekday": "Monday",
"value": 3876
},
{
"hour": "4am",
"weekday": "Monday",
"value": 4453
},
{
"hour": "5am",
"weekday": "Monday",
"value": 3972
},
{
"hour": "6am",
"weekday": "Monday",
"value": 4644
},
{
"hour": "7am",
"weekday": "Monday",
"value": 5715
},
{
"hour": "8am",
"weekday": "Monday",
"value": 7080
},
{
"hour": "9am",
"weekday": "Monday",
"value": 8022
},
{
"hour": "10am",
"weekday": "Monday",
"value": 8446
},
{
"hour": "11am",
"weekday": "Monday",
"value": 9313
},
{
"hour": "12pm",
"weekday": "Monday",
"value": 9011
},
{
"hour": "1pm",
"weekday": "Monday",
"value": 8508
},
{
"hour": "2pm",
"weekday": "Monday",
"value": 8515
},
{
"hour": "3pm",
"weekday": "Monday",
"value": 8399
},
{
"hour": "4pm",
"weekday": "Monday",
"value": 8649
},
{
"hour": "5pm",
"weekday": "Monday",
"value": 7869
},
{
"hour": "6pm",
"weekday": "Monday",
"value": 6933
},
{
"hour": "7pm",
"weekday": "Monday",
"value": 5969
},
{
"hour": "8pm",
"weekday": "Monday",
"value": 5552
},
{
"hour": "9pm",
"weekday": "Monday",
"value": 5434
},
{
"hour": "10pm",
"weekday": "Monday",
"value": 5070
},
{
"hour": "11pm",
"weekday": "Monday",
"value": 4851
},
{
"hour": "12am",
"weekday": "Tuesday",
"value": 4468
},
{
"hour": "1am",
"weekday": "Tuesday",
"value": 3306
},
{
"hour": "2am",
"weekday": "Tuesday",
"value": 3906
},
{
"hour": "3am",
"weekday": "Tuesday",
"value": 4413
},
{
"hour": "4am",
"weekday": "Tuesday",
"value": 4726
},
{
"hour": "5am",
"weekday": "Tuesday",
"value": 4584
},
{
"hour": "6am",
"weekday": "Tuesday",
"value": 5717
},
{
"hour": "7am",
"weekday": "Tuesday",
"value": 6504
},
{
"hour": "8am",
"weekday": "Tuesday",
"value": 8104
},
{
"hour": "9am",
"weekday": "Tuesday",
"value": 8813
},
{
"hour": "10am",
"weekday": "Tuesday",
"value": 9278
},
{
"hour": "11am",
"weekday": "Tuesday",
"value": 10425
},
{
"hour": "12pm",
"weekday": "Tuesday",
"value": 10137
},
{
"hour": "1pm",
"weekday": "Tuesday",
"value": 9290
},
{
"hour": "2pm",
"weekday": "Tuesday",
"value": 9255
},
{
"hour": "3pm",
"weekday": "Tuesday",
"value": 9614
},
{
"hour": "4pm",
"weekday": "Tuesday",
"value": 9713
},
{
"hour": "5pm",
"weekday": "Tuesday",
"value": 9667
},
{
"hour": "6pm",
"weekday": "Tuesday",
"value": 8774
},
{
"hour": "7pm",
"weekday": "Tuesday",
"value": 8649
},
{
"hour": "8pm",
"weekday": "Tuesday",
"value": 9937
},
{
"hour": "9pm",
"weekday": "Tuesday",
"value": 10286
},
{
"hour": "10pm",
"weekday": "Tuesday",
"value": 9175
},
{
"hour": "11pm",
"weekday": "Tuesday",
"value": 8581
},
{
"hour": "12am",
"weekday": "Wednesday",
"value": 8145
},
{
"hour": "1am",
"weekday": "Wednesday",
"value": 7177
},
{
"hour": "2am",
"weekday": "Wednesday",
"value": 5657
},
{
"hour": "3am",
"weekday": "Wednesday",
"value": 6802
},
{
"hour": "4am",
"weekday": "Wednesday",
"value": 8159
},
{
"hour": "5am",
"weekday": "Wednesday",
"value": 8449
},
{
"hour": "6am",
"weekday": "Wednesday",
"value": 9453
},
{
"hour": "7am",
"weekday": "Wednesday",
"value": 9947
},
{
"hour": "8am",
"weekday": "Wednesday",
"value": 11471
},
{
"hour": "9am",
"weekday": "Wednesday",
"value": 12492
},
{
"hour": "10am",
"weekday": "Wednesday",
"value": 9388
},
{
"hour": "11am",
"weekday": "Wednesday",
"value": 9928
},
{
"hour": "12pm",
"weekday": "Wednesday",
"value": 9644
},
{
"hour": "1pm",
"weekday": "Wednesday",
"value": 9034
},
{
"hour": "2pm",
"weekday": "Wednesday",
"value": 8964
},
{
"hour": "3pm",
"weekday": "Wednesday",
"value": 9069
},
{
"hour": "4pm",
"weekday": "Wednesday",
"value": 8898
},
{
"hour": "5pm",
"weekday": "Wednesday",
"value": 8322
},
{
"hour": "6pm",
"weekday": "Wednesday",
"value": 6909
},
{
"hour": "7pm",
"weekday": "Wednesday",
"value": 5810
},
{
"hour": "8pm",
"weekday": "Wednesday",
"value": 5151
},
{
"hour": "9pm",
"weekday": "Wednesday",
"value": 4911
},
{
"hour": "10pm",
"weekday": "Wednesday",
"value": 4487
},
{
"hour": "11pm",
"weekday": "Wednesday",
"value": 4118
},
{
"hour": "12am",
"weekday": "Thursday",
"value": 3689
},
{
"hour": "1am",
"weekday": "Thursday",
"value": 3081
},
{
"hour": "2am",
"weekday": "Thursday",
"value": 6525
},
{
"hour": "3am",
"weekday": "Thursday",
"value": 6228
},
{
"hour": "4am",
"weekday": "Thursday",
"value": 6917
},
{
"hour": "5am",
"weekday": "Thursday",
"value": 6568
},
{
"hour": "6am",
"weekday": "Thursday",
"value": 6405
},
{
"hour": "7am",
"weekday": "Thursday",
"value": 8106
},
{
"hour": "8am",
"weekday": "Thursday",
"value": 8542
},
{
"hour": "9am",
"weekday": "Thursday",
"value": 8501
},
{
"hour": "10am",
"weekday": "Thursday",
"value": 8802
},
{
"hour": "11am",
"weekday": "Thursday",
"value": 9420
},
{
"hour": "12pm",
"weekday": "Thursday",
"value": 8966
},
{
"hour": "1pm",
"weekday": "Thursday",
"value": 8135
},
{
"hour": "2pm",
"weekday": "Thursday",
"value": 8224
},
{
"hour": "3pm",
"weekday": "Thursday",
"value": 8387
},
{
"hour": "4pm",
"weekday": "Thursday",
"value": 8218
},
{
"hour": "5pm",
"weekday": "Thursday",
"value": 7641
},
{
"hour": "6pm",
"weekday": "Thursday",
"value": 6469
},
{
"hour": "7pm",
"weekday": "Thursday",
"value": 5441
},
{
"hour": "8pm",
"weekday": "Thursday",
"value": 4952
},
{
"hour": "9pm",
"weekday": "Thursday",
"value": 4643
},
{
"hour": "10pm",
"weekday": "Thursday",
"value": 4393
},
{
"hour": "11pm",
"weekday": "Thursday",
"value": 4017
},
{
"hour": "12am",
"weekday": "Friday",
"value": 4022
},
{
"hour": "1am",
"weekday": "Friday",
"value": 3063
},
{
"hour": "2am",
"weekday": "Friday",
"value": 3638
},
{
"hour": "3am",
"weekday": "Friday",
"value": 3968
},
{
"hour": "4am",
"weekday": "Friday",
"value": 4070
},
{
"hour": "5am",
"weekday": "Friday",
"value": 4019
},
{
"hour": "6am",
"weekday": "Friday",
"value": 4548
},
{
"hour": "7am",
"weekday": "Friday",
"value": 5465
},
{
"hour": "8am",
"weekday": "Friday",
"value": 6909
},
{
"hour": "9am",
"weekday": "Friday",
"value": 7706
},
{
"hour": "10am",
"weekday": "Friday",
"value": 7867
},
{
"hour": "11am",
"weekday": "Friday",
"value": 8615
},
{
"hour": "12pm",
"weekday": "Friday",
"value": 8218
},
{
"hour": "1pm",
"weekday": "Friday",
"value": 7604
},
{
"hour": "2pm",
"weekday": "Friday",
"value": 7429
},
{
"hour": "3pm",
"weekday": "Friday",
"value": 7488
},
{
"hour": "4pm",
"weekday": "Friday",
"value": 7493
},
{
"hour": "5pm",
"weekday": "Friday",
"value": 6998
},
{
"hour": "6pm",
"weekday": "Friday",
"value": 5941
},
{
"hour": "7pm",
"weekday": "Friday",
"value": 5068
},
{
"hour": "8pm",
"weekday": "Friday",
"value": 4636
},
{
"hour": "9pm",
"weekday": "Friday",
"value": 4241
},
{
"hour": "10pm",
"weekday": "Friday",
"value": 3858
},
{
"hour": "11pm",
"weekday": "Friday",
"value": 3833
},
{
"hour": "12am",
"weekday": "Saturday",
"value": 3503
},
{
"hour": "1am",
"weekday": "Saturday",
"value": 2842
},
{
"hour": "2am",
"weekday": "Saturday",
"value": 2808
},
{
"hour": "3am",
"weekday": "Saturday",
"value": 2399
},
{
"hour": "4am",
"weekday": "Saturday",
"value": 2280
},
{
"hour": "5am",
"weekday": "Saturday",
"value": 2139
},
{
"hour": "6am",
"weekday": "Saturday",
"value": 2527
},
{
"hour": "7am",
"weekday": "Saturday",
"value": 2940
},
{
"hour": "8am",
"weekday": "Saturday",
"value": 3066
},
{
"hour": "9am",
"weekday": "Saturday",
"value": 3494
},
{
"hour": "10am",
"weekday": "Saturday",
"value": 3287
},
{
"hour": "11am",
"weekday": "Saturday",
"value": 3416
},
{
"hour": "12pm",
"weekday": "Saturday",
"value": 3432
},
{
"hour": "1pm",
"weekday": "Saturday",
"value": 3523
},
{
"hour": "2pm",
"weekday": "Saturday",
"value": 3542
},
{
"hour": "3pm",
"weekday": "Saturday",
"value": 3347
},
{
"hour": "4pm",
"weekday": "Saturday",
"value": 3292
},
{
"hour": "5pm",
"weekday": "Saturday",
"value": 3416
},
{
"hour": "6pm",
"weekday": "Saturday",
"value": 3131
},
{
"hour": "7pm",
"weekday": "Saturday",
"value": 3057
},
{
"hour": "8pm",
"weekday": "Saturday",
"value": 3227
},
{
"hour": "9pm",
"weekday": "Saturday",
"value": 3060
},
{
"hour": "10pm",
"weekday": "Saturday",
"value": 2855
},
{
"hour": "11pm",
"weekday": "Saturday",
"value": 2625
}
]
},
{
"data-1": [
{
"hour": "12am"
},
{
"hour": "1am"
},
{
"hour": "2am"
},
{
"hour": "3am"
},
{
"hour": "4am"
},
{
"hour": "5am"
},
{
"hour": "6am"
},
{
"hour": "7am"
},
{
"hour": "8am"
},
{
"hour": "9am"
},
{
"hour": "10am"
},
{
"hour": "11am"
},
{
"hour": "12pm"
},
{
"hour": "1pm"
},
{
"hour": "2pm"
},
{
"hour": "3pm"
},
{
"hour": "4pm"
},
{
"hour": "5pm"
},
{
"hour": "6pm"
},
{
"hour": "7pm"
},
{
"hour": "8pm"
},
{
"hour": "9pm"
},
{
"hour": "10pm"
},
{
"hour": "11pm"
}
]
},
{
"data-2": [
{
"weekday": "Sunday"
},
{
"weekday": "Monday"
},
{
"weekday": "Tuesday"
},
{
"weekday": "Wednesday"
},
{
"weekday": "Thursday"
},
{
"weekday": "Friday"
},
{
"weekday": "Saturday"
}
]
},
{
"template-0": {
"type": "Template",
"settings": {
"tooltipText": "{categoryY}, {categoryX}: {value}",
"strokeOpacity": 1,
"strokeWidth": 2,
"width": {
"type": "Percent",
"value": 100
},
"height": {
"type": "Percent",
"value": 100
}
}
}
},
{
"axis-0": {
"type": "CategoryAxis",
"settings": {
"renderer": {
"type": "AxisRendererX",
"settings": {
"visible": false,
"minGridDistance": 50,
"opposite": true,
"minorGridEnabled": true
},
"properties": {
"grid": {
"properties": {
"template": {
"settings": {
"visible": false
}
}
}
}
}
},
"categoryField": "hour"
},
"properties": {
"data": "#data-1"
}
}
},
{
"axis-1": {
"type": "CategoryAxis",
"settings": {
"maxDeviation": 0,
"renderer": {
"type": "AxisRendererY",
"settings": {
"visible": false,
"minGridDistance": 20,
"inversed": true,
"minorGridEnabled": true
},
"properties": {
"grid": {
"properties": {
"template": {
"settings": {
"visible": false
}
}
}
}
}
},
"categoryField": "weekday"
},
"properties": {
"data": "#data-2"
}
}
},
{
"series-0": {
"type": "ColumnSeries",
"settings": {
"calculateAggregates": true,
"stroke": "@root.interfaceColors.get('background')",
"clustered": false,
"xAxis": "#axis-0",
"yAxis": "#axis-1",
"categoryXField": "hour",
"categoryYField": "weekday",
"valueField": "value",
"heatRules": [
{
"target": "#template-0",
"min": "@root.interfaceColors.get('primaryButton')",
"max": {
"type": "Color",
"value": "#e3764f"
},
"dataField": "value",
"key": "fill",
"__parse": true
}
]
},
"properties": {
"data": "#data-0",
"columns": {
"properties": {
"template": "#template-0"
}
}
}
}
}
]
}
