Search code examples
javascriptdygraphs

dygraphs not working as expected, version 1.1.0 does work, with Waterfox and Safari, but not version 2.1.0


The relevant generated html is...

<html>
<head>
<script type="text/javascript"
    src="dygraph-combined.js"></script>
<link rel="stylesheet" src="dygraph.css" />
</head>
<body>
<div id="graphdiv" style="height: 600px; width: 1100px"></div>
<script type="text/javascript">
g = new Dygraph(document.getElementById('graphdiv'),

"Date Time,Humidity,Temperature,Dewpoint,Voltage\n" +
"2020-03-19 15:10:01,23,36.7,12.2,5.166\n"  +
"2020-03-19 15:11:01,22,36.9,11.7,5.19\n"  +
"2020-03-19 15:12:01,22,37,11.78,5.19\n"  +
"2020-03-19 15:13:01,22,37.09,11.86,5.19\n"  +
"2020-03-19 15:14:01,22,37.09,11.86,5.19\n"  +
etc.
"2020-03-22 19:16:01,41,28.7,14.16,5.166\n"  +
"2020-03-22 19:17:01,41,28.7,14.16,5.166\n"  +
"2020-03-22 19:18:02,42,28.6,14.45,5.19\n"  +
"2020-03-22 19:19:02,42,28.6,14.45,5.19\n" 

)
</script>
</body>
</html>

Now with version 1.1.0, no worries, it displays, but some of the features of the newer version are obviously not available, if, however, I try and use 2.1.0 the browser complains about: The script from “http://raspbx.local/dygraphs-2.1.0/dygraph-combined.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type. barn.html

Loading failed for the with source “http://raspbx.local/dygraphs-2.1.0/dygraph-combined.js”.

Then changing from dygraph-combined.js to dygraph.js it complains about: SyntaxError: import declarations may only appear at top level of a module dygraph.js:45

ReferenceError: Dygraph is not defined barn.html:21:1

​Now researching this lot and not understanding it, I ended up changing a boatload of things, like making sure that every import line in all the various .js files include a "./" as part of the filename (where it was missing) to import as well as adding the ".js" suffix. Also changed in the html file

<script type="text/javascript"

to

<script type="module"

After all of this, I am now left with the error of: ReferenceError: Dygraph is not defined barn.html:11:1

Now, somewhere below all the imports and "use strict"; and some "var Dygraph=", there is:

Dygraph.NAME = "Dygraph";

Dygraph.VERSION = "2.1.0";

which, with my, by now, seriously limited knowledge, I would assume should be read as the definition and name of the .js module which should get loaded by the .html file, but now I'm down to my last 3 strands of hair and know no further... HELP! if you can edumacate me... now, I'm guessing I am doing something daft and boneheaded, but for the life of me, I need someone with more knowledge to point this out to me, please.


Solution

  • See the comment thread on the question for more details, but it turned out that the dygraphs-2.1.0/dygraph-combined.js file referenced was actually dygraph.js from the a zip file on the GitHub Releases page for dygraphs.

    This is not the correct way to get dygraphs. Instead, follow the instructions on the dygraphs download page to get bundled files for distribution. That page has links to the same files hosted on cdnjs and for download via npm.