How to pass variables from flask to external javascript in chart js

Question

I have this chart (as shown below)

let ctx1 = document.getElementById("myChart").getContext('2d');
let labels = ['Banking', 'Finances', 'Shopping', 'Recreation', 'Healthcare', 'Transportation', 'Food and Drink'];
let colorHex = ['#FB3640', '#86A9C5', '#286CA1', '#77FAC', '#1C203D', '#798E9C', '#2A303D'];

let myChart = new Chart(ctx1, {
  
  type: 'pie',
  data: {
    datasets: [{
      data: [10, 10, 10, 10, 10, 10, 10],
      backgroundColor: colorHex,
      borderWidth: [0,0,0,0,0,0,0]
    }],
    labels: labels,
  
  },
  options: {
    responsive: false,
    legend: {
      position: 'bottom',
      labels: {
        fontColor: 'white'
      }
    },
    
    
    plugins: {
      
      datalabels: {
        color: '#fff',
        anchor: 'end',
        align: 'start',
        offset: 10,
        borderWidth: 0,
        // borderColor: '#fff',
        borderRadius: 0,
        
        font: {
          size: '10',
          color: '#fff'
        },
        formatter: (value) => {
          return value + ' %';
        }
      }
    }
  }
})

I call it through the html (as shown below)

 <canvas id= "myChart" height="330%" width="330%"></canvas>

What I want to do pass variables in the data attribute in the JS - from my backend in flask so that the values that the chart displays will change.

How do I do this?

Thanks

Answer 1

If you are not using javascript externally then you can pass Flask's variable to Template view and then in view html you can use directly into the javascript as below:

data: {
    datasets: [{
      data: {{ chartData | tojson }}, //chartData variable is passed From flask to view template
      backgroundColor: colorHex,
      borderWidth: [0,0,0,0,0,0,0]
    }],
    labels: labels,
  
  }, 

Here chartData is Varible passed from Flask to View html, it will have values like

chartData = [10, 12, 11, 12, 10, 12, 11]