Multiple bubble chart datasets - Javascript Chart.js

Javascript examples for Chart.js:Bubble Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bubble Chart

Description

Multiple bubble chart datasets

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js pie IIF</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//from w  w w  . j  a v  a2 s .  c  om
var main_arr = [];
main_arr.push([{x:1, y:10},{x:5, y:20},{x:7, y:5}]);
main_arr.push([{x:1, y:30},{x:4, y:50},{x:8, y:7}]);
main_arr.push([{x:2, y:11},{x:3, y:80},{x:10, y:70}]);
var colors = ['lightblue', 'red', 'green', 'yellow'];
var myBubbleChart = new Chart(document.getElementById("myChart"), {
  type: 'bubble',
  data: {
    datasets:
      (function (main_arr) {
            var out = [];
          for(var i=0; i<main_arr.length; i++) {
            out.push({
                label: 'Group ' + i + ': ' + main_arr[i].length,
                data: main_arr[i],
                backgroundColor: colors[i]
              });
          }
          console.log(out);
          return out;
      })(main_arr)
      /*[{
        label: 'Group 1: ' + main_arr[0].length,
        data: main_arr[0],
        backgroundColor: 'lightblue'
      }, {
        label: 'Group 2: ' + main_arr[1].length,
        data: main_arr[1],
        backgroundColor: 'pink'
      }]*/
    ,
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 100
        }
      }],
      xAxes: [{
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 10
        }
      }],
    }
  }
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
      <canvas id="myChart" width="400" height="400"></canvas>  
   </body>
</html>

Related Tutorials