Column Chart with Y Values based on the Frequency of Dates - CanvasJS JavaScript Charts

Column Chart with Y Values based on the Frequency of Dates - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dateArray = ["2016-08-30", "2016-10-23", "2016-10-23", "2017-02-12", "2018-08-30", "2018-08-30", "2017-02-12", "2016-08-30", "2016-08-30"];
var dps = [];

var chart = new CanvasJS.Chart("chartContainer",{ 
  title:{
    text: "Y Values based on Frequency of Date"
  },
  axisX:{
    title: "Date"
  },
  axisY:{
    title: "Frequecy of dates"
  },
  data: [
    {
      type: "column",
      dataPoints: dps
    }					
  ]
});

calculateFrequency(dateArray);
chart.render();

function calculateFrequency(dateArray) {
  dateArray.sort();
  var currentXValue = null;
  var count = 0;

  for (var i = 0; i < dateArray.length; i++) {
    if (dateArray[i] != currentXValue) {
      if (count > 0)
        dps.push({x: new Date(currentXValue), y: count});
      currentXValue = dateArray[i];
      count = 1;
    } else {
      count++;
    }
  }
  if (count > 0)
    dps.push({x: new Date(currentXValue), y: count});
}