javascript : how to link categories to date in highcharts

Question

fiddle link: https://jsfiddle.net/jaiminsoni/38v7jfs3/12/

     current = 1246406400000;
    arrayShifts = [];
    arrayTimestampActual = [];

    for (i = 0; i < 6; i++) {
      arrayShifts[i] = current + (i * 6 * 3600 * 1000);
    }

    for (i = 0; i <= 18; i++) {
      arrayTimestampActual[i] = current + (i * 1 * 3600 * 1000);
    }


    var
      color3 = [
        [arrayShifts[0], 27, 40],

        [arrayShifts[1] - 60000, 27, 40],
        [arrayShifts[1], 30, 50],

        [arrayShifts[2] - 60000, 30, 50],
        [arrayShifts[2], 40, 60],

        [arrayShifts[3] - 60000, 40, 60],
        [arrayShifts[3], 45, 65],

        [arrayShifts[4] - 60000, 45, 65],
      ],
      color2 = [
        [arrayShifts[0], 14.3, 27],

        /* [1246492800000, 14.3, 27], */
        [arrayShifts[1] - 60000, 14.3, 27],
        [arrayShifts[1], 20, 30],

        [arrayShifts[2] - 60000, 20, 30],
        [arrayShifts[2], 28, 40],

        [arrayShifts[3] - 60000, 28, 40],
        [arrayShifts[3], 30, 45],

        [arrayShifts[4] - 60000, 30, 45],
      ],
      color1 = [
        [arrayShifts[0], 0, 14.3],

        [arrayShifts[1] - 60000, 0, 14.3],
        [arrayShifts[1], 0, 20],

        [arrayShifts[2] - 60000, 0, 20],
        [arrayShifts[2], 0, 28],

        [arrayShifts[3] - 60000, 0, 28],
        [arrayShifts[3], 0, 30],

        [arrayShifts[4] - 60000, 0, 30],

      ],
      value = [
        [arrayTimestampActual[0], 10],
        [arrayTimestampActual[1], 20],
        [arrayTimestampActual[2], 25],
        [arrayTimestampActual[3], 23.8],
        [arrayTimestampActual[4], 20],
        [arrayTimestampActual[5], 12],
        [arrayTimestampActual[6], 37],
        [arrayTimestampActual[7], 23.8],
        [arrayTimestampActual[8], 35],
        [arrayTimestampActual[9], 15],
        [arrayTimestampActual[10], 22],
        [arrayTimestampActual[11], 23.8],
        [arrayTimestampActual[12], 35],
        [arrayTimestampActual[13], 38],
        [arrayTimestampActual[14], 25],
        [arrayTimestampActual[15], 30],
        [arrayTimestampActual[16], 35],
        [arrayTimestampActual[17], 27],
        [arrayTimestampActual[18], 38]
      ];


    var chart = Highcharts.chart('container', {

      title: {
        text: ''
      },

      xAxis: [{
        type: 'datetime'
      },
      {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    opposite: true
      }],

      yAxis: {
        min: 0,

        title: {
          text: null
        }
      },

      tooltip: {
        crosshairs: true,
        shared: true,
        // valueSuffix: '°C'
      },
      chart: {
        backgroundColor: '#f4f4f4',

      },

      /*  legend: {
       }, */

      series: [{
          name: 'Value',
          data: value,
          zIndex: 1,
          marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0]
          }
        }, {
          name: 'color1',
          data: color1,
          type: 'arearange',
          lineWidth: 0,
          //  linkedTo: ':previous',
          color: Highcharts.getOptions().colors[2],
          fillOpacity: 0.3,
          zIndex: 0,
          marker: {
            enabled: false
          }
        },
        {
          name: 'color2',
          data: color2,
          type: 'arearange',
          lineWidth: 0,
          //    linkedTo: ':previous',
          color: '#FFC200',
          fillOpacity: 0.3,
          zIndex: 0,
          marker: {
            enabled: false
          }
        },
        {
          name: 'color3',
          data: color3,
          type: 'arearange',
          lineWidth: 0,
          /*       linkedTo: ':previous', */
          color: '#f01515',
          fillOpacity: 0.3,
          zIndex: 0,
          marker: {
            enabled: false
          }
        }
      ]
    });
    var maxY = chart.yAxis[0].max;
    var color4 = [
      [arrayShifts[0], 40, maxY],

      [arrayShifts[1] - 60000, 40, maxY],
      [arrayShifts[1], 50, maxY],

      [arrayShifts[2] - 60000, 50, maxY],
      [arrayShifts[2], 60, maxY],

      [arrayShifts[3] - 60000, 60, maxY],
      [arrayShifts[3], 65, maxY],

      [arrayShifts[4] - 60000, 65, maxY],
    ];
    chart.addSeries({
      name: 'color4',
      //showInLegend: false,
      data: color4,
      type: 'arearange'
    });

chart.yAxis[0].update({
  max: maxY
});

Charts has line -> value: hourly values
which is 00:00:00, 01:00:00, 02:00:00, etc.

it has arearange -> color1, color2, color3 and color4 : every 6 hours values
which is 00:00:00, 05:59:59, 06:00:00, 11:59:59, 12:00:00, 17:59:59, etc.

i'm trying to add second x-axis : category : as

00:00:00 to 05:59:59 : cate_1
06:00:00 to 11:59:59 : cate_2
12:00:00 to 17:59:59 : cate_3
18:00:00 to 23:59:59 : cate_4

is there any way to do this? I couldn't find any solution for how to link category with datetime?

Answer 1

• Add a second xAxis with the categories option set with an array of categories (Cat 1, Cat 2, etc as needed)
• Set all your current series to use the original axis ( add option xAxis: 0 to each series)
• Add a new hidden series that uses the new axis (xAxis: 1). You can hide the series by setting showInLegend: false, marker: {enabled: false } and lineWidth: 0
• The data in the new series is arbitrary data (so just set each point to zero) but you need to have the same number of items in the series as you have categories (so for 4 categories data: [[0, 0],[1, 0],[2, 0],[3, 0]] )

Example: https://jsfiddle.net/38v7jfs3/56/

I've hardcoded the four categories in the example. Your code will have to calculate the number of categories you need based on your data. The categories are not actually linked to a datetime concept, you simply need to make sure you have the right number of categories (ie figure out how many 6 hour intervals there are in the total time period covered by the graph and add that many categories)