CODEWITHSUNDEEP
highcharts
damoiser
damoiser

Reputation: 6238

change x-axis label on zooming with date

I have a graph with many data, more precisely a large amount of data stored by day (this is not looking nice for the user, too many labels).

More precisely the data are stored on the DB in this manner: date (in format YYYY - MM - DD) - data.

That I would like to do, is to have a default zoom (with large amount of data) with x-axis labels (for example) for weeks, but one time that the user zoom in it changes automatically to days.

Anyone has one idea how can I do it?

Maybe this is a good start: 

xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
        day: '%e of %b'   
    }
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 24 * 3600 * 1000 // one day
}]

found here: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/datetimelabelformats/

Edit

That I would like to show is, for example, an average value when there is week "zoom" and when the user zoom-in (in days view) there is the punctual value. Using only one series (because there are several series on this graph).

Upvotes: 1

Views: 4013

Answers (1)

NT3RP
NT3RP

Reputation: 15370

I think your best bet would be to work from the time-series demo on the Highcharts website, as it covers both time-series data, and zoomable data, without overloading the graph with too many labels.

EDIT:
In response to the additional detail provided, I do not think that highcharts is designed to display different data on zoom-in/out. It will simply display the available data as is.

If you want to be able to adjust the view of that data on zoom, my suggestion would be:

  • Add a listener for the selection event and;
    • Create a new, temporary series, hide the old series and show the new one or;
    • Change the existing series by recalculating the values
  • Have a separate series for the averaged data, and have a means to switch between full data and averaged data.

It's not the answer you are looking for, but I don't believe there is any other way to accomplish what you want.

Upvotes: 1

Related Questions