# eCharts as JavaScript external chart library

**URL:** <https://discourse.nodered.org/t/echarts-as-javascript-external-chart-library/4578>\
**Category:** Dashboard\
**Created:** [5 November 2018 12:03 UTC](https://discourse.nodered.org/t/echarts-as-javascript-external-chart-library/4578 "2018-11-05T12:03:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rcardos1](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@rcardos1](https://discourse.nodered.org/u/rcardos1)\
**Post date:** [5 November 2018 12:03 UTC](https://discourse.nodered.org/t/echarts-as-javascript-external-chart-library/4578/1 "2018-11-05T12:03:59Z")

</div>

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/](http://noderedguide.com/lecture-7-dashboards-and-ui-techniques-for-node-red/))." - [PART 3](http://noderedguide.com/lecture-7-node-red-dashboards-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... ☹  
Has anyone tried this out successfully?!

Thks in advance,

Cardoso

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 November 2018 21:24 UTC](https://discourse.nodered.org/t/echarts-as-javascript-external-chart-library/4578/2 "2018-11-05T21:24:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rcardos1](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@rcardos1](https://discourse.nodered.org/u/rcardos1)\
**Post date:** [8 November 2018 02:07 UTC](https://discourse.nodered.org/t/echarts-as-javascript-external-chart-library/4578/3 "2018-11-08T02:07:38Z")

</div>

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! 🙂 ) 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 ☹ and the error was another one now... A simple '/' beggining slash was the issue. 😭

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):

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9d1286c5f8a9c97cc145f672b1829b49c6b69907.png)

```
<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!