Create an interactive stock chart with custom date breaks using CanvasJS library

HTML

<div id="stockChartContainer" style="height: 450px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/ga/canvasjs.min.js"></script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/stockcharts/basics-of-creating-html5-stockchart/" target="_blank" title="Tutorial on Creating StockCharts in JavaScript ">https://canvasjs.com/docs/stockcharts/basics-of-creating-html5-stockchart/</a></div>

JavaScript

window.onload = function () {
  var dataPoints = [];
  var stockChart = new CanvasJS.Chart("stockChartContainer", {
    title: {
      text:"Chart with Date CustomBreaks"
    },
      axisX: {
        scaleBreaks: {
          type: "straight",
          customBreaks: [{
            startValue: new Date(2004, 00, 01), 
            endValue: new Date(2008, 00, 01) 
          }]
        }
      },
      axisY: {
        title: "Million of Dollars",
        prefix: "$",
        suffix: "M"
      },
      data: [{
        type: "line",
        xValueFormatString: "MMM YYYY",
        yValueFormatString: "$#,###.##M",
        dataPoints : dataPoints
      }]
  });
  $.getJSON("https://canvasjs.com/data/gallery/stock-chart/grocery-sales.json", function(data) {
    for(var i = 0; i < data.length; i++){
      dataPoints.push({x: new Date(data[i].date), y: Number(data[i].sale)});
    }
    stockChart.render();
  });
}