Gags Gags - 5 months ago 72
jQuery Question

Highcharts use dateTime for chart generation

I am using high-charts library to draw charts on my project.


and i am facing an issue while displaying labels on X axis.


Graph is being drawn efficiently as per the values but X axis labels are not good and not as i want.

The Data is as below:

seriesData

Wed May 25 2016 17:19:52 GMT+0530 (India Standard Time),983.49,
Thu May 26 2016 17:19:52 GMT+0530 (India Standard Time),1000.3,
Fri May 27 2016 17:19:52 GMT+0530 (India Standard Time),996.24,
Sat May 28 2016 17:19:52 GMT+0530 (India Standard Time),996.75,
Sun May 29 2016 17:19:52 GMT+0530 (India Standard Time),996.75,
Mon May 30 2016 17:19:52 GMT+0530 (India Standard Time),1001.75,
Tue May 31 2016 17:19:52 GMT+0530 (India Standard Time),999.86,
Wed Jun 01 2016 17:19:52 GMT+0530 (India Standard Time),1003.16,
Thu Jun 02 2016 17:19:52 GMT+0530 (India Standard Time),996.35,
Fri Jun 03 2016 17:19:52 GMT+0530 (India Standard Time),990.99


And Highcharts JS is as below

Highcharts.setOptions({
global:
{
useUTC: currentTime.getUTCHours()==currentTime.getHours()
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'linechartjs',
zoomType: 'x'
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%e.%m',
year: '%e.%m.%Y'
},
},
yAxis: {
title: {
text: ''
},
min: minY,
max: maxY,
tickInterval: increment,
opposite: true
},
plotOptions: {
line: {
dataLabels: {
enabled: false
},
marker: {
enabled: false
},
enableMouseTracking: false
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
name: '',
color: '#333',
data: seriesData,
}]
});
})


The X axis labels are as below:




X axis labels shall be in Date Format like 25.05, 26.05 .. and so on

Answer

Readers: This answer has been updated based on further input from the questioner. Please see below.

It looks like you don't need all of that code for your dateTimeLabelFormat attribute.

From your example, it seems what you want is two-digit day and two-digit month. In that case, all you need for your x-axis labels is:

dateTimeLabelFormats: {
    day: '%d.%m'
}

Here's an example fiddle (from a Highcharts demo) with this label format: http://jsfiddle.net/brightmatrix/zxt39L7g/

And here's the resulting chart:

enter image description here

Please let me know if this is helpful for you.

I did some further research based on the comments Gags provided and came up with additional label formatting and intervals. These settings can be changed based on what the user chooses in a dropdown menu (see the comments).

First, I created the dropdown menu:

<select id="chooseDateRange">
    <option value="">- choose a date range -</option>
    <option value="1day">one day</option>
    <option value="1week">one week</option>
    <option value="1month">one month</option>
    <option value="1year">one year</option>
    <option value="5years">five years</option>
</select>

Second, I created a Javascript function to set and define values based on what the user chose in this menu:

// initialize local variables for the chart's options
var selectedPointInterval = 0;
var selectedPointIntervalUnit = 'day';

// set values based on which date range the user chose
function setDateRangeAndLabels(value) {
    switch(value) {
        case "1day":
            selectedPointIntervalUnit = 'day';
            selectedPointInterval = 1;
            break;
        case "1week":
            selectedPointIntervalUnit = 'day';
            selectedPointInterval = 7;
            break;
        case "1month":
            selectedPointIntervalUnit = 'month';
            selectedPointInterval = 1;
            break;
        case "1year":
            selectedPointIntervalUnit = 'year';
            selectedPointInterval = 1;
            break;
        case "5years":
            selectedPointIntervalUnit = 'year';
            selectedPointInterval = 5;
            break;
        default:
            selectedPointIntervalUnit = 'day';
            selectedPointInterval = 1;
            break;
    }    
    chartOptions.plotOptions.series.pointInterval = selectedPointInterval;
    chartOptions.plotOptions.series.pointIntervalUnit = selectedPointIntervalUnit;
};

Third, I set the chart's options to a variable called chartOptions'. I moved the attributes that setpointStarttoplotOptions.series` to make them universal for all series.

// define the chart's options
var chartOptions = {
    plotOptions: {
        series: { pointStart: Date.UTC(2010, 0, 1) }
    },
    xAxis: { 
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%d.%m',
            week: '%d.%m',
            month: '%m.%y',
            year: '%m.%y'
        }
    },
    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]
    }]
};

Finally, I created code to draw the chart upon first loading the page, as well as a jQuery function to redraw it based on the user choosing a new range from the dropdown menu:

// draw the chart
setDateRangeAndLabels('1day');
var chart = $('#container').highcharts(chartOptions);

// redraw the chart based on new date range
    $('#chooseDateRange').change(function (){
    setDateRangeAndLabels(this.value);
  chart = $('#container').highcharts(chartOptions);
});

Here's the complete fiddle for review: http://jsfiddle.net/brightmatrix/zxt39L7g/

Please note: This will only change the x-axis labels, intervals, and default tooltip text for the data that the chart is given. To get data that's relevant to the date intervals chosen, you'll need to also dynamically change the series data based on the user's choice.