Akhil Sahu Akhil Sahu - 6 months ago 9
Javascript Question

Categories are skipped in highcharts on xAxis

There are certain element in categories that are skipped in the list.
in the X -axis but there column are there .I need all categories to be listed in proper order .Is there any suggestion.Please include jsfiddle

enter image description here

Fiddle Demo



$(function () {
$('#container_graph').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Events of Interest by Inmate'// - Last 30 Days'
},
xAxis: {
tickInterval: 1,
categories: ['10000000000050275','2433136','10000000000033173','847432','1688662','2417602','2488320','847324','10000000000050508','10000000000039394','1472668','986736','2505390','2126730','847608','1351346','1163300','2235992','2433172','847544','1350204','1072258','10000000000038760','2433072','958518','2058548','847104','1007642','847088','2237326','937802','2501650','1330470','2058694','1963596','10000000000048800','847562','1346466','10000000000038997','1347520','10000000000045278','10000000000020175','846918','847304','847320','2128070','1448834','847252','847646','10000000000026595','847224','846954','2126248','2415400','2361896','2343500','10000000000027155','10000000000052188','2126888','994038','10000000000044971','2058688','2260188','10000000000006432','1272236','1221744','881792','10000000000044958','881780','2139962','2095872','10000000000006643','1692334','2039862','2207290','1632428','2204646','10000000000046847','10000000000010534','1340552','1781426','2127830','2092820','847108','2433186','2393020','1013122','847026','2436194','846990','10000000000039378','2279736','2522830','10000000000045984','2126848','2405456','10000000000051005','2018202','1770978','2143796','2126750','1253234','2192700'],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total Calls'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
switch(this.series.name){
case 'PIN Sharing':
window.location ='dev_pin_drilldown.php?i=&dt='+this.category;
break;
case 'Multiple Speaker':
window.location ='dev_multi_drilldown.php?i=&dt='+this.category;
break;
}
}
}
}
}
},
series: [
{
type: 'column',
name: 'PIN Sharing',
color:'blue',
data: [
0,4,1,0,4,4,11,9,11,2,5,11,0,1,4,2,1,1,1,5,0,3,1,1,3,6,16,4,0,2,1,3,2,0,7,4,5,1,5,4,1,0,0,3,1,0,1,1,0,1,2,0,2,0,2,0,4,1,2,1,0,1,1,1,0,0,0,0,1,5,0,0,0,3,1,1,1,1,0,0,1,1,0,4,1,1,5,1,1,2,0,0,1,0,2,1,0,0,2,0,0,2,1
]
},
{
type: 'column',
name: 'Multiple Speaker',
color:'yellow',
data: [
1,0,0,1,1,3,0,9,0,0,0,1,2,1,0,1,0,3,3,0,1,2,3,3,0,0,5,0,13,2,1,0,0,2,24,0,0,0,0,1,1,1,7,1,0,1,1,0,2,3,0,1,0,3,0,3,1,0,1,0,1,0,0,0,1,1,1,1,0,4,3,1,2,3,5,5,0,0,1,1,1,4,2,5,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,4,1,0,0
]
}
]
});
});




Answer

Highcharts will tend to remove some categories as to prevent overlap. I find that the best way to prevent this is to force the tickPositions like in the following example.

$(function() {
  var categories = ['10000000000050275', '2433136', '10000000000033173', '847432', '1688662', '2417602', '2488320', '847324', '10000000000050508', '10000000000039394', '1472668', '986736', '2505390', '2126730', '847608', '1351346', '1163300', '2235992', '2433172', '847544', '1350204', '1072258', '10000000000038760', '2433072', '958518', '2058548', '847104', '1007642', '847088', '2237326', '937802', '2501650', '1330470', '2058694', '1963596', '10000000000048800', '847562', '1346466', '10000000000038997', '1347520', '10000000000045278', '10000000000020175', '846918', '847304', '847320', '2128070', '1448834', '847252', '847646', '10000000000026595', '847224', '846954', '2126248', '2415400', '2361896', '2343500', '10000000000027155', '10000000000052188', '2126888', '994038', '10000000000044971', '2058688', '2260188', '10000000000006432', '1272236', '1221744', '881792', '10000000000044958', '881780', '2139962', '2095872', '10000000000006643', '1692334', '2039862', '2207290', '1632428', '2204646', '10000000000046847', '10000000000010534', '1340552', '1781426', '2127830', '2092820', '847108', '2433186', '2393020', '1013122', '847026', '2436194', '846990', '10000000000039378', '2279736', '2522830', '10000000000045984', '2126848', '2405456', '10000000000051005', '2018202', '1770978', '2143796', '2126750', '1253234', '2192700'];
    var positions = [];
  for (var i = 0;i < categories.length;i++) {
        positions.push(i);
  }

  $('#container_graph').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Events of Interest by Inmate' // - Last 30 Days'
    },
    xAxis: {
      tickPositions: positions,
      categories: categories,
      labels: {
        rotation: -45,
        align: 'right',
        style: {
          fontSize: '10px',
          fontFamily: 'Verdana, sans-serif'
        }
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total Calls'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      align: 'right',
      x: -70,
      verticalAlign: 'top',
      y: 20,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.x + '</b><br/>' +
          this.series.name + ': ' + this.y + '<br/>' +
          'Total: ' + this.point.stackTotal;
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              switch (this.series.name) {
                case 'PIN Sharing':
                  window.location = 'dev_pin_drilldown.php?i=&dt=' + this.category;
                  break;
                case 'Multiple Speaker':
                  window.location = 'dev_multi_drilldown.php?i=&dt=' + this.category;
                  break;
              }
            }
          }
        }
      }
    },
    series: [

      {
        type: 'column',
        name: 'PIN Sharing',
        color: 'blue',
        data: [
          0, 4, 1, 0, 4, 4, 11, 9, 11, 2, 5, 11, 0, 1, 4, 2, 1, 1, 1, 5, 0, 3, 1, 1, 3, 6, 16, 4, 0, 2, 1, 3, 2, 0, 7, 4, 5, 1, 5, 4, 1, 0, 0, 3, 1, 0, 1, 1, 0, 1, 2, 0, 2, 0, 2, 0, 4, 1, 2, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 5, 0, 0, 0, 3, 1, 1, 1, 1, 0, 0, 1, 1, 0, 4, 1, 1, 5, 1, 1, 2, 0, 0, 1, 0, 2, 1, 0, 0, 2, 0, 0, 2, 1
        ]
      }, {
        type: 'column',
        name: 'Multiple Speaker',
        color: 'yellow',
        data: [
          1, 0, 0, 1, 1, 3, 0, 9, 0, 0, 0, 1, 2, 1, 0, 1, 0, 3, 3, 0, 1, 2, 3, 3, 0, 0, 5, 0, 13, 2, 1, 0, 0, 2, 24, 0, 0, 0, 0, 1, 1, 1, 7, 1, 0, 1, 1, 0, 2, 3, 0, 1, 0, 3, 0, 3, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 4, 3, 1, 2, 3, 5, 5, 0, 0, 1, 1, 1, 4, 2, 5, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 4, 1, 0, 0
        ]
      }

    ]
  });
});

Fiddle : https://jsfiddle.net/apokryfos/1m94j3j9/