[Chartjs]-Rendering Chart.js Bubble Chart Using Array Data

by

5👍

✅

Since your are getting data dynamically, just iterate over your data and build a chartData object in the format that chart.js requires. Once you have assembled your data, just use that in your chart definition. See the below example

var xArray = ["x": "23.561799", "x": "-10.713591", "x": "-20.516543", "x": "27.352751", "x": "-21.090982"];
var yArray = ["y": "-5.777557", "y": "-24.425175", "y": "9.131939", "y": "7.052970", "y": "-26.059631"];
var rArray = ["r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000"];

var chartData = [];

xArray.forEach(function(e, i) {
  chartData.push({
    x: parseFloat(e),
    y: parseFloat(yArray[i]),
    r: parseFloat(rArray[i]),
  });
});

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bubble',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
         label: 'Gaze Map Month 1',
         data: chartData,
         backgroundColor:"#FF6384",
         hoverBackgroundColor: "#FF6384",
      }
    ]
  },
  options: {
     scales: {
       yAxes: [{
         ticks: {
           beginAtZero:true,
            min: -30,
            max: 30  
           }
         }],
       }
     }
   }
});

Leave a comment