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

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

by JohnSnowGum

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 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
    }					
  ]
});

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

  for (var i = 0; i < dateArray.length; i++) {
    if (dateArray[i][0] != 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});
}

$.getJSON("http://www.banlister.com/graph-test/service.php", function(data) {
  calculateFrequency(data);
  chart.render();
});