Rendering Chart.js Bubble Chart Using Array Data

Question

I have three arrays that I am parsing in from an XML file, detailed below:

["x": "23.561799", "x": "-10.713591", "x": "-20.516543", "x": "27.352751", "x": "-21.090982"]
["y": "-5.777557", "y": "-24.425175", "y": "9.131939", "y": "7.052970", "y": "-26.059631"]
["r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000"]

Let's say these are called arrayX, arrayY and arrayR. How would I go about using these to render a bubble chart in Chart.js? I have the code to create a simple bubble chart here:

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: [
                                {
                                    x: 23,
                                    y: -10,
                                    r: 10
                                },
                                {
                                    x: -10.713591,
                                    y: -24.425175,
                                    r: 3
                                },
                                {
                                    x: -20.516543,
                                    y: 9.131939,
                                    r: 36
                                },
                                {
                                    x: 27.352751,
                                    y: 7.052970,
                                    r: 19
                                },
                                {
                                    x: -21.090982,
                                    y: -26.059631,
                                    r: 2
                                }

                                ],
                                backgroundColor:"#FF6384",
                                hoverBackgroundColor: "#FF6384",
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero:true,
                                        min: -30,
                                        max: 30  
                                    }
                                }],
                                xAxes: [{
                                    ticks: {
                                        beginAtZero:true,
                                        min: -30,
                                        max: 30
                                    }
                                }]
                            }
                        }
                    });

Note the format of the arrays can be changed if need be, so that just the values are used.

jordanwillis · Accepted Answer · 2017-03-09 13:06:35Z

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  
           }
         }],
       }
     }
   }
});

Collectives™ on Stack Overflow

Rendering Chart.js Bubble Chart Using Array Data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related