index.html is incorrect (in the not_working json):
<!DOCTYPE html>
<html>
<!-- <script src="https://d3js.org/d3.v7.js"></script> -->
<script src="../uibuilder/vendor/d3/dist/d3.js"></script>
<script src="../uibuilder/uibuilder.iife.min.js"></script>
<!-- Your own CSS -->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Bar chart with D3.js</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="more">
</div>
<script defer src="./index.js"></script>
</body>
</html>
You have things outside the <head>
. Also, you HAVE to be consistent with the use of defer
. As it is, it will mess up the order of loading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Bar chart with D3.js</title>
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- <script src="https://d3js.org/d3.v7.js"></script> -->
<script defer src="../uibuilder/vendor/d3/dist/d3.js"></script>
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="./index.js"></script>
</head>
<body>
<div id="more"></div>
</body>
</html>
There is also an error in your CSS file. // @import url("../uibuilder/uib-brand.min.css");
must be /* @import url("../uibuilder/uib-brand.min.css"); */
, CSS is not JS and does not use quite the same comment style.
Next you have problems in your JS:
![image](https://global.discourse-cdn.com/business6/uploads/nodered/original/3X/c/a/ca2d74ab0b0632121614a37432d73f1721335e2a.png)
Same happens again on line 51.
This is because you need to define let sample = []
in index.js and update it when you send the template (though see below for why this is a bad idea anyway).
If you use your browser's dev tools, you will see it highlight errors for you.
Now, lets fine a much better way to approach this which is a LOT simpler and uses UIBUILDER's features properly.
At the top of your index.js, put this:
let sample = []
uibuilder.onChange('msg', (msg) => {
sample = msg.payload;
})
Get rid of the template and uib-update nodes because they are not needed. Change the inject to inject the data directly as JSON.
[{"id":"7f0b5bc815770786","type":"inject","z":"44ceec9d5e933a9b","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"language\":\"Rust\",\"value\":68.9,\"color\":\"#000000\"},{\"language\":\"Kotlin\",\"value\":75.1,\"color\":\"#00a2ee\"},{\"language\":\"Python\",\"value\":68,\"color\":\"#fbcb39\"},{\"language\":\"TypeScript\",\"value\":67,\"color\":\"#007bc8\"},{\"language\":\"Go\",\"value\":65.6,\"color\":\"#65cedb\"},{\"language\":\"Swift\",\"value\":65.1,\"color\":\"#ff6e52\"},{\"language\":\"JavaScript\",\"value\":61.9,\"color\":\"#f9de3f\"},{\"language\":\"C#\",\"value\":60.4,\"color\":\"#5d2f8e\"},{\"language\":\"F#\",\"value\":59.6,\"color\":\"#008fc9\"},{\"language\":\"Clojure\",\"value\":59.6,\"color\":\"#507dca\"}]","payloadType":"json","x":350,"y":1780,"wires":[["31f722edf26b6019"]]}]
Now, you don't have any errors and you are only sending DATA to the front end, not HTML.
But it still doesn't work, you will always have an empty chart! But now that is because I don't think you are using D3 correctly. You are not telling D3 to update the chart when it receives new data - I think there may be several approaches, here is one: d3.js - D3: How to refresh a chart with new data? - Stack Overflow
I don't do enough with D3 to help you further on that part.
The bottom line here is:
Don't send HTML when DATA is sufficient.