65 lines
1.7 KiB
HTML
65 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Activity Heatmap</title>
|
|
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
|
|
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
|
|
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="chartdiv" style="width: 100%; height: 500px"></div>
|
|
|
|
<script>
|
|
am5.ready(function () {
|
|
var root = am5.Root.new("chartdiv");
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
var chart = root.container.children.push(
|
|
am5xy.XYChart.new(root, {
|
|
panX: true,
|
|
panY: true,
|
|
wheelX: "none",
|
|
wheelY: "none",
|
|
}),
|
|
);
|
|
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "date",
|
|
renderer: am5xy.AxisRendererX.new(root, {}),
|
|
tooltip: am5.Tooltip.new(root, {}),
|
|
}),
|
|
);
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: am5xy.AxisRendererY.new(root, {}),
|
|
}),
|
|
);
|
|
|
|
var series = chart.series.push(
|
|
am5xy.ColumnSeries.new(root, {
|
|
name: "Activity",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "count",
|
|
categoryXField: "date",
|
|
tooltip: am5.Tooltip.new(root, {
|
|
labelText: "{valueY}",
|
|
}),
|
|
}),
|
|
);
|
|
|
|
fetch("activity_data.json")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
xAxis.data.setAll(data);
|
|
series.data.setAll(data);
|
|
});
|
|
|
|
chart.appear(1000, 100);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|