ChartJS to create scatter chart - Javascript Chart.js

Javascript examples for Chart.js:Scatter Chart

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

Description

ChartJS to create scatter chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Jittered Data - Custom Function</title> 
   </head> 
   <body translate="no"> 
      <div style="width:45%; float: left"> 
         <canvas id="chart1"></canvas> 
      </div> 
      <div style="width:45%; float: left; margin-left: 25px"> 
         <canvas id="chart2"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script>
      var jitter = function(data) {
   return data.map(function(e) {
    var xJitter = Math.random() * (-1 - 1) + 1;
    var yJitter = Math.random() * (-1 - 1) + 1;
    return {//from   ww w  .  j  av a 2 s.  com
      x: e.x + xJitter,
      y: e.y + yJitter,
    }
  });
};
var data1 = [
  {x: 10, y: 50},
  {x: 11, y: 30},
  {x: 10.5, y: 50},
  {x: 11.5, y: 30},
  {x: 12, y: 30},
  {x: 10.75, y: 30},
  {x: 12.4, y: 30},
  {x: 9.6 + 20, y: 30},
  {x: 10 + 20, y: 20},
  {x: 11 + 20, y: 30},
  {x: 10.5 + 20, y: 20},
  {x: 11.5 + 20, y: 30},
  {x: 12 + 20, y: 30},
  {x: 10.75 + 20, y: 10},
  {x: 12.4 + 20, y: 30},
  {x: 9.6 + 20, y: 10},
];
var data2 = [
  {x: 1, y: 30 + .1},
  {x: 11, y: 30 - .1},
  {x: 10.5 + 1.5, y: 30 + .2},
  {x: 11.5 + .2, y: 30},
  {x: 12 + 1.5, y: 30 - .2},
  {x: 10.75 + 1.5, y: 30 + .15},
  {x: 12.4 + 1.5, y: 30 + .1},
  {x: 9.6 + 20 + 1.5, y: 30 - .2},
  {x: 10 + 20 + 1.5, y: 30},
  {x: 11 + 20 + 1.5, y: 30},
  {x: 10.5 + 20 + 1.5, y: 30},
  {x: 11.5 + 20 + 1.5, y: 30},
  {x: 12 + 20 + 1.5, y: 30},
  {x: 10.75 + 20 + 1.5, y: 30},
  {x: 12.4 + 20 + 1.5, y: 30},
  {x: 9.6 + 20 + 1.5, y: 40},
];
var ctx = document.getElementById("chart1").getContext("2d");
var myScatter = Chart.Scatter(ctx, {
  data: {
    datasets: [{
      label: "My First dataset",
      borderColor: 'rgb(255, 99, 132)',
      data: data1
    }, {
      label: "My Second dataset",
      borderColor: 'rgb(54, 162, 235)',
      data: data2
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Original Data'
    },
    showLines: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 28,
          max: 40,
        }
      }],
    },
    elements: {
      point: {
        radius: 5
      }
    }
  }
});
var ctx = document.getElementById("chart2").getContext("2d");
var myScatter2 = Chart.Scatter(ctx, {
  data: {
    datasets: [{
      label: "My First dataset",
      borderColor: 'rgb(255, 99, 132)',
      data: jitter(data1)
    }, {
      label: "My Second dataset",
      borderColor: 'rgb(54, 162, 235)',
      data: jitter(data2)
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Jittered Data'
    },
    showLines: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 28,
          max: 40,
        }
      }],
    },
    elements: {
      point: {
        radius: 5
      }
    }
  }
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials