# Data from file to html chart

**URL:** <https://discourse.nodered.org/t/data-from-file-to-html-chart/3523>\
**Category:** Dashboard\
**Created:** [28 September 2018 06:48 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523 "2018-09-28T06:48:14Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![S.rajab9797](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@S.rajab9797](https://discourse.nodered.org/u/S.rajab9797)\
**Post date:** [28 September 2018 06:48 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/1 "2018-09-28T06:48:14Z")

</div>

Hi everybody!  
frist sorry about english.  
im new in node red. i want to show data in html chart from file.(file = saved data from chart in dashboard).it is log of my device .i dont know what can i do.

---

<div class="post-metadata">

**Author:** ![Balouzard](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/balouzard/32/2869_2.png) [@Balouzard](https://discourse.nodered.org/u/Balouzard)\
**Post date:** [28 September 2018 08:18 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/2 "2018-09-28T08:18:59Z")

</div>

Hi there !  
I don't think you're problem is node-red related ^^  
I think this is what you're searching for  
[https://stackoverflow.com/questions/101574/how-to-open-an-external-file-from-html](https://stackoverflow.com/questions/101574/how-to-open-an-external-file-from-html)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [28 September 2018 14:54 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/3 "2018-09-28T14:54:54Z")

</div>

It is not clear to me exactly what you want to do. Can you try and explain again please.

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [28 September 2018 20:14 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/4 "2018-09-28T20:14:48Z")

</div>

A quick search on this forum for "dashboard table" gives [some good examples](https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922) ...

---

<div class="post-metadata">

**Author:** ![S.rajab9797](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@S.rajab9797](https://discourse.nodered.org/u/S.rajab9797)\
**Post date:** [29 September 2018 06:17 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/5 "2018-09-29T06:17:09Z")

</div>

i want to create html chart in group in node red dashboard but every chart that i saw create with data that in writing function but i want to read data from json file which get from another chart in dashboard.

---

<div class="post-metadata">

**Author:** ![S.rajab9797](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@S.rajab9797](https://discourse.nodered.org/u/S.rajab9797)\
**Post date:** [29 September 2018 06:20 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/6 "2018-09-29T06:20:43Z")

</div>

i want to create html chart in group in node red dashboard but every chart that i saw create with data that in writing function but i want to read data from json file which get from another chart in dashboard.  
in a simple word i want to create html chart that show log.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 September 2018 09:37 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/7 "2018-09-29T09:37:51Z")

</div>

Hi - it's not clear what mean as you say you already have the data in a chart in the dashboard... so why feed it to another chart ? you could just send the data to both ?

---

<div class="post-metadata">

**Author:** ![S.rajab9797](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@S.rajab9797](https://discourse.nodered.org/u/S.rajab9797)\
**Post date:** [29 September 2018 15:37 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/8 "2018-09-29T15:37:49Z")

</div>

Frist thanks for emphasize to my problem.i want to send some data to my chart in dashboard and when show them after that save log from chart with date and then when i need to see log i search in file and show all of them in another in html chart .

---

<div class="post-metadata">

**Author:** ![S.rajab9797](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@S.rajab9797](https://discourse.nodered.org/u/S.rajab9797)\
**Post date:** [29 September 2018 15:40 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/9 "2018-09-29T15:40:10Z")

</div>

[{"id":"2b0df91b.758286","type":"http response","z":"8d3931b1.b63d6","name":"","statusCode":"","headers":{},"x":630,"y":3580,"wires":[]},{"id":"cd613eab.0f406","type":"http in","z":"8d3931b1.b63d6","name":"","url":"/chart1","method":"get","upload":false,"swaggerDoc":"","x":70,"y":3580,"wires":[["a05f609b.db6e2"]]},{"id":"a05f609b.db6e2","type":"file in","z":"8d3931b1.b63d6","name":"json file","filename":"C:\Users\user\AppData\Roaming\npm\node\_modules\node-red\public\1.json","format":"utf8","chunk":false,"sendError":false,"x":280,"y":3580,"wires":[["84c4d21f.289"]]},{"id":"84c4d21f.289","type":"template","z":"8d3931b1.b63d6","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\<meta charset="UTF-8"\>\n\n\n\n\<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"\>\<div class="canvasjs-chart-container" style="position: relative; text-align: left; cursor: auto;"\>\<canvas class="canvasjs-chart-canvas" width="603" height="332" style="width: 671px; height: 370px; position: absolute;"\>\<canvas class="canvasjs-chart-canvas" width="603" height="332" style="width: 671px; height: 370px; position: absolute; -webkit-tap-highlight-color: transparent; cursor: default;"\>\<div class="canvasjs-chart-toolbar" style="position: absolute; right: 1px; top: 1px; border: 1px solid transparent;"\>\<div class="canvasjs-chart-tooltip" style="position: absolute; height: auto; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 2px; z-index: 1000; pointer-events: none; display: none; border-radius: 0px; left: 553px; bottom: -229px; transition: left 0.1s ease-out 0s, bottom 0.1s ease-out 0s;"\>\<div style="width: auto; height: auto; min-width: 50px; margin: 0px; padding: 5px; font-family: "Trebuchet MS", Helvetica, sans-serif; font-weight: normal; font-style: normal; font-size: 14px; color: black; text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px; text-align: left; border: 1px solid rgb(54, 158, 173); background: rgba(255, 255, 255, 0.9); text-indent: 0px; white-space: nowrap; border-radius: 0px; user-select: none;"\>04 Mar 17  
\<span style="color:#369EAD;"\>sensor1:&nbsp;&nbsp;82.7  
\<span style="color:#C24642;"\>sensor2:&nbsp;&nbsp;35.9  
\<span style="color:#7F6084;"\>sensor3:&nbsp;&nbsp;43.9  
\<span style="color:#ed4912;"\>sensor4:&nbsp;&nbsp;23\n\<script src="/canvasjs.min.js"\>\n\n","output":"str","x":460,"y":3580,"wires":[["2b0df91b.758286"]]}]

---

<div class="post-metadata">

**Author:** ![S.rajab9797](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@S.rajab9797](https://discourse.nodered.org/u/S.rajab9797)\
**Post date:** [29 September 2018 15:40 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/10 "2018-09-29T15:40:56Z")

</div>

how can put data from file to template.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 September 2018 15:42 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/11 "2018-09-29T15:42:45Z")

</div>

Maybe this will help - [https://flows.nodered.org/flow/92920b4fd450bf92a3035e061947daa0](https://flows.nodered.org/flow/92920b4fd450bf92a3035e061947daa0)  
It shows how to save data from a chart and restore it.  
(It doesn't edit/search/slice it)

---

<div class="post-metadata">

**Author:** ![S.rajab9797](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@S.rajab9797](https://discourse.nodered.org/u/S.rajab9797)\
**Post date:** [29 September 2018 15:44 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/12 "2018-09-29T15:44:53Z")

</div>

its okay but i want to restore them in html chart

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 September 2018 15:47 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/13 "2018-09-29T15:47:40Z")

</div>

the dashboard is html...  
so you mean somewhere else ?

---

<div class="post-metadata">

**Author:** ![S.rajab9797](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@S.rajab9797](https://discourse.nodered.org/u/S.rajab9797)\
**Post date:** [29 September 2018 15:51 UTC](https://discourse.nodered.org/t/data-from-file-to-html-chart/3523/14 "2018-09-29T15:51:31Z")

</div>

i know .chart with html code in template in dashboard.  
if you have time please see my code above.