chartjs animation scatter

chartjs-animation-scatter.markdown

chartjs animation scatter

A Pen by moabi on CodePen.

License.

index.html

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="myChart" width="400" height="400"></canvas>
</div>

script.js

var color = Chart.helpers.color;
var scatterChartData = {
  datasets: [
    {
      label: 'title',
      xAxisID: "x-axis-1",
      yAxisID: "y-axis-1",
      backgroundColor: getRandomColor(),
      borderWidth: 0,
      pointRadius: getRandomInt(4, 14),
      data: [
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        }
      ]
    },
    {
      label: "My Second dataset",
      xAxisID: "x-axis-1",
      yAxisID: "y-axis-2",
      backgroundColor: getRandomColor(),
      borderWidth: 0,
      pointRadius: getRandomInt(4, 12),
      pointStyle: 'circle',
      data: [
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        },
        {
          x: randomScalingFactor(),
          y: randomScalingFactor()
        }
      ]
    }
  ]
};

var ctx = document.getElementById("myChart").getContext("2d");
window.myScatter = Chart.Scatter(ctx, {
  data: scatterChartData,
  options: {
    responsive: true,
    hoverMode: "nearest",
    intersect: true,
    title: {
      display: false,
      text: "Chart.js Scatter Chart - Multi Axis"
    },
    tooltips: {
      enabled: false
    },
    legend: {
        display: false
    },
    scales: {
      xAxes: [
        {
          position: "bottom",
          gridLines: {
            zeroLineColor: "rgba(0,0,0,1)"
          },
          display:false
        }
      ],
      yAxes: [
        {
          type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
          display: false,
          position: "left",
          id: "y-axis-1"
        },
        {
          type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
          display: false,
          position: "right",
          reverse: true,
          id: "y-axis-2",

          // grid line settings
          gridLines: {
            drawOnChartArea: false // only want the grid lines for one axis to show up
          }
        }
      ]
    },
    animation: {
      easing: 'easeInOutElastic',
      duration: 1800
    }
  }
});

setInterval(function(){
  scatterChartData.datasets.forEach(function(dataset) {
    dataset.data = dataset.data.map(function() {
      return {
        x: randomScalingFactor(),
        y: randomScalingFactor()
      };
    });
    dataset.backgroundColor = getRandomColor();
    dataset.pointRadius = getRandomInt(2, 14);
    
  });
window.myScatter.update();
},1800);

// generate random Color
function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
// generate random Integer
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}
function randomScalingFactor(){
  return Math.floor(Math.random() * (120 - 10)) + 10;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script>

style.scss

  #myChart {
    display: block;
    clear: both;
    background: #fff;
    height: 100vh;
    width: 100%;

  }