A heat map drawn with bubbles instead of colored cells: a week of hourly values, one row per day, and the bigger the bubble, the higher the value. The values change every second.
A heat map shows one value for every pair of two categories, here day and hour. Colored cells are compact, but people compare sizes more easily than shades, so bubbles make the busy and quiet times stand out. Each bubble is sized between the smallest and the largest value on the chart.
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, // the plot doesn't pan when dragged
panY: false,
wheelX: "none", // the mouse wheel doesn't zoom or pan
wheelY: "none",
layout: root.verticalLayout
})
);
// Create axes and their renderers
var yRenderer = am5xy.AxisRendererY.new(root, {
visible: false, // no axis line
minGridDistance: 20, // a label for every day down to 20px apart
// the first day, Sunday, at the top
inversed: 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 and last day
renderer: yRenderer,
categoryField: "weekday"
})
);
var xRenderer = am5xy.AxisRendererX.new(root, {
visible: false, // no axis line
minGridDistance: 40, // at least 40px between hour labels; some are skipped when tighter
opposite: true // the hours along the top
});
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, {
// finds the lowest and highest value, which the heat rule below sizes the bubbles by
calculateAggregates: true,
// bubbles are outlined in the background color, so touching bubbles stay apart in light and dark mode
stroke: root.interfaceColors.get("background"),
clustered: false,
xAxis: xAxis,
yAxis: yAxis,
categoryXField: "hour",
categoryYField: "weekday",
valueField: "value"
})
);
// the columns only place the bubbles in their cells, so they stay hidden
series.columns.template.setAll({
forceHidden: true
});
// one template for all bubbles, so the heat rule can size them
var circleTemplate = am5.Template.new({ radius: 5 });
// Add circle bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
series.bullets.push(function () {
var graphics = am5.Circle.new(
root, {
stroke: series.get("stroke"), // the background-colored outline...
strokeWidth: 2, // ...2px wide
fill: series.get("fill"), // the series color
// day, hour and the value in bold
tooltipText: "{categoryY}, {categoryX}: [bold]{value.formatNumber('#,###.')}[/]"
}, circleTemplate
);
return am5.Bullet.new(root, {
sprite: graphics
});
});
// Set up heat rules
// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
var heatRule = {
target: circleTemplate,
min: 3, // the smallest bubble has a 3px radius
max: 18, // replaced below to fit the cells
dataField: "value",
key: "radius"
};
series.set("heatRules", [heatRule]);
// Size the biggest bubble to its cell (24 hours by 7 days), whatever the size of the chart:
// it may overlap its neighbors a little, and the outline keeps them apart
chart.plotContainer.events.on("boundschanged", function () {
// the smaller side of one cell
var cellSize = Math.min(chart.plotContainer.width() / 24, chart.plotContainer.height() / 7);
heatRule.max = Math.max(4, cellSize * 0.7); // a radius of 70% of the cell, at least 4px
series.set("heatRules", [heatRule]); // set the rule again, so the bubbles take the new size
});
// 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);
yAxis.data.setAll([
{ weekday: "Sunday" },
{ weekday: "Monday" },
{ weekday: "Tuesday" },
{ weekday: "Wednesday" },
{ weekday: "Thursday" },
{ weekday: "Friday" },
{ weekday: "Saturday" }
]);
xAxis.data.setAll([
{ 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" }
]);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
chart.appear(1000, 100);
// Every second, move each value up to 20% above or below its starting value
setInterval(function () {
am5.array.each(data, function (d, i) {
series.data.setIndex(i, {
value: d.value * (0.8 + Math.random() * 0.4), // 80% to 120% of the starting value
hour: d.hour,
weekday: d.weekday
});
});
}, 1000);{
"type": "XYChart",
"settings": {
"panX": false,
"panY": false,
"wheelX": "none",
"wheelY": "none",
"layout": {
"type": "VerticalLayout"
}
},
"properties": {
"series": [
"#series-0"
],
"xAxes": [
"#axis-0"
],
"yAxes": [
"#axis-1"
]
},
"refs": [
{
"data-0": [
{
"value": 3374.087085660991,
"hour": "12am",
"weekday": "Sunday"
},
{
"value": 2795.848986606907,
"hour": "1am",
"weekday": "Sunday"
},
{
"value": 2716.1766566199153,
"hour": "2am",
"weekday": "Sunday"
},
{
"value": 1934.0170843698513,
"hour": "3am",
"weekday": "Sunday"
},
{
"value": 2067.9835162370337,
"hour": "4am",
"weekday": "Sunday"
},
{
"value": 1935.8245569812914,
"hour": "5am",
"weekday": "Sunday"
},
{
"value": 2133.788096486834,
"hour": "6am",
"weekday": "Sunday"
},
{
"value": 1896.0095642293063,
"hour": "7am",
"weekday": "Sunday"
},
{
"value": 2149.5466235766567,
"hour": "8am",
"weekday": "Sunday"
},
{
"value": 3340.2952892930307,
"hour": "9am",
"weekday": "Sunday"
},
{
"value": 2711.476848692961,
"hour": "10am",
"weekday": "Sunday"
},
{
"value": 2496.6769423645283,
"hour": "11am",
"weekday": "Sunday"
},
{
"value": 3073.006215118915,
"hour": "12pm",
"weekday": "Sunday"
},
{
"value": 2647.9531199353514,
"hour": "1pm",
"weekday": "Sunday"
},
{
"value": 3498.1829453792448,
"hour": "2pm",
"weekday": "Sunday"
},
{
"value": 2800.3535525704187,
"hour": "3pm",
"weekday": "Sunday"
},
{
"value": 3832.937671466857,
"hour": "4pm",
"weekday": "Sunday"
},
{
"value": 4159.355758863033,
"hour": "5pm",
"weekday": "Sunday"
},
{
"value": 3976.6390610044427,
"hour": "6pm",
"weekday": "Sunday"
},
{
"value": 3713.7136143405237,
"hour": "7pm",
"weekday": "Sunday"
},
{
"value": 3243.4557375690815,
"hour": "8pm",
"weekday": "Sunday"
},
{
"value": 3652.971788280915,
"hour": "9pm",
"weekday": "Sunday"
},
{
"value": 3135.665451245133,
"hour": "10pm",
"weekday": "Sunday"
},
{
"value": 3575.7457787137673,
"hour": "11pm",
"weekday": "Sunday"
},
{
"value": 3973.24048532481,
"hour": "12am",
"weekday": "Monday"
},
{
"value": 2477.1827872510917,
"hour": "1am",
"weekday": "Monday"
},
{
"value": 3239.848276767215,
"hour": "2am",
"weekday": "Monday"
},
{
"value": 3360.190268006167,
"hour": "3am",
"weekday": "Monday"
},
{
"value": 3704.6619889312556,
"hour": "4am",
"weekday": "Monday"
},
{
"value": 3809.4881249973478,
"hour": "5am",
"weekday": "Monday"
},
{
"value": 3876.266967426661,
"hour": "6am",
"weekday": "Monday"
},
{
"value": 4782.35899677904,
"hour": "7am",
"weekday": "Monday"
},
{
"value": 5742.200822410541,
"hour": "8am",
"weekday": "Monday"
},
{
"value": 8226.670252078466,
"hour": "9am",
"weekday": "Monday"
},
{
"value": 9620.099227667744,
"hour": "10am",
"weekday": "Monday"
},
{
"value": 7942.944821410561,
"hour": "11am",
"weekday": "Monday"
},
{
"value": 8896.35163557295,
"hour": "12pm",
"weekday": "Monday"
},
{
"value": 9433.48056156805,
"hour": "1pm",
"weekday": "Monday"
},
{
"value": 8677.312995931887,
"hour": "2pm",
"weekday": "Monday"
},
{
"value": 9234.015129508642,
"hour": "3pm",
"weekday": "Monday"
},
{
"value": 8260.775193987914,
"hour": "4pm",
"weekday": "Monday"
},
{
"value": 9236.553680639958,
"hour": "5pm",
"weekday": "Monday"
},
{
"value": 7321.538560213316,
"hour": "6pm",
"weekday": "Monday"
},
{
"value": 5189.192717734792,
"hour": "7pm",
"weekday": "Monday"
},
{
"value": 4979.649127391574,
"hour": "8pm",
"weekday": "Monday"
},
{
"value": 4626.821855416552,
"hour": "9pm",
"weekday": "Monday"
},
{
"value": 4503.175289937748,
"hour": "10pm",
"weekday": "Monday"
},
{
"value": 5766.321085189982,
"hour": "11pm",
"weekday": "Monday"
},
{
"value": 4934.510188545316,
"hour": "12am",
"weekday": "Tuesday"
},
{
"value": 3714.6156253278605,
"hour": "1am",
"weekday": "Tuesday"
},
{
"value": 4435.029043149048,
"hour": "2am",
"weekday": "Tuesday"
},
{
"value": 3614.082258749477,
"hour": "3am",
"weekday": "Tuesday"
},
{
"value": 5125.862846877216,
"hour": "4am",
"weekday": "Tuesday"
},
{
"value": 4656.756353999121,
"hour": "5am",
"weekday": "Tuesday"
},
{
"value": 4712.363561526367,
"hour": "6am",
"weekday": "Tuesday"
},
{
"value": 6919.481387083663,
"hour": "7am",
"weekday": "Tuesday"
},
{
"value": 6697.336241943567,
"hour": "8am",
"weekday": "Tuesday"
},
{
"value": 8651.195501175522,
"hour": "9am",
"weekday": "Tuesday"
},
{
"value": 11100.151362707036,
"hour": "10am",
"weekday": "Tuesday"
},
{
"value": 10338.634897122278,
"hour": "11am",
"weekday": "Tuesday"
},
{
"value": 9485.038552578355,
"hour": "12pm",
"weekday": "Tuesday"
},
{
"value": 9704.77164634023,
"hour": "1pm",
"weekday": "Tuesday"
},
{
"value": 7618.463668114298,
"hour": "2pm",
"weekday": "Tuesday"
},
{
"value": 7913.263928864882,
"hour": "3pm",
"weekday": "Tuesday"
},
{
"value": 10293.19671667475,
"hour": "4pm",
"weekday": "Tuesday"
},
{
"value": 9211.04862427035,
"hour": "5pm",
"weekday": "Tuesday"
},
{
"value": 8085.267338320831,
"hour": "6pm",
"weekday": "Tuesday"
},
{
"value": 7329.013354112204,
"hour": "7pm",
"weekday": "Tuesday"
},
{
"value": 8675.243085390477,
"hour": "8pm",
"weekday": "Tuesday"
},
{
"value": 9800.626203416445,
"hour": "9pm",
"weekday": "Tuesday"
},
{
"value": 8842.02759751862,
"hour": "10pm",
"weekday": "Tuesday"
},
{
"value": 7626.431895376605,
"hour": "11pm",
"weekday": "Tuesday"
},
{
"value": 8076.147604642558,
"hour": "12am",
"weekday": "Wednesday"
},
{
"value": 7674.556100198421,
"hour": "1am",
"weekday": "Wednesday"
},
{
"value": 5449.134269861651,
"hour": "2am",
"weekday": "Wednesday"
},
{
"value": 7541.047719222055,
"hour": "3am",
"weekday": "Wednesday"
},
{
"value": 6899.722490096537,
"hour": "4am",
"weekday": "Wednesday"
},
{
"value": 6996.81614356093,
"hour": "5am",
"weekday": "Wednesday"
},
{
"value": 11096.03949031933,
"hour": "6am",
"weekday": "Wednesday"
},
{
"value": 9971.069607928745,
"hour": "7am",
"weekday": "Wednesday"
},
{
"value": 13217.421327566693,
"hour": "8am",
"weekday": "Wednesday"
},
{
"value": 12736.09284770162,
"hour": "9am",
"weekday": "Wednesday"
},
{
"value": 8167.786121325736,
"hour": "10am",
"weekday": "Wednesday"
},
{
"value": 11298.806514703196,
"hour": "11am",
"weekday": "Wednesday"
},
{
"value": 8798.855982139783,
"hour": "12pm",
"weekday": "Wednesday"
},
{
"value": 7268.106600615312,
"hour": "1pm",
"weekday": "Wednesday"
},
{
"value": 9577.820258084588,
"hour": "2pm",
"weekday": "Wednesday"
},
{
"value": 10046.9844803101,
"hour": "3pm",
"weekday": "Wednesday"
},
{
"value": 9479.98903615008,
"hour": "4pm",
"weekday": "Wednesday"
},
{
"value": 8093.639576185844,
"hour": "5pm",
"weekday": "Wednesday"
},
{
"value": 6845.523909476809,
"hour": "6pm",
"weekday": "Wednesday"
},
{
"value": 6699.549274511696,
"hour": "7pm",
"weekday": "Wednesday"
},
{
"value": 4818.337021946815,
"hour": "8pm",
"weekday": "Wednesday"
},
{
"value": 4325.208930299504,
"hour": "9pm",
"weekday": "Wednesday"
},
{
"value": 5118.704977551987,
"hour": "10pm",
"weekday": "Wednesday"
},
{
"value": 4074.471298831099,
"hour": "11pm",
"weekday": "Wednesday"
},
{
"value": 3134.3767195284477,
"hour": "12am",
"weekday": "Thursday"
},
{
"value": 3293.4328461664886,
"hour": "1am",
"weekday": "Thursday"
},
{
"value": 5526.537825243517,
"hour": "2am",
"weekday": "Thursday"
},
{
"value": 6861.0576191889895,
"hour": "3am",
"weekday": "Thursday"
},
{
"value": 7181.547679260526,
"hour": "4am",
"weekday": "Thursday"
},
{
"value": 5851.558748023034,
"hour": "5am",
"weekday": "Thursday"
},
{
"value": 6042.420138388909,
"hour": "6am",
"weekday": "Thursday"
},
{
"value": 7146.485037259304,
"hour": "7am",
"weekday": "Thursday"
},
{
"value": 7707.4409740119,
"hour": "8am",
"weekday": "Thursday"
},
{
"value": 8905.911324420527,
"hour": "9am",
"weekday": "Thursday"
},
{
"value": 8095.007220720062,
"hour": "10am",
"weekday": "Thursday"
},
{
"value": 8794.631069669997,
"hour": "11am",
"weekday": "Thursday"
},
{
"value": 7655.625219559696,
"hour": "12pm",
"weekday": "Thursday"
},
{
"value": 7321.361342944274,
"hour": "1pm",
"weekday": "Thursday"
},
{
"value": 7844.682349055255,
"hour": "2pm",
"weekday": "Thursday"
},
{
"value": 9484.57899410385,
"hour": "3pm",
"weekday": "Thursday"
},
{
"value": 8986.493552857874,
"hour": "4pm",
"weekday": "Thursday"
},
{
"value": 8170.868682632977,
"hour": "5pm",
"weekday": "Thursday"
},
{
"value": 7505.945898769812,
"hour": "6pm",
"weekday": "Thursday"
},
{
"value": 5244.348843992666,
"hour": "7pm",
"weekday": "Thursday"
},
{
"value": 4274.122967918049,
"hour": "8pm",
"weekday": "Thursday"
},
{
"value": 4184.375375527114,
"hour": "9pm",
"weekday": "Thursday"
},
{
"value": 4403.193575154941,
"hour": "10pm",
"weekday": "Thursday"
},
{
"value": 3857.5324252713654,
"hour": "11pm",
"weekday": "Thursday"
},
{
"value": 4553.470993061687,
"hour": "12am",
"weekday": "Friday"
},
{
"value": 3493.4023069977325,
"hour": "1am",
"weekday": "Friday"
},
{
"value": 3637.1238873703232,
"hour": "2am",
"weekday": "Friday"
},
{
"value": 4159.792070594742,
"hour": "3am",
"weekday": "Friday"
},
{
"value": 3932.8128478975764,
"hour": "4am",
"weekday": "Friday"
},
{
"value": 3341.3643154789656,
"hour": "5am",
"weekday": "Friday"
},
{
"value": 4904.621086609034,
"hour": "6am",
"weekday": "Friday"
},
{
"value": 5173.47831282373,
"hour": "7am",
"weekday": "Friday"
},
{
"value": 7398.516755999338,
"hour": "8am",
"weekday": "Friday"
},
{
"value": 8189.730706994388,
"hour": "9am",
"weekday": "Friday"
},
{
"value": 8606.264995909343,
"hour": "10am",
"weekday": "Friday"
},
{
"value": 8995.961401056533,
"hour": "11am",
"weekday": "Friday"
},
{
"value": 7126.893841614415,
"hour": "12pm",
"weekday": "Friday"
},
{
"value": 7396.905441015465,
"hour": "1pm",
"weekday": "Friday"
},
{
"value": 8349.675613752557,
"hour": "2pm",
"weekday": "Friday"
},
{
"value": 6103.260018862885,
"hour": "3pm",
"weekday": "Friday"
},
{
"value": 8430.04824740161,
"hour": "4pm",
"weekday": "Friday"
},
{
"value": 7829.462307707028,
"hour": "5pm",
"weekday": "Friday"
},
{
"value": 5677.320740115878,
"hour": "6pm",
"weekday": "Friday"
},
{
"value": 4224.205699068881,
"hour": "7pm",
"weekday": "Friday"
},
{
"value": 4187.182520809337,
"hour": "8pm",
"weekday": "Friday"
},
{
"value": 4046.4115229861395,
"hour": "9pm",
"weekday": "Friday"
},
{
"value": 4205.627268598885,
"hour": "10pm",
"weekday": "Friday"
},
{
"value": 3332.99810550276,
"hour": "11pm",
"weekday": "Friday"
},
{
"value": 3631.5209481063384,
"hour": "12am",
"weekday": "Saturday"
},
{
"value": 2578.298993724007,
"hour": "1am",
"weekday": "Saturday"
},
{
"value": 2697.7270770439045,
"hour": "2am",
"weekday": "Saturday"
},
{
"value": 2011.8220307723473,
"hour": "3am",
"weekday": "Saturday"
},
{
"value": 2391.9543883764095,
"hour": "4am",
"weekday": "Saturday"
},
{
"value": 2128.4170832512027,
"hour": "5am",
"weekday": "Saturday"
},
{
"value": 2359.601151781066,
"hour": "6am",
"weekday": "Saturday"
},
{
"value": 2860.121290956118,
"hour": "7am",
"weekday": "Saturday"
},
{
"value": 2517.805374217701,
"hour": "8am",
"weekday": "Saturday"
},
{
"value": 4043.2206151079395,
"hour": "9am",
"weekday": "Saturday"
},
{
"value": 2657.1556810643956,
"hour": "10am",
"weekday": "Saturday"
},
{
"value": 3669.4112723435574,
"hour": "11am",
"weekday": "Saturday"
},
{
"value": 3467.4553364848466,
"hour": "12pm",
"weekday": "Saturday"
},
{
"value": 3786.3244239609908,
"hour": "1pm",
"weekday": "Saturday"
},
{
"value": 3969.3519222145183,
"hour": "2pm",
"weekday": "Saturday"
},
{
"value": 3181.545500226287,
"hour": "3pm",
"weekday": "Saturday"
},
{
"value": 3868.8320341637473,
"hour": "4pm",
"weekday": "Saturday"
},
{
"value": 3343.824982905873,
"hour": "5pm",
"weekday": "Saturday"
},
{
"value": 3658.0922154536224,
"hour": "6pm",
"weekday": "Saturday"
},
{
"value": 2704.582931304871,
"hour": "7pm",
"weekday": "Saturday"
},
{
"value": 3736.2421415533977,
"hour": "8pm",
"weekday": "Saturday"
},
{
"value": 3543.109463626758,
"hour": "9pm",
"weekday": "Saturday"
},
{
"value": 2961.4282845751713,
"hour": "10pm",
"weekday": "Saturday"
},
{
"value": 2239.919077593359,
"hour": "11pm",
"weekday": "Saturday"
}
]
},
{
"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": {
"radius": 5
}
}
},
{
"axis-0": {
"type": "CategoryAxis",
"settings": {
"renderer": {
"type": "AxisRendererX",
"settings": {
"visible": false,
"minGridDistance": 40,
"opposite": 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
},
"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": 3,
"max": 24.569270833333334,
"dataField": "value",
"key": "radius",
"__parse": true
}
]
},
"properties": {
"data": "#data-0",
"columns": {
"properties": {
"template": {
"settings": {
"forceHidden": true
}
}
}
},
"bullets": [
{
"type": "Bullet",
"settings": {
"sprite": {
"type": "Circle",
"settings": {
"stroke": "@series.get('stroke')",
"strokeWidth": 2,
"fill": "@series.get('fill')",
"tooltipText": "{categoryY}, {categoryX}: [bold]{value.formatNumber('#,###.')}[/]"
},
"properties": {
"template": "#template-0"
}
}
}
}
]
}
}
}
]
}
