|
|
@ -32,42 +32,54 @@ async function populateTimeseries(category) { |
|
|
|
response.json().then(response => { |
|
|
|
response.json().then(response => { |
|
|
|
const data = response.map(row => ({ |
|
|
|
const data = response.map(row => ({ |
|
|
|
x: row.sampling_date, |
|
|
|
x: row.sampling_date, |
|
|
|
y: parseInt(row.counts) |
|
|
|
y: parseInt(row.counts), |
|
|
|
|
|
|
|
details: row.details |
|
|
|
})); |
|
|
|
})); |
|
|
|
console.debug(data); |
|
|
|
console.debug(response); |
|
|
|
|
|
|
|
|
|
|
|
const chartOptions = { |
|
|
|
const chartOptions = { |
|
|
|
type: 'bar', |
|
|
|
type: 'bar', |
|
|
|
data: { |
|
|
|
data: { |
|
|
|
datasets: [{ |
|
|
|
datasets: [{ |
|
|
|
label: label, |
|
|
|
label: label, |
|
|
|
data: data, |
|
|
|
data: data, |
|
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)', |
|
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)', |
|
|
|
borderColor: 'rgba(54, 162, 235, 1)', |
|
|
|
borderColor: 'rgba(54, 162, 235, 1)', |
|
|
|
borderWidth: 1, |
|
|
|
borderWidth: 1, |
|
|
|
barPercentage: 0.8, // Adjust the bar percentage as desired
|
|
|
|
barPercentage: 0.8, // Adjust the bar percentage as desired
|
|
|
|
categoryPercentage: 0.9 |
|
|
|
categoryPercentage: 0.9 |
|
|
|
}] |
|
|
|
}] |
|
|
|
}, |
|
|
|
}, |
|
|
|
options: { |
|
|
|
options: { |
|
|
|
scales: { |
|
|
|
scales: { |
|
|
|
y: { |
|
|
|
y: { |
|
|
|
beginAtZero: true, |
|
|
|
beginAtZero: true, |
|
|
|
ticks: { |
|
|
|
|
|
|
|
precision: 0 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
x: { |
|
|
|
|
|
|
|
displayFormats: { |
|
|
|
|
|
|
|
month: 'MMM' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
ticks: { |
|
|
|
ticks: { |
|
|
|
length: 4 |
|
|
|
precision: 0 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
x: { |
|
|
|
|
|
|
|
displayFormats: { |
|
|
|
|
|
|
|
month: 'MMM' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
ticks: { |
|
|
|
|
|
|
|
length: 4 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
plugins: { |
|
|
|
|
|
|
|
tooltip: { |
|
|
|
|
|
|
|
callbacks: { |
|
|
|
|
|
|
|
label: function(tooltipItems) { |
|
|
|
|
|
|
|
console.debug('adsfasdfasdf',tooltipItems); |
|
|
|
|
|
|
|
return tooltipItems.raw.details; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} }; |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const ctx = document.getElementById(category + '-timeseries').getContext('2d'); |
|
|
|
const ctx = document.getElementById(category + '-timeseries').getContext('2d'); |
|
|
|
new Chart(ctx, chartOptions); |
|
|
|
new Chart(ctx, chartOptions); |
|
|
|