Highcharts chart with datetime xAxis - use categories on drilldown

2024/2/27 9:02:38

Is there a way to have 'datetime' for the xAxis type on the main series, but then when a series is clicked on, have the drilldown use categories for that time?

In this jsfiddle example (http://jsfiddle.net/kadams/3e3xqv7e/), you can see that when 'category' is used as the xAxis type, the drilldown data correctly uses the drilldown series names 'A', 'B', and 'C' on the xAxis. But when the xAxis type is changed to 'datetime', and and the millisecond time is used for the 'x' value in place of a name for the main series, the categories on the drilldown don't show 'A', 'B', or 'C' anymore. Just meaningless dates.

UPDATE for clarification - I would prefer to use the 'datetime' type instead of 'category' type with values formatted as dates, because Highcharts will throw the 'too many ticks' error when the x-axis is big: http://www.highcharts.com/errors/19. I give the 'category' type example in the fiddle below simply to demonstrate that 'A', 'B', 'C' do show properly when the type is not 'datetime'.

$(function () {$('#container').highcharts({chart: {type: 'column',},xAxis: {type: 'category',//  type: 'datetime',dateTimeLabelFormats: {hour: '%l:%M %p'}},legend: {enabled: false},series: [{name: 'Total',colorByPoint: true,data: [{y: 8,drilldown: 'Bob',name: 'Bob', //used with 'category' xAxis typex: 1420700400000 //used with 'datetime' xAxis type}]}],drilldown: {series: [{id: 'Bob',name: 'Bob',data: [{name: 'A',y: 3}, {name: 'B',y: 3}, {name: 'C',y: 2}]}]}});

I have found a solution for your problem! Sebastian Bochan gave me some ideas. You need to separate xAxis and set a different type to each one. So, here you have to add your categories as Highcharts's way.

xAxis: [{id: 0,type: 'datetime'},{id: 1,type: 'categories',categories: data.categories}]

Then you have to add this code in your serie to link it with your new Axis.

drilldown: {series: [{name: "test",id: "test",xAxis: 1, // <--- your desired X axis IDdata: [[your data]]}]}

Probably you'll see a small difference on bottom chart, but all works for me.

I hope this help to you ;)


Related Q&A

Can I expand a div so the overflow-y:auto scrollbar doesnt clip the div content?

Similar question, without a great answer:How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?I have a <div> of fixed height that acts as a m…

How to use requestAnimationFrame with Promise

I want to use requestAnimationFrame with Promise, so I can use it this way opacityToggle("layername",0).then(i=>"do some stuff after animation ends"), but not sure how to do this…

AngularJS: Cant get a value of variable from ctrl scope into directive

HostingCtrl: function HostingListCtrl($scope, Hosting) {Hosting.all().success(function(data) {$scope.hostings = data;}); }HTML template:<pagination items-count="{{hostings.length}}" curre…

Add image to openlayers map

Here is my code for adding a image on openlayers map.var image = new OpenLayers.Layer.Image(Image 1,http://belocalat.com/wp-content/plugins/openlayers/data/baselayer-img1.png,//new OpenLayers.Bounds(27…

compare jquery selectors performance

Looking at improving the performance of my jquery selectors. so any tips or articles as the best per formant jquery selectors? For example selecting the a divs id. Anywhere online I can provide html a…

Video element is not displaying in IE8?

I want to embed video element in all browsers,but its working fine in all browsers except IE8.Here, i am using mediaelement.js library to implement.

Meteor - Why should I use this.userId over Meteor.userId() whenever possible?

Judging from this comment by David Glasser in the GitHub issues:this.userId is the primary API and Meteor.userId() is syntactic sugar for users new to JavaScript who might not understand the details of…

MongoDB / Express - How to switch database after connecting via connect()

I am using express to connect to my mongoDB:mongodb.MongoClient.connect(mongourl, function(err, database) {// How would one switch to another database here?});I have to connect to the admin database i…

Dont allow users to stop javascript alert()

Im developing a MVC4 web aplication. I use javascript and jquery for a lot of stuff. But for info like this:I use the alert() function to display various messages to the user. The problem is, that the …

Searching for a Lazy Loading jQuery Slideshow or: hacking cross-slide

I am trying to get a jquery slideshow to display images from flickr, fading and scrolling. Everything works fine, except I really need Lazy Loading of the images (just loading the images on demand).I a…