eCharts as JavaScript external chart library

#1

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](http://noderedguide.com/lecture-7-dashboards-and-ui-techniques-for-node-red/)." - 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,

Cardoso

0 Likes

#2

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.

0 Likes

#3

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>
<script>
    var chart = document.getElementById('chart');
    var myChart = echarts.init(chart);
    var option = { ...here you set your graphs options... }
    myChart.setOption(option);
</script>

Thks for the help anyway!

2 Likes