//---------------------------------------------------
// Generate random data
//---------------------------------------------------
function generateBubbles() {
  const array = [];
  for(let i=0;i<100;i++){
    array.push({
      x: Math.random()*100,
      y: Math.random()*100,
      r: Math.random()*5+3
    });
  }
  return array;
}

const bubbles = generateBubbles();

//---------------------------------------------------
// Use the bubble chart
//---------------------------------------------------
const chart = new MyChart('#chart', {
  margin: { top: 20 },
  initialWidth: 300,
  initialHeight: 300,
  pixelRatio: 1
})
  .data(bubbles)
  // handle bubbleClick event
  .fit({
  	width: '100%',
  	height: 300
  }, true);

//---------------------------------------------------
// Buttons
//---------------------------------------------------
document.querySelector('#data-btn')
  .addEventListener('click', () => {
    chart.data(generateBubbles());
  })

let i = 1;
document.querySelector('#resize-btn')
  .addEventListener('click', () => {
    chart.dimension([200 * i, 200 * i]);
    i = i===1 ? 2 : 1;
  })