#how can i display data from DataBase(postresql) in chart using chartjs
3 messages · Page 1 of 1 (latest)
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)
}