title: Rendering Chart.js Bubble Chart Using Array Data
body: <p>I have three arrays that I am parsing in from an XML file, detailed below:</p>
  
  <pre><code>["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"]
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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
                                      }
                                  }]
                              }
                          }
                      });
  </code></pre>
  
  <p>Note the format of the arrays can be changed if need be, so that just the values are used.</p>