#how can i display data from DataBase(postresql) in chart using chartjs

3 messages · Page 1 of 1 (latest)

strange valve
#

chart:

#
  createChart() {
    const barchart : any = {
      type: 'bar',
      data: {
        datasets: [{
          label: 'Test1',
          data: [
            array
          ]
      }, {
        label: 'Test2',
        data: [{
          x: '2022-10-17T10:00:00.526806+02:00',
          y: 25
        },
        {
          x: '2022-10-17T10:05:00.526806+02:00',
          y: 25
        },
        {
          x: '2022-10-17T10:10:00.526806+02:00',
          y: 25
        }
      ],
      }]
      },
      options: {
        showLine: true,
        responsive: true,
        interaction: {
          mode: 'index',
          intersect: false,
        },
        layout: {
          padding: {
            
          }
        },
        plugins:{
          title: {
            display: true,
            text: 'Test Title',
          },
          tooltip: {
            enabled: true,
            callbacks: {
            }
          },
          zoom: {
            pan: {
              enabled: true,
              mode: 'x',
              modifierKey: 'ctrl',
            },
            zoom: {
              wheel: {
                enabled: true
              },
              drag:{
                enabled:true,
                borderColor: 'rgb(54, 162, 235)',
                borderWidth: 1,
                backgroundColor: 'rgba(54, 162, 235, 0.3)',
              },
              pinch: {
                enabled: true
              },
              mode: 'x'
            }
          }
        },
#
        scales: {
          y: {
            type: 'linear',
            beginAtZero: true,
            title: {
              display: true,
              text: 'values'
            },
          },
          x: {
            type: 'time',
            time: {
              unit: 'hour',
              stepSize: 1,
              displayFormats: {
                hour: 'H', // change to uppercase 'H'.
              }
            },
            min: '2022-10-17 00:00:00',
            max: '2022-10-17 23:59:59',
            display: true,
            title: {
              display: true,
              text: 'date'
            },
            grid: {
              display: false
            }
          }
        }
      },
    }


    
    const chartItem: ChartItem = document.getElementById('my-chart') as ChartItem;
    
    new Chart(chartItem, barchart)
}