score: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
});
};
score: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.
score: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.
Source: stackoverflow.com
Related Query
- Chart.js not displaying when including variable
- Stacked line chart not displaying correctly when Xaxis is time
- Bar Chart not displaying when using chart.js
- chart does not change the values when the variable changes the value
- Chart.js: bar chart first bar and last bar not displaying in full
- Chart.js line chart is not displaying
- Uncaught TypeError: Chart is not a constructor when using Chart.js
- vue.js vue-chartjs chart not updating when chartData replaced, updated etc
- chart.js filltext object moved when tooltip is generated because of legend not displaying
- Angular: chart.js chart is not displaying
- Chart not displaying from JSON data
- ChartJS "half donut" chart not displaying properly
- Chart.js chart does not display when inside an ngIf.
- Css style not working well when resizing chart height in angular application
- ChartJS shows date, but not time, when displaying labels in time axis
- Vertical Bar Chart not displaying Correctly
- Chart JS chart not rendering in ArcGIS popup when using navigation arrows
- Doughnut Chart not displaying data with Chart Js and Backbone js
- Legend not displaying on Line or Bar chart - React-Chartjs-2
- Bar Chart Not Stacking When Using ChartJs
- vue-chart.js / vuex: Chart not updating when vuex state changes
- Chartjs Stacked bar chart not displaying correctly
- Chartjs does not render chart when set responsive option to true
- Vuejs - Chart.js wrapper vue3-chart-v2 not displaying labels when data are passed as object
- colors are not updated when updating chart
- Line Chart is not setting backgroundColor when created dynamically Chart.js
- vue-chartjs not working properly in flexbox and when resize chart goes blank
- Angular-Charts bar chart does not update when I change the data, series, labels
- $scope variable do not respond to the onClick function of angular chart
- X and Y axis labels not displaying on line chart (Chart.js)
More Query from same tag
- How to hide the labels of graphs that are not toggled in ChartJS
- Chart.js - consolidating days to month totals along the x (time) axis?
- Chart.js Auto Fit Failing
- How to reach to a chartjs chart's value?
- How to get percentage from data collected in ChartJS?
- I can't change the legend position in Laravel Charts & ChartJS
- Callback for v-show in vue.js
- destroy multiple charts on same page
- Chart.JS: How can I only display data labels when the bar width is big enough for the text?
- Load Tooltip faster during onHover of Legend Doughnut chart
- Chart.js: How to display object data types on line graph correctly?
- Javascript window.onload not displaying charts with Chart.js and Flask
- Pie Chart Label is not visible in ReactJS
- How to change the angle of x axis ticks dynamically based on size of name?
- Create an interactive custom tooltip for chartjs
- Is it possible to set up 0 as a minimum number for bar chart? react-chart.js-2
- Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)
- Dynamically updating time data in chart.js freezes the chart
- PrimeNg Pie Chart - By default show all tooltip?
- Chart.js Doughnut Chart Rendering Wrong
- How to show scale labels and set min/max for yAxes?
- Align a data label below a point on a bubble graph (Chart.JS)
- Charts.js graph with multiple Y Axes
- React and Chartjs not updating from dynamic data through api
- Pass variable from function js to other function js
- ChartJS doughnut legend click
- Multidimensional Charts.js (array of arrays)
- Chart.js : straight lines instead of curves
- React Chartjs - Update Chart on interval
- I have a issue with chart.js, php and infomix database?