Grafico com Flot + PHP + MySQL

[tplantte]

boa tarde,

estou tentando passar valores de uma consulta para um grafico mas não consigo apontar a variavel no script, manualmente da certo, mas dinamicamente não aparece o grafico, esta assim:

 

<?php
    
    $result = mysqli_query($con,"select sum(quantidade) as qtd, obra_cliente from dosagem_usina where operacao ='saida' group by obra_cliente order by qtd desc");        

    while($row = mysqli_fetch_assoc($result))
    {
        $obra = $row['obra_cliente'];
        $qtd_cbuq = $row['qtd'];


    }

/*
     * BAR CHART
     * ---------
     */

    var bar_data = {
      data : [[50,180],[10,20]], <----- aqui manualmente vai, mas não consigo passar o array das variaveis
      bars: { show: true }
    }
    $.plot('#bar-chart', [bar_data], {
      grid  : {
        borderWidth: 1,
        borderColor: '#f3f3f3',
        tickColor  : '#f3f3f3'
      },
      series: {
         bars: {
          show: true, barWidth: 0.5, align: 'center',
        },
      },
      colors: ['#3c8dbc'],
      xaxis : {
        ticks: [[1,'Janeiro'], [2,'February'], [3,'March'], [4,'April'], [5,'May'], [6,'June']]
      }
    })
    /* END BAR CHART */

 

[Frank K Hosaka]

Não consegui descobrir de onde veio o modelo que aparece na listagem, assim eu peguei um outro modelo da página

Getting Started | Chart.js (chartjs.org)

Criei a tabela dosagem no MySQL, e criei apenas um registro, colocando no campo qtd (varchar(255)) o valor 

[[50,180],[10,20]]

para ser usado nesse código que chamei de astudy.php

<?php
$mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select qtd from dosagem");
while($row=$query->fetch_assoc()){
  $qtd = $row['qtd'];}
echo "<div id=divdosagem style=display:none>$qtd</div>";
?>
<div style="width:50%;margin:0 auto">
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart')
const dosagem = JSON.parse(divdosagem.innerHTML); 
new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'],
      datasets: [{
        label: 'Dosagem',
        data: dosagem,
        borderWidth: 1}]},
    options: {
      scales: {
        y: {beginAtZero: true}}}});
</script>