# Uibuilder v2 Charting Examples

**URL:** <https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429>\
**Category:** Share Your Projects\
**Tags:** uibuilder\
**Created:** [17 August 2019 18:01 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429 "2019-08-17T18:01:25Z")\
**Posts on this page:** 10\
**Page:** 2

<div class="post-metadata">

**Author:** ![tdv94lnn](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@tdv94lnn](https://discourse.nodered.org/u/tdv94lnn)\
**Post date:** [10 February 2021 13:04 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429/22 "2021-02-10T13:04:15Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [10 February 2021 16:03 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429/23 "2021-02-10T16:03:46Z")

</div>

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 :

```auto
...
xaxis: {
 type: 'datetime',
  labels: {
    format: 'yyyy-MM-dd HH:mm',
  }
}
...

```

more information on the different options at the ApexCharts documention [website](https://apexcharts.com/docs/datetime/)

---

<div class="post-metadata">

**Author:** ![tdv94lnn](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@tdv94lnn](https://discourse.nodered.org/u/tdv94lnn)\
**Post date:** [10 February 2021 20:06 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429/24 "2021-02-10T20:06:25Z")

</div>

Hi @UnborN  
I'm afraid that it do not work. The chart is crated with this line in index.html:

```auto
<line-chart :data="utetempDayData" :dataset="utetempDayDataSet" :options="utetempDayOptions" width="800px" height="100%"></line-chart>

```

In index.js i have ths following data:

```auto
       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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3f158d24363a965df49996e3d10b45a827d282be.png)

I'm kind of a beginner with node-red/uibuilder so bare with me 🙂

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [10 February 2021 20:38 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429/25 "2021-02-10T20:38:50Z")

</div>

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 :

```auto
....

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" },
            },
          ],

....

```

---

<div class="post-metadata">

**Author:** ![SeRiusRod](https://avatars.discourse-cdn.com/v4/letter/s/278dde/32.png) [@SeRiusRod](https://discourse.nodered.org/u/SeRiusRod)\
**Post date:** [1 March 2021 15:23 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429/26 "2021-03-01T15:23:01Z")

</div>

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**

```auto
    <b-card>
         <v-chart :options="ecOptionsGauge"/>
    </b-card>

```

**js**

```auto
    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:

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

But what you get is:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a2d0c4ee614f22fb7c3c9e4fb9f1df622aa17482.png)  
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:

```auto
    <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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/95fa353ff5bcb1df011c424b41f06025f8c7c50d.png)

---

<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:** [1 March 2021 18:12 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429/27 "2021-03-01T18:12:50Z")

</div>

Many thanks, I have updated the [WIKI entry](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Integrating-Vue-ECharts) accordingly.

---

<div class="post-metadata">

**Author:** ![OscarF](https://avatars.discourse-cdn.com/v4/letter/o/e79b87/32.png) [@OscarF](https://discourse.nodered.org/u/OscarF)\
**Post date:** [16 September 2022 20:02 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429/28 "2022-09-16T20:02:56Z")

</div>

I'm trying to use the example but it doesn't work. Could you help me?

---

<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:** [16 September 2022 20:04 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429/29 "2022-09-16T20:04:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![OscarF](https://avatars.discourse-cdn.com/v4/letter/o/e79b87/32.png) [@OscarF](https://discourse.nodered.org/u/OscarF)\
**Post date:** [16 September 2022 22:47 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429/30 "2022-09-16T22:47:38Z")

</div>

Ok thanks, I created a new thread.

---

<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:** [17 September 2022 00:01 UTC](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429/31 "2022-09-17T00:01:58Z")

</div>

Closed on 17 September 2022 00:01 UTC



[Previous page](https://discourse.nodered.org/t/uibuilder-v2-charting-examples/14429.md?page=1)