0

For fun, I'm trying to copy the source code of entire websites into an .html file and run it locally from my Desktop (not public). While mostly everything loads like it appears on the original website, I am having trouble displaying the actual content of interactive graphs.

For example, the NOAA's Global Monitoring Laboratory displays an interactive version of the Keeling's Curve, which features two graphs that can be manipulated from the bottom (timeframe), hovered over to display figures, etc.

It should look something like this:

enter image description here

But instead, my local file looks like this:

enter image description here

As you can see, the slope/plot itself is missing, as well as some of the other features below and to the side. What am I doing wrong? Obviously, the website's actual stylesheet has shortened file paths (e.g. /gmd/css/gmd.css), so I made sure there were direct links in the local HTML file (e.g. https://esrl.noaa/gov/gmd/css/gmd.css).

I copied the entire HTML code in the Elements tab of the Inspect Element console (everything after <!DOCTYPE html>). Is there something else I should add to the local file?

Update: There was a long list of errors in the console, but only four actual lines of faulty code. Both the errors and the faulty code are shown below:

Error list Warning list Faulty code 1 Faulty code 2 Faulty code 3 Faulty code 4

ttoshiro
  • 466
  • 5
  • 21
  • 1
    Any errors in the dev tools console? I suspect there’s an API call trying to fetch the data that’s failing. – ray Jun 03 '20 at 04:03
  • You were right, there were errors. Still not sure why, though. I've added pictures of the errors in the original post – ttoshiro Jun 03 '20 at 08:42

2 Answers2

1

The first script tag(highlighted) in error contains a typo(/gov instead of .gov). It should be:

https://esrl.noaa.gov/gmd/js/dygraph.min.js

instead of

https://esrl.noaa/gov/gmd/js/dygraph.min.js
MaartenDev
  • 5,631
  • 5
  • 21
  • 33
  • Ah, that was stupid of me! I fixed this but was met with more errors, updated in the original post. – ttoshiro Jun 03 '20 at 09:02
1

Are you loading the HTML directly from local disk? In general you can't do XMLHttpRequests for local files.

Your best option is to spin up a small HTTP server and load the content from there. Two good options are Python's http.server:

python -m http.server

or node's http-server:

npm install --global http-server
http-server
danvk
  • 15,863
  • 5
  • 72
  • 116