Highcharts Xaxis remove old data and shift left

Question

I'm very new to any type of programming language but have had some pretty great luck finding what I needed to get a start for the project I'm working on. I am trying to use Highcharts to generate data visually for end users from a SQL database. I need my xAxis to be labeled for up to a year (January 2018 - January 2019, February 2018 - February 2019 and so on) to shift left and "hide" or "crop" old data from the chart per month when new monthly data is entered into SQL.

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: [
      'Jan 2018',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
      'Jan 2019'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Tokyo',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 90]

  }, {
    name: 'New York',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3, 90]

  }, {
    name: 'London',
    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2, 90]

  }, {
    name: 'Berlin',
    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1, 90]

  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

So at the moment I have it looking like the above, when February 2019 is added it should shift January 2018 off the chart and the first set of data should be February 2018, through February 2019.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [        
            'Feb 2018',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec',
            'Jan',
            'February 2019'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 90]

    }, {
        name: 'New York',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 , 90]

    }, {
        name: 'London',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2, 90]

    }, {
        name: 'Berlin',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1, 90]

    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Editing the months in and out manually is what I'm doing at the moment - similar to the examples above, would be nice if it's possible to just shift it left automatically. Thanks in advance!

Answer 1

You can use array with month names as point names. The array should change its order after each get data.

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan'],
  year = 2018;

// Create the chart
Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {

        // set up the updating of the chart each second
        var series = this.series[0],
          xAxis = this.xAxis[0];

        setInterval(function() {
          months.splice(0, 1);
          months.push(months[0]);

          var name = months[months.length - 1];

          if (months[months.length - 1] == 'Jan') {
            year++;
            name = months[months.length - 1] + " " + year;
          }

          var y = Math.round(Math.random() * 100);
          series.addPoint({
            y: y,
            name: name
          }, true, true, false);

        }, 1000);
      }
    }
  },

  xAxis: {
    uniqueNames: false,
    type: "category"
  },

  series: [{
    name: 'Random data',
    data: (function() {
      // generate an array of random data
      var data = [],
        i;

      for (i = 0; i <= 12; i++) {
        if (i == 0) {
          name = months[i] + " " + year
        } else if (i == 12) {
          year++;
          name = months[i] + " " + year
        } else {
          name = months[i]
        }
        data.push({
          y: Math.round(Math.random() * 100),
          name: name
        });
      }
      return data;
    }())
  }]
});

API Reference:

https://api.highcharts.com/highcharts/series.line.data.name

https://api.highcharts.com/highcharts/xAxis.uniqueNames

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Live example: https://jsfiddle.net/BlackLabel/2ur6fyn4/