141
rated 0 times
[
142]
[
1]
/ answers: 1 / hits: 11497
/ 3 Years ago, tue, april 27, 2021, 12:00:00
unfortunately I fail with this example.
I include the following scripts:
<script src=https://code.jquery.com/jquery-3.6.0.min.js integrity=sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4= crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity=sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns crossorigin=anonymous></script>
<script type=module src=https://cdn.jsdelivr.net/npm/[email protected]/dist/helpers.esm.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.js></script>
<script type=module src=https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.esm.min.js></script>and this is my function(it is a copy from the example side)
https://www.chartjs.org/docs/3.2.0/samples/other-charts/doughnut.html
function donutchart(){
//-----SETUP-------
const DATA_COUNT = 5;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
const data = {
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
datasets: [
{
label: 'Dataset 1',
data: Utils.numbers(NUMBER_CFG),
backgroundColor: Object.values(Utils.CHART_COLORS),
}
]
};
//-----Config----------
const config = {
type: 'doughnut',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
}
}
},
};
//-------Actions--------
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = Utils.numbers({count: chart.data.labels.length, min: 0, max: 100});
});
chart.update();
}
},
{
name: 'Add Dataset',
handler(chart) {
const data = chart.data;
const newDataset = {
label: 'Dataset ' + (data.datasets.length + 1),
backgroundColor: [],
data: [],
};
for (let i = 0; i < data.labels.length; i++) {
newDataset.data.push(Utils.numbers({count: 1, min: 0, max: 100}));
const colorIndex = i % Object.keys(Utils.CHART_COLORS).length;
newDataset.backgroundColor.push(Object.values(Utils.CHART_COLORS)[colorIndex]);
}
chart.data.datasets.push(newDataset);
chart.update();
}
},
{
name: 'Add Data',
handler(chart) {
const data = chart.data;
if (data.datasets.length > 0) {
data.labels.push('data #' + (data.labels.length + 1));
for (var index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(0, 100));
}
chart.update();
}
}
},
{
name: 'Remove Dataset',
handler(chart) {
chart.data.datasets.pop();
chart.update();
}
},
{
name: 'Remove Data',
handler(chart) {
chart.data.labels.splice(-1, 1); // remove the label first
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
chart.update();
}
}
];
// === include 'setup' then 'config' above ===
var myChart = new Chart(
document.getElementById('Quota'),
config
);
}If i run the script i get the following error message:
Uncaught ReferenceError: Utils is not defined
and now I've been looking for one or two days what "utils" is and how I can integrate it
Please Help me!
Thx
Thomas
More From » chart.js
