CODEWITHSUNDEEP
javascripthighcharts
Nisham Mahsin
Nisham Mahsin

Reputation: 1399

Highchart : by passing FROM DATE and TO DATE x axis labels should set

I have two dropdown from_date and to_date .based on selected values from these two dropdowns i want to make x axis labels. currently i am using the following code .but it does not work. please tell me what is the issue.

xAxis: {
                type: "datetime",
                dateTimeLabelFormats: {
                    day: '%m-%d'   
                },
                tickInterval: 24 * 3600 * 1000,
                min: Date.UTC(from_date),
                max: Date.UTC(to_date)
       },

edit:

now i am getting with following code see fiidle. i am hard coding the date if it is from variable it is not working see fiiddle.

 xAxis: {
                        type: 'datetime',
                        min: Date.UTC(2003, 8, 25),
                        max: Date.UTC(2003, 9, 8),
                        range: Date.UTC(2003, 9, 8) - Date.UTC(2003, 8, 25),
                        ordinal: false,
                        endOnTick: false,
                        startOnTick: false
                    },

Upvotes: 1

Views: 965

Answers (2)

Rahul Gupta
Rahul Gupta

Reputation: 10131

See here the working DEMO.

The problem is that you are mistaken regarding the date initialization:

This is incorrect

var from_date='2014,30,06';
Date.UTC(from_date); //here variable value is passed as a single string with value : '2014,30,06'

This is correct

Date.UTC(2014,30,06);// This means that you are passing three different parameters "year", "month" and "day" for date initialization

So to initialize the date from string we have split the string using javascript split function as shown below

var from_date='2014,30,06';
var arr_from_date = from_date.split(","); 
//alert(arr_from_date[0]+" "+arr_from_date[1]+" "+arr_from_date[2]);
arr_from_date[0] //2014 has year value
arr_from_date[1] //30 has day value
arr_from_date[2] //06 has month value

So the final JS code is:

var from_date='2014,30,06';
var arr_from_date = from_date.split(","); 
//alert(arr_from_date[0]+" "+arr_from_date[2]+" "+arr_from_date[1]);
var to_date='2014,30,07';
var arr_to_date = to_date.split(","); 

var new_from_date = Date.UTC(arr_from_date[0], arr_from_date[2], arr_from_date[1]);

var new_to_date = Date.UTC(arr_to_date[0], arr_to_date[2], arr_to_date[1]);
$('#container').highcharts({

    xAxis: {

                        type: 'datetime',
                        min: new_from_date,
                        max: new_to_date,
                        range: new_to_date - new_from_date,
                        ordinal: false,
                        endOnTick: false,
                        startOnTick: false

    },

    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]
    }]

});

Upvotes: 1

Paweł Fus
Paweł Fus

Reputation: 45079

The problem is how are you using Date.UTC(). Date.UTC(year, month, day, .. ) is taking a couple of arguments, not one argument which is string, like this: '2014,30,06'.

See example how this should be done: http://jsfiddle.net/LLExL/3049/

var from_date = '2014,30,06'.split(',');
var to_date = '2014,30,07'.split(',');
var min = Date.UTC(from_date[0], from_date[2], from_date[1]);
var max = Date.UTC(to_date[0], to_date[2], to_date[1]);
$('#container').highcharts({

  xAxis: {

     type: 'datetime',
     min: min,
     max: max,
     range: max - min,
     ordinal: false,
     endOnTick: false,
     startOnTick: false

  },

  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]
  }]

});

Note: Second argument (month) for Date.UTC() is starting from 0 (January), not from 1 (which is February).

Upvotes: 1

Related Questions