score:0

Accepted answer

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:

enter image description here

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.


Related Query

More Query from same tag