GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Populando Chart.js Bubble com dados de requisição AJAX

mysql
php
programação
Tags: #<Tag:0x00007fb39dab4958> #<Tag:0x00007fb39dab45c0> #<Tag:0x00007fb39dab4430>

#1

// segundo grafico Bolhas------------------------------------------------------------------
$(document).ready(function() {
$.ajax({
//aprender = pasta dentro de controllher
url: “<?php echo base_url('aprender/chartC/chart_Bubble') ?>”,
dataType: “json”,
type: “GET”,
success: function(data) {
// alert(“Successo " + data.length + " Objestos.”);
var response = {};

  var length = data.length;
  
  

  var length = data.length;

  for (var i = 0; i < length; i++) {
    if (data[i].score == "bom") {
      eixo.max_xy.push(data[i].max_xy);
    } else if (data[i].score == "ruim") {
      eixo.min_xy.push(data[i].min_xy);
    }
  }

console.log(data.length);

var ctx4 = document.getElementById(“popChart”).getContext(‘2d’);

  var dataBubble = {
    datasets: [{
          label: ['Testando'],
          fill: false,
          lineTension: 0.1,
          pointHoverBackgroundColor: "rgba(153, 102, 155, 0.2)",
          pointHoverBorderColor: "rgba(153, 102, 155, 1)",
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data:eixo.min_xy,
          //data:[{x: -2,y: 12,r: 15},{x: 15,y: 1,r: 19}, {x: -51,y: 2,r: 15}, {x: 12, y: 45,r: 18}],
          backgroundColor: ['rgba(255, 242, 0, 0.3)','rgba(6, 82, 221, 0.3)',"rgba(239,107,51, 0.3)","rgba(157,51,239, 0.3)",
      ],
    }]
  };

  var optionsBolhas = {
    responsive: true,
    tooltips: {
      callbacks: {
        label: function(t, d) {
          return d.datasets[t.datasetIndex].label +
            ': (Dias:' + t.xLabel + ', Total:' + t.yLabel + ')';
        }
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          min:-100,
          max:100,},
        position: 'left',
        gridLines: {
        zeroLineColor:"rgba(241,28,39, 1.0)"
        },
      }],
      xAxes: [{
        ticks: {
          beginAtZero: true,
          min: -100,
          max: 100,
          //stepSize: 10

        },
        position: 'bottom',
        gridLines: {
          zeroLineColor: "rgba(241,28,39, 1.0)"
        },
      }],
    },
    tooltips: {
      enable: true,
      mode: 'label',
      callbacks: {
        label: function(tooltipItem, data) {
          var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + ': ' + Number(tooltipItem.yLabel) + '  Pontos';
        }
      }
    },
  };

  var chartbubble = new Chart(ctx4, {
    type: 'bubble',
    data: {
        datasets: data,
    },
    options: optionsBolhas,

  });

}, //fim success

error: function(data) {
  // alert('Voce nao se conectou ao banco de dados');
  console.log('Ocorreu um erro durante a execução do dashboard: '+ data);
}

});
});