jquery - Javascript heatmap ReferenceError h337.create - Stack Overflow

admin管理员组

文章数量:1415138

I am modifying an existing project from github which uses heatmap.js to generate a heatmap from a match in the game "Counter-Strike: Global Offensive", the original developer did not seem to finish this part of the code or it has bugs in it. The Firebug console says this as the only error:

ReferenceError: h337 is not defined
var heatmap = h337.create(

This is the line that it seems to blame: .php#L26

I think there is a typo/error somewhere here, after spending hours trying to locate it I am unable to do so.

I tried generating a heatmap using both Chrome (v46.0.2490.80), Firefox (v41.0.2) however nothing happens and the only error logged is the TypeError one which is all I have to go after.

Any tips/hints as to what can be causing this? I have been googling/searching stackoverflow for similar issues without success, I think there is something silly I am overlooking..

I am modifying an existing project from github which uses heatmap.js to generate a heatmap from a match in the game "Counter-Strike: Global Offensive", the original developer did not seem to finish this part of the code or it has bugs in it. The Firebug console says this as the only error:

ReferenceError: h337 is not defined
var heatmap = h337.create(

This is the line that it seems to blame: https://github./deStrO/eBot-CSGO-Web/blob/master/apps/backend/modules/matchs/templates/_stats_heatmap.php#L26

I think there is a typo/error somewhere here, after spending hours trying to locate it I am unable to do so.

I tried generating a heatmap using both Chrome (v46.0.2490.80), Firefox (v41.0.2) however nothing happens and the only error logged is the TypeError one which is all I have to go after.

Any tips/hints as to what can be causing this? I have been googling/searching stackoverflow for similar issues without success, I think there is something silly I am overlooking..

• javascript
• jquery
• highcharts
• typeerror
• heatmap

Share Improve this question Follow edited Feb 26, 2017 at 20:05 Soma Holiday 19511 gold badge11 silver badge1313 bronze badges asked Feb 6, 2016 at 3:18 duszdusz 93311 gold badge99 silver badges1515 bronze badges 13

• Have you tried to replace var heatmap = h337.create(... for var heatmap = new HeatmapOverlay(? It was the solution for me – Sapikelio Commented Feb 8, 2016 at 9:37
• is the library even loaded? – Alex Commented Feb 9, 2016 at 10:02
• @Sapikelio That also yields the same thing. – dusz Commented Feb 9, 2016 at 11:11
• @Alex I think you might be onto something.. – dusz Commented Feb 9, 2016 at 11:12
• @dusz are you using Windows Xp? – Sapikelio Commented Feb 9, 2016 at 11:12

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 3 +25

change this line

var heatmap = h337.create(

to

var heatmap = window.h337.create(

Update:

okay you are lucky i found the error, you have to pass the "container" property to the heatmap options:

    heatmap = window.h337.create(
    {
        "container": document.getElementById("heatmapArea"),
        "element": document.getElementById("heatmapArea"),
        "radius" : 11,
        "opacity": 40,
        "visible": true,
        "gradient" : { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1: "rgb(255,0,0)"}
    })

for me this works :)

TL;DR

Disable uBlock Origin (or possibly some other Firefox Add-on) on the pages that exhibit this error.

Answer: This happened to me in Firefox but not in Chrome. In Chrome, everything worked as expected, so I started to suspect my Firefox Add-ons. I disabled everything and discovered that the maps now worked in Firefox. After carefully re-enabling all Add-ons, I discovered that the uBlock Origin add-on was interfering with the javascript. Simply disabling uBlock Origin on the page you are loading in Firefox is sufficient to permit the script to function properly.

I had some code very similar to this that broke because I was using window.onload to load the maps but also had a different onload function in my body tag that was empty. At some point, it looks like the browser switched from ignoring the empty body tag to causing it to disable/overwrite the window.onload. This was hard to track down as there were no errors.

本文标签： jqueryJavascript heatmap ReferenceError h337createStack Overflow