find missing dates in array and inject a null for chart - Javascript highcharts

Javascript examples for highcharts:Chart Configuration

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Configuration

Description

find missing dates in array and inject a null for chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts test tool</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript">
    $(function(){/*from   w  ww.j a v  a2 s.  c  o m*/
var origData = {
    "2015-05-19T00:00:00": 20,
        "2015-05-20T00:00:00": 30,
        "2015-05-21T00:00:00": 50,
        "2015-06-21T00:00:00": 50,
        "2015-06-22T00:00:00": 50
};
var data = (function () {
    var d = [];
    for (var k in origData) {
        d.push([k, origData[k]]);
    }
    return d;
})();
var interval = 'Date'; //or Hour or Month or Year etc.
function fillData(data, interval) {
    var d = [],
        now = new Date(data[0][0]), // first x-point
        len = data.length,
        last = new Date(data[len - 1][0]), // last x-point
        iterator = 0,
        y;
    while (now <= last) { // loop over all items
        y = null;
        if (now.getTime() == new Date(data[iterator][0]).getTime()) { //compare times
            y = data[iterator][1];
            iterator++;
        }
        d.push([now.getTime(), y]); // set point
        now["set" + interval](now.getDate() + 1); // jump to the next period
    }
    return d;
}
var chart = new Highcharts.StockChart({
    chart: {
        renderTo: 'container'
    },
    series: [{
        data: fillData(data, interval)
    }]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <div id="container" class="context-menu-one" style="height: 300px"></div>  
   </body>
</html>

Related Tutorials