Charts not showing

[requiemmg]

The title says it all: The Chart is not showing up, even if I use the example config.

Using 2.3.0, current config:

    {
            module: "MMM-AVStock",
            position: "top_bar", //"bottom_bar" is better for `mode:ticker`
            config: {
                apiKey : "hidden",
                timeFormat: "DD-MM HH:mm",
                width: 800,
                classes: "xsmall",
                symbols : [list of symbols],
                alias: [List of aliases], 
                tickerDuration: 20,
                chartDays: 90,
                maxTableRows: 12,
                mode : "table",                  // "table" or "ticker"
                showChart: true,
                chartWidth: 800,
                showVolume: true,
                chartInterval: "daily",          // choose from ["intraday", "daily", "weekly", "monthly"]
                movingAverage: {
                    type: 'SMA',
                    periods: [200]
                    },
                decimals : 2,
                chartType: 'line',                // 'line', 'candlestick', or 'ohlc'
                chartLineColor: '#eee',
                chartLabelColor: '#eee',
                coloredCandles: true,
                debug: false
            }
        }, 

[lavolp3]

can you also provide some of the symbols you have been requesting? And can you confirm that the table contains data of the symbols? Charts will only show as soon as some data has been successfully received.

[requiemmg]

Data is Received. Try it eg with Intuitive Surgical, Alibaba, Tencent, Adidas, just to name a few

[lavolp3]

Hm, your setup works on my mirror. Have you tried another region? (e.g. top_left"). Have you checked the dev console in a browser? If you need help with that have a look at https://gist.github.com/lavolp3/db7de8c0664ba95e8b9247ba685095fe

[requiemmg]

In the first run - when no data has been received yet - I get

Uncaught TypeError: Highcharts.stockChart is not a function updateChart http://smartmirror2:8080/modules/MMM-AVStock//MMM-AVStock.js:649 update http://smartmirror2:8080/modules/MMM-AVStock//MMM-AVStock.js:499 socketNotificationReceived http://smartmirror2:8080/modules/MMM-AVStock//MMM-AVStock.js:474 socket http://smartmirror2:8080/js/module.js:243 MMSocket http://smartmirror2:8080/js/socketclient.js:39 emit http://smartmirror2:8080/socket.io/socket.io.js:6 onevent http://smartmirror2:8080/socket.io/socket.io.js:8 onevent http://smartmirror2:8080/js/socketclient.js:33 onpacket http://smartmirror2:8080/socket.io/socket.io.js:8 exports http://smartmirror2:8080/socket.io/socket.io.js:8 emit http://smartmirror2:8080/socket.io/socket.io.js:6 ondecoded http://smartmirror2:8080/socket.io/socket.io.js:6 exports http://smartmirror2:8080/socket.io/socket.io.js:8 emit http://smartmirror2:8080/socket.io/socket.io.js:6 add http://smartmirror2:8080/socket.io/socket.io.js:6 ondata http://smartmirror2:8080/socket.io/socket.io.js:6 exports http://smartmirror2:8080/socket.io/socket.io.js:8 emit http://smartmirror2:8080/socket.io/socket.io.js:6 onPacket http://smartmirror2:8080/socket.io/socket.io.js:7 setTransport http://smartmirror2:8080/socket.io/socket.io.js:7 emit http://smartmirror2:8080/socket.io/socket.io.js:6 onPacket http://smartmirror2:8080/socket.io/socket.io.js:7 onData http://smartmirror2:8080/socket.io/socket.io.js:7 onmessage http://smartmirror2:8080/socket.io/socket.io.js:8 addEventListeners http://smartmirror2:8080/socket.io/socket.io.js:8 doOpen http://smartmirror2:8080/socket.io/socket.io.js:8 open http://smartmirror2:8080/socket.io/socket.io.js:7 probe http://smartmirror2:8080/socket.io/socket.io.js:7 onOpen http://smartmirror2:8080/socket.io/socket.io.js:7 onHandshake http://smartmirror2:8080/socket.io/socket.io.js:7 onPacket http://smartmirror2:8080/socket.io/socket.io.js:7 setTransport http://smartmirror2:8080/socket.io/socket.io.js:7 emit http://smartmirror2:8080/socket.io/socket.io.js:6 onPacket http://smartmirror2:8080/socket.io/socket.io.js:7 n http://smartmirror2:8080/socket.io/socket.io.js:7 decodePayload http://smartmirror2:8080/socket.io/socket.io.js:7 onData http://smartmirror2:8080/socket.io/socket.io.js:7 doPoll http://smartmirror2:8080/socket.io/socket.io.js:7 emit http://smartmirror2:8080/socket.io/socket.io.js:6 onData http://smartmirror2:8080/socket.io/socket.io.js:7 onLoad http://smartmirror2:8080/socket.io/socket.io.js:7 onreadystatechange http://smartmirror2:8080/socket.io/socket.io.js:7 create http://smartmirror2:8080/socket.io/socket.io.js:7 i http://smartmirror2:8080/socket.io/socket.io.js:7 request http://smartmirror2:8080/socket.io/socket.io.js:7 doPoll http://smartmirror2:8080/socket.io/socket.io.js:7 poll http://smartmirror2:8080/socket.io/socket.io.js:7 doOpen http://smartmirror2:8080/socket.io/socket.io.js:7 open http://smartmirror2:8080/socket.io/socket.io.js:7 open http://smartmirror2:8080/socket.io/socket.io.js:7 r http://smartmirror2:8080/socket.io/socket.io.js:6 r http://smartmirror2:8080/socket.io/socket.io.js:6 connect http://smartmirror2:8080/socket.io/socket.io.js:6 r http://smartmirror2:8080/socket.io/socket.io.js:6 r http://smartmirror2:8080/socket.io/socket.io.js:6 r http://smartmirror2:8080/socket.io/socket.io.js:6 MMSocket http://smartmirror2:8080/js/socketclient.js:23 socket http://smartmirror2:8080/js/module.js:238 sendSocketNotification http://smartmirror2:8080/js/module.js:377 registerFeeds http://smartmirror2:8080/modules/default/newsfeed//newsfeed.js:214 start http://smartmirror2:8080/modules/default/newsfeed//newsfeed.js:67 startModules http://smartmirror2:8080/js/loader.js:52 loadNextModule http://smartmirror2:8080/js/loader.js:38 onload http://smartmirror2:8080/js/loader.js:201 loadFile http://smartmirror2:8080/js/loader.js:199 loadNextModule http://smartmirror2:8080/js/loader.js:36 loadNextModule http://smartmirror2:8080/js/loader.js:29 afterLoad http://smartmirror2:8080/js/loader.js:122 bootstrapModule http://smartmirror2:8080/js/loader.js:158 loadTranslations http://smartmirror2:8080/js/module.js:333 bootstrapModule http://smartmirror2:8080/js/loader.js:155 loadNextDependency http://smartmirror2:8080/js/module.js:296 MMM-AVStock.js:649:41

After data has been received, no errors, but no charts. I just get the heading line, see screenshot

(This is an ETF, but data has been received. Its the same for single stocks)

Changing the position of the module does not change anything.

Maybe worth mentioning: I am using MMM-pages to rotate through pages. MMM-AVStock is being suspended and reactivated in each cycle (keeping its data)

[lavolp3]

Uncaught TypeError: Highcharts.stockChart is not a function

Your highcharts npm module seems to be missing. Do

npm install

in the module folder

[requiemmg]

Did that after initial install as well as after every single upgrade. Also apt update and upgrade.

[lavolp3]

Uff, that makes no sense. Can you please

• move into your module folder
• delete your node_modules folder and package-lock.json
• and reinstall?

  cd ~/MagicMirror/modules/MMM-AVStock
  sudo rm -r node_modules
  sudo rm package-lock.json
  npm install

If that doesn't help, remove the module completely, clone again and reinstall.

[requiemmg]

Did both:

First:

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent permitted by applicable law. Last login: Tue Sep 22 08:26:01 2020 pi@SmartMirror2:~ $ cd MagicMirror/ pi@SmartMirror2:~/MagicMirror $ cd modules/ pi@SmartMirror2:~/MagicMirror/modules $ cd MMM-AVStock/ pi@SmartMirror2:~/MagicMirror/modules/MMM-AVStock $ ls avstock-grid.PNG avstock-ticker-purchase-performace.jpg MMM-AVStock.css node_modules README.md avstock-table.PNG avstock-ticker-purchasePrices.jpg MMM-AVStock.js package.json avstock-ticker.PNG LICENSE node_helper.js package-lock.json pi@SmartMirror2:~/MagicMirror/modules/MMM-AVStock $ sudo rm package-lock.json pi@SmartMirror2:~/MagicMirror/modules/MMM-AVStock $ sudo rm -r node_modules/ pi@SmartMirror2:~/MagicMirror/modules/MMM-AVStock $ npm install npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142 npm WARN deprecated har-validator@5.1.5: this library is no longer supported [ .................] - fetchMetadata: sill pacote range manifest for asn1@~0.2.3 fetched in 50527ms [ .................] - fetchMetadata: sill pacote range manifest for asn1@~0.2.3 fetched in 50527ms [ .................] - fetchMetadata: sill pacote range manifest for asn1@~0.2.3 fetched in 50527ms [ .................] - fetchMetadata: sill pacote range manifest for asn1@~0.2.3 fetched in 50527ms [ .................] - fetchMetadata: sill pacote range manifest for asn1@~0.2.3 fetched in 50527ms [ .................] - fetchMetadata: sill pacote range manifest for asn1@~0.2.3 fetched in 50527ms [ ...........] | extract:highcharts: verb lock using /home/pi/.npm/_locks/staging-590999e53f055f52.lock for /npm notice created a lockfile as package-lock.json. You should commit this file. added 54 packages from 63 contributors and audited 54 packages in 416.798s

2 packages are looking for funding run npm fund for details

found 0 vulnerabilities

No difference, charts not showing.

Then:

pi@SmartMirror2:~/MagicMirror/modules $ sudo rm -r MMM-AVStock/ pi@SmartMirror2:~/MagicMirror/modules $ git clone https://github.com/lavolp3/MMM-AVStock Klone nach 'MMM-AVStock' ... remote: Enumerating objects: 142, done. remote: Counting objects: 100% (142/142), done. remote: Compressing objects: 100% (119/119), done. remote: Total 253 (delta 84), reused 53 (delta 21), pack-reused 111 Empfange Objekte: 100% (253/253), 530.12 KiB | 967.00 KiB/s, Fertig. Löse Unterschiede auf: 100% (145/145), Fertig. pi@SmartMirror2:~/MagicMirror/modules $ cd MMM-AVStock/ pi@SmartMirror2:~/MagicMirror/modules/MMM-AVStock $ npm install added 54 packages from 63 contributors and audited 54 packages in 51.535s

1 package is looking for funding run npm fund for details

found 1 low severity vulnerability run npm audit fix to fix them, or npm audit for details

Still the same :-( No idea why.

[lavolp3]

Do you have any other module using highcharts installed? Can you disable all modules that MA use charts and try again. I have just read that two highcharts instances may be in conflict with each other, and one might not work.

https://www.highcharts.com/docs/getting-started/installation#c-load-highcharts-stock-or-highcharts-maps

Or you can list the other modules you are using.

[requiemmg]

You found it. I am using MMM-COVID19-SPARKLINE which also uses highcharts. Disabled it and...

So I guess I have to pick one module ;-) (Or is there a workaround?)

[lavolp3]

Great! Well we'll need to find a way around this. For now you can only use one. This one includes highstock.js from the highcharts library, the other one includes highcharts.js. For some reason one overwrites the other.

We'll find a way around. You're invited to research as well :-)

[lavolp3]

highstock seems to include highcharts, so I could ask @skelliam to include the highstock library. He did not install the npm module but included a copy of the .js. I'll first try to find a compromise solution.

[lavolp3]

you could do some beta-testing for me if you like?

Please only do that if you haven't done any local changes to the MMM-COVID-SPARKLINE module that you'd like to keep.

Exchange in line 49 of MMM-COVID19-SPARKLINE.js

      this.file("highcharts.js"), 

with

      "modules/MMM-AVStock/node_modules/highcharts/highstock.js",

Try running both modules. If the mirror doesn't start anymore, don't panic!, just move into the the MMM-COVID19-SPARKLINE module folder and execute

git reset --hard

[lavolp3]

OR you can try to place MMM-AVStock BELOW MMM-COVID-SPARKLINE in your config.js if it not already is. Can you try that out (first)?

[lavolp3]

Ok, it seems to be possible to show both when you put MMM-AVStock ABOVE all other highcharts modules in the config. That worked for me. Can you please try out? Highcharts will throw an error when trying to load the lib file from the Covid module but will still work in both modules. That is a bit of a limitation for the mirror layout but I don't know a sustainable solution (yet).

[requiemmg]

Yes, this will work for me, too. But this will affect my overall pages layout (my problem), so I guess I will just throw out the Covid19-Sparkline module as I follow the numbers elsewhere anyway.

[requiemmg]

Hi again. Worked fine for the last 2 months with no other highcharts Modules active.

I just switched branches to 2.4 (IEX API) and started reconfiguring (API Key and symbols). The prices from IEX will display neatly. IEX uses other symbols than AplhaVantage does (e.g. suffix -GY for german Xetra). No problem with getting the prices.

But no chart shown anymore. Did not change anything about the config than to switch to 2.4, add my IEX api key (did not remove the other one!) and took IEX symbols.

Is this still work in progess and the module will try to find AplhaVantage values in the background?

[lavolp3]

Same problem for me in the IEX branch.

The branch is still work in progress and I'm afraid IEX might not be the solution because they demand too many calls for the series quotes. That won't work when you have a mirror that gets restarted at least once a day.

[requiemmg]

Thanks. TBH, then I'd still prefer IEX over AlphaVantage and rather put aside the charts (or make them a premium IEX only feature. It's $9/month and we're talking about investing some money, don't we? Also, on Dec 1st IEX has annouced some new features). They're having a decent database; found all stocks (most of the portfolio) and ETF (small part) I own.

[lavolp3]

ok, good to know. I prefer making it free since this is "only" an MM module. But the chart is important for me because it looks nice, I've put a lot of work into it and it shows some technical features. (candles, price vs EMA...) Currently trying out twelve data.

[skelliam]

@lavolp3 is there anything I can do to make the C19 part better? Like, should I be using node to pull in highcharts.js instead of including it directly? I was only copying what -- some Google fitness plugin was doing.

[lavolp3]

@skelliam sorry, I don't understand. What C19 part? Are you talking about creating a module?

[skelliam]

Sorry @lavolp3 my comment was terrible and unclear. What can/should I do to make my module, the COVID19-SPARKLINE plugin, behave better with respect to highcharts.js?

[lavolp3]

Oh ok. Are there any issues using your module?

You could try including the highstock.js library in your main.js. The rest can stay as it is. It includes everything highcharts.js has and more (stock options). Seems a bit odd but it is actually the most comprehensive library. When a module using the highcharts library gets loaded after my stock module, it overwrites the namespace and stock options are not there anymore.

Another option could be to check ( in getscripts()) if the highcharts namespace is already filled by another module and then leaving it as it is.

The best option would be to include highcharts/highstocks as main dependency (like e.g. moment). But I'm afraid I don't have support for this.

See here for reference https://www.highcharts.com/forum/viewtopic.php?t=35876

This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

[lavolp3]

Original problem figured out, although the solution is not great. Still, closing this