eCharts as JavaScript external chart library


Hi Community,

I've tested sucessfully the Morris.js example posted in the programming guide and applied it to an a home app of mine with a nice improvement on the charts views of the built app.
This was on "Node-RED: Lecture 7 – Dashboards and UI techniques](" - PART 3: using a standard external JavaScript charting library (Morris.JS).
I wanted to go even further and try out eCharts as an external javascript chart library, as I use this a lot in other apps and this has a greater flexibility and the outputs are tremendous!
I've tried several examples, mirroring my used cases examples and also taking into consideratio the also working Moriis example... but with no success... :frowning:
Has anyone tried this out successfully?!

Thks in advance,




Nope! But what have you got so far and are you getting any errors in the browser? If you aren't familiar with debugging front-end code, pressing F12 will open your browsers dev tools. These contain a console where you can see any errors and debugging output.



Thks Tottally for the tip... But yes I'm aware of the basic debugging techniques.

Just for the record... things are working OK now. The issue was that the 1st I tested sourcing the Java scripts from the webpage itself and the test page I had prepared was DLing quite a bit, (since I am on a Pi with Poor Wifi signal the connection is bad, sometimes I even loose the remote ssh connection... yes, I know... I should take care of it! :slight_smile: ) and I didn't wait long enough! (it took quite a few secs)...
So I immidiately changed into sourcing the scripts locally, thinking something was wrong :frowning: and the error was another one now... A simple '/' beggining slash was the issue. :sob:

As a ref for others I'm posting below the basic flow test and just the snippet of template code. Don't forget to add echarts folder to a public folder/library of yours (after defining it in settings.js httpstatic part if you have not done so yet):

<script src="/echarts/build/dist/echarts-all.js"></script>
<div id="chart" style="width: 400px; height: 300px;"></div>
    var chart = document.getElementById('chart');
    var myChart = echarts.init(chart);
    var option = { you set your graphs options... }

Thks for the help anyway!