Thanks for your instructions, it's really what i'm looking for. However, i'm struggeling with the date format on the xAxis in a line-chart and cant figure out how to change it. I want it to be like "2021-01-10 10:00", but whatever i try i stuck with "Feb 10, 10 am". Any tip?
Hi @tdv94lnn
possibly your chart xaxis options are set to type "datetime" and the chart self-adjusts the formatting.
try adding these options to force it to the desired formatting :
...
xaxis: {
type: 'datetime',
labels: {
format: 'yyyy-MM-dd HH:mm',
}
}
...
more information on the different options at the ApexCharts documention website
Hi @UnborN
I'm afraid that it do not work. The chart is crated with this line in index.html:
<line-chart :data="utetempDayData" :dataset="utetempDayDataSet" :options="utetempDayOptions" width="800px" height="100%"></line-chart>
In index.js i have ths following data:
utetempDayData: null,
utetempDayDataSet: {
//Line
borderWidth: 1,
pointRadius: 2,
borderColor: "grey",
pointBackgroundColor : "grey",
pointBorderColor : "grey",
pointHoverBackgroundColor : "white",
pointHoverBorderColor : "white",
},
utetempDayOptions: {
scales: {
xAxes: [{
type: 'time',
time: {
//Just for trying
displayFormats: {
quarter: 'MMM YYYY'
}
}
}]
}
},
The data is pushed and updated from node-red and the diagram is shown as:
I'm kind of a beginner with node-red/uibuilder so bare with me 
I think it doesnt work because you are using charts that are based on the Chart.js library? instead of ApexCharts (as the examples in this thread)
So the options for your code should be a little different :
....
xAxes: [
{
type: "time",
// distribution: "series",
distribution: "series",
time: {
parser: "YYYY-MM-DD HH:mm:ss", // change to match the format you are sending
unit: "day",
// change to your desired formatting
displayFormats: { year: "YYYY-MM-DD HH:mm", month: "YYYY-MM-DD HH:mm", day: "YYYY-MM-DD HH:mm", hour: "YYYY-MM-DD HH:mm" },
},
offset: true,
ticks: { stepSize: 5, maxTicksLimit: 48, fontStyle: "bold" },
},
],
....
1 Like
I've been playing with uibuilder and ECharts this past days.
For anyone interested on it, you may find that the examples on the ECharts homepage doesn't work when testing them on uibuilder:
html
<b-card>
<v-chart :options="ecOptionsGauge"/>
</b-card>
js
ecOptionsGauge: {
title: {
text: 'Grid power',
},
tooltip: {},
series: [
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 60,
splitNumber: 12,
itemStyle: {
color: '#FFAB91',
},
progress: {
show: true,
width: 30,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 30,
},
},
axisTick: {
distance: -45,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999',
},
},
splitLine: {
distance: -52,
length: 14,
lineStyle: {
width: 3,
color: '#999',
},
},
axisLabel: {
distance: -20,
color: '#999',
fontSize: 20,
},
anchor: {
show: false,
},
title: {
show: false,
},
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 40,
height: '15%',
borderRadius: 8,
offsetCenter: [0, '-15%'],
fontSize: 60,
fontWeight: 'bolder',
formatter: '{value} °C',
color: 'auto',
},
data: [
{
value: 20,
},
],
},
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 60,
itemStyle: {
color: '#FD7347',
},
progress: {
show: true,
width: 8,
},
pointer: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: 20,
},
],
},
],
},
This gauge example, taken from the Echarts site, should look like this:
But what you get is:
And stays static without any animation.
Echarts has advanced several versions and even one major rebuild. So they changed the api significantly. Indeed their website is adapted to the new version.
If anyone is interested in running the "next" version (the latest is not possible without upgrading vue to v3), you must change the includes in uibuilder for the following ones:
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@5.0.0-beta.0"></script>
Now it works and you can make some graphs like this:
1 Like
Many thanks, I have updated the WIKI entry accordingly.
I'm trying to use the example but it doesn't work. Could you help me?
Hi Oscar, probably best to create a new thread and explain a bit more about what you've tried so far. Then hopefully, I can help.
Ok thanks, I created a new thread.
1 Like
