1
I need to create a heat map with a football field, however, I’m not getting...
I’m using heatmap.js (at this link), but I’m not getting it...
I have already followed the step-by-step that is given in the repository, but it did not work...
Currently my code follows this way:
<html>
<head>
<title>Mapa de calor do jogo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="heatmap/build/heatmap.js"></script>
</head>
<body>
<h4>Mapa de calor do campo</h4>
<script type="text/javascript">
window.onload = function() {
var config = {
container: document.getElementById('heatmapContainer'),
radius: 10,
maxOpacity: .5,
minOpacity: 0,
blur: .75
};
// create heatmap with configuration
var heatmapInstance = h337.create(config);
// a single datapoint
var dataPoint = {
x: 5, // x coordinate of the datapoint, a number
y: 5, // y coordinate of the datapoint, a number
value: 100 // the value at datapoint(x, y)
};
heatmapInstance.addData(dataPoint);
// multiple datapoints (for data initialization use setData!!)
var dataPoints = [dataPoint, dataPoint, dataPoint, dataPoint];
heatmapInstance.addData(dataPoints);
var data = {
max: 100,
min: 0,
data: [
dataPoint, dataPoint, dataPoint, dataPoint
]
};
heatmapInstance.setData(data);
}
</script>
<div id="heatmapContainer"></div>
</body>
</html>Has anyone ever had the same problem? Or can you shed some light on where the problem might be?
The archive JS used, is the same that is in the repository that posted the link.
Subsequently, the data for heatmap will come from API of footstats.
1 - Have you checked if the heatmap files are in heatmap/build/heatmap.js as you indicate in the tag script? The error says that these files are not present in your project. 2 - choose one of the ways, presented in your example, to create dataPoint. After getting with just one apply the other examples.
– Joziélio Santiago