0👍
I am not sure but, can you try placing the chart object declaration next to the data? this might fix your issue…
fetch("/Pie").then(response => response.json()).then(function(response) {
if (response == null) {
console.log("returned nothing");
} else {
console.log(response.Name);
console.log(response.Duration);
console.log(response.color);
Name = JSON.stringify(response.Name);
Duration = JSON.stringify(response.Duration);
Color = JSON.stringify(response.color);
var data = {
labels: Name,
datasets: [{
label: "Data",
fill: true,
backgroundColor: gradientStroke,
borderColor: Color,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#d048b6',
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#d048b6',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: Duration
}]
var myChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: gradientChartOptionsConfigurationWithTooltipPurple
});
};
1👍
I think your main problem is you’ve converted all the response data into strings – Charts.js would expect the data to be objects.
So if you just remove the JSON.stringify for the name, duration and color it should work.
0👍
I wrote an answer previously which focused more on line charts, and created a repo with my method.I’ve adapted this to make a short gist which I think solves your Doughnut usecase.
Most of the functionality is built into the create_chart and load_chart functions, with the fetch call pushing data to the already existing chart object:
fetch(url)
.then((response) => {
return response.json();
})
.then((resp_data) => {
// Push this data to the config object of this chart.
resp_data.labels.forEach((label) =>{
chart.data.labels.push(label);
});
resp_data.datasets.forEach((dataSet) => {
chart.data.datasets.push({
data: dataSet['Duration'],
backgroundColor: dataSet['Color'],
fill: false,
})
});
// Finally update that visual chart
chart.update();
});
I’ve mocked a (slightly different) datastructure in the Pie method of the app, which will support multiple datasets:
@app.route('/Pie', methods=['GET', 'POST']) #change it to calendar retrieve
def Pie():
datasets = [{'Duration': [1,2,3],
'Color': ['#FF0000','#00FF00','#0000FF']
},
{'Duration': [8,9,12],
'Color': ['#FF0000','#00FF00','#0000FF']
}
]
return jsonify({'labels': ['Red','Green','Blue'], 'datasets': datasets})
These should render like this:
Hopefully this is of some use to you. I suggest checking out that previous answer, and the flask-chartjs repo for more info.