The data i shared is the one that is being injected in the ui_chart.
The >_ icon when i press it say path copied but when i paste it only show payload so i use the button next to it and copy the value like i put at the end of my previous reply.
So now what i need to do is to change the value in "x" key to timestamp format right?
P/s: I try to use the moment node to change the format but it show the "The input property was NOT a recognisable date. Output will be a blank string" error.
The documentation says about the timestamp:
This must be in either epoch time (in milliseconds, not seconds), or ISO8601 format.
Your date format is neither but it will incidentally be accepted as the ui_node will parse your date string correctly.
I tested with below flow.
If it is still not working for you then it is more likely that you are not formatting correctly the data array (x,y points).
[{"id":"9ebdbfe6.c9fc","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"f81e1df2.ca5d1","type":"ui_chart","z":"9ebdbfe6.c9fc","name":"","group":"f27afcb9.528a8","order":1,"width":"6","height":"6","label":"Nhiệt Độ","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"9999","removeOlderPoints":"500","removeOlderUnit":"604800","cutout":0,"useOneColor":false,"colors":["#1f77b4","#ff8040","#008080","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":560,"y":100,"wires":[[]]},{"id":"d7922d62.8be6","type":"function","z":"9ebdbfe6.c9fc","name":"all","func":"let datetime1 = \"2019-06-03 15:10:11\";\nlet datetime2 = \"2019-06-03 15:20:11\";\nlet datetime3 = \"2019-06-03 15:30:11\";\n\nmsg.payload= [{\n\"series\": [\"Temp\", \"Hum\"],\n\"data\": [\n [{ \"x\": datetime1, \"y\":30 },{ \"x\": datetime2, \"y\":20 },{ \"x\": datetime3, \"y\":40 }],\n [{ \"x\": datetime1, \"y\":10 },{ \"x\": datetime2, \"y\":30 },{ \"x\": datetime3, \"y\":50 }]\n],\n\"labels\": [\"X\", \"Y\"]\n}]\nreturn msg;\n","outputs":1,"noerr":0,"x":310,"y":140,"wires":[["f81e1df2.ca5d1","e29e7b9a.421b78"]]},{"id":"e29e7b9a.421b78","type":"debug","z":"9ebdbfe6.c9fc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":510,"y":140,"wires":[]},{"id":"738b265.62c38d8","type":"inject","z":"9ebdbfe6.c9fc","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":140,"wires":[["d7922d62.8be6"]]},{"id":"f27afcb9.528a8","type":"ui_group","z":"","name":"Khu vực 1","tab":"551dd698.ab8968","order":1,"disp":true,"width":"6","collapse":false},{"id":"551dd698.ab8968","type":"ui_tab","z":"","name":"Biểu đồ","icon":"pie_chart","order":4,"disabled":false,"hidden":true}]
Thank you i will try the flow right now and tell you if it successes or not 
I'm just compare your flow with mine the only different is the data i'm put in it's still an object and your flow is not.
P/s: Your flow is working fine but mine still not work i think i need somehow change the object to make it work.
Hi @Andrei, looks like you are an expert in node red, so reading this topic i was wondering if you can help me with one problem with line chart visualization using apex chart library.
I created the ui template node and copy the working HTML code into it and looks like there is some differences in visualizing the graphs from simple HTML or out from node red ui.
The code is:
<html lang="en-US">
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.js">
</head>
<body>
<div id="chart">
</div>
<script>
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = 'w' + (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
var options = {
chart: {
height: 350,
width: 800,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
The other kind of charts looks to work fine, like bubble chart or heatmap.
The line chart inside node red get drawn in the following way instead of line:
in a simple html file it looks like this:
Any idea how i can fix it?
Thanks a lot in advance,
Mila
HI Mila, I am not a specialist in UI and was not even aware of the apex charts. I use another chart library instead. I will now add this library to my toolset, so thank you.
I could not reproduce the issue you illustrated. When I run your code the chart is displayed perfectly.
I just had to change the height and size to make it smaller.
I can force the issue to occur if I add a fill property in the options, like below:
var options = {
chart: {
height: 250,
width: 500,
type: 'line',
fill: {
color: '#24292e'
},
zoom: {
enabled: false
}
},
Resulting in this chart:
I tryed to reduce the chart size and add/remove the fill property, but it still get the filled with colored area. Moreover, if i set any color it didn't change me anything by the "fill" property. I tryed in FF and Chrome, and the behaviuor is the same. Could u share with me the complete code of the node, so i can try on my env? And what lib do u use for drawing the graph? the default chart node? I didn't want to use it because for the heatmap and bubble chart i used the apex lib, so i was surprised what the simple one was not working correctly.
I could reproduce now.
I removed:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.js">
and made the group size: 16 x 8 to accommodate the chart.
Even if you are not using the fill property in your code there is a CSS property in the Dashboard that overrides the CSS.
1 Like
You can turn off our template css overrides in the dashboard site sidebar
2 Likes
Indeed, when doing the second testing I forgot to check the config as explained by Dave.
The issue should disappear if you select "Use Angular theme in UI_template"
1 Like
Thanks a lot! It works!
1 Like
