json date format to Highcharts date format

39,389

If your time is already UTC then it's as simple as:

Date.parse("01/01/2013 08:00")

EDITS

Assuming your data comes back as valid JSON:

var jsonObj = {value:"01/01/2013 08:00", key:5.5}; 

var seriesOneData = [];
seriesOneData.push([Date.parse(jsonObj.value),jsonObj.key]);
Share:
39,389
agri
Author by

agri

Updated on July 09, 2022

Comments

  • agri
    agri almost 2 years

    Could please someone guide me how to get such json object datetime

     {
        value="01/01/2013 08:00", 
        key=5.5
     }
    

    to javascript (to use in Highcharts) datetime acceptable format

    [Date.UTC(2013, 0, 1,08,00), 5.5].
    

    UPDATE

    Here is what I'm trying to do:

    var chart;
    
    $(document).ready(function () {
    
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                zoomType: 'x'
            },
            yAxis: {
                type: 'double',
                min: 0
            },
            xAxis: {
                type: 'datetime',
                labels: {
                    formatter: function () {
                        return Highcharts.dateFormat('%a %d %b %H:%M', this.value);
                    },
                    dateTimeLabelFormats: {
                        minute: '%H:%M',
                        hour: '%H:%M',
                        day: '%e. %b',
                        week: '%e. %b',
                        month: '%b \'%y',
                        year: '%Y'
                    }
                }
            },
            series: [{
                name: 'MyData1',
                data: []
            }, {
                name: 'MyData2',
                data: []
            }]
    
        });
    
        chart.series[0].setData([
            [Date.UTC(2013, 0, 1, 08, 00), 4.4],
            [Date.UTC(2013, 0, 1, 12, 00), 6.0],
            [Date.UTC(2013, 0, 1, 17, 00), 7.7],
            [Date.UTC(2013, 0, 1, 22, 00), 5.8]
        ]);
        chart.series[1].setData([
            [Date.UTC(2013, 0, 1, 08, 30), 0.4],
            [Date.UTC(2013, 0, 1, 10, 00), 0.0],
            [Date.UTC(2013, 0, 1, 16, 00), 0.7],
            [Date.UTC(2013, 0, 1, 20, 00), 0.8]
        ]);
    });
    

    here is it in jsFiddle.

    var datatype1=[];
    var datatype2= [];
    
        for(index in userReadingsJsonCollection.items){
              if(userReadingsJsonCollection.items[index].ReadingsData.Reading_Type==type1){
                    datatype1.push( 
    [Date.parse(userReadingsJsonCollection.items[index].ReadingsData.Rec_DateTime),
                    userReadingsJsonCollection.items[index].ReadingsData.Reading]
                    );
                }
              if(userReadingsJsonCollection.items[index].ReadingsData.Reading_Type==type2){
                    datatype2.push(
                    [userReadingsJsonCollection.items[index].ReadingsData.Rec_DateTime,
                    userReadingsJsonCollection.items[index].ReadingsData.Reading]              
                    );
                }
        }
    

    The result I get is [[1357027200000,5.5]] and this works great.

  • agri
    agri over 11 years
    Thanks Mark but this wouldn't work in this case, I've updated my question to specify.
  • Mark
    Mark over 11 years
    I don't understand what you are after. {value="01/01/2013 08:00", key=5.5} is not valid JSON. Where is that coming from? If that was valid JSON, you want it converted to an array like [Date.UTC(2013, 0, 1,08,00), 4.4], but where does the 4.4 come from? Did you mean 5.5?
  • agri
    agri over 11 years
    I have a json object that holds key, value pairs,in my case date and reading. Sorry for the confusion about the 4.4 and 5.5, take it as the same value. I'd like to load the chart dynamically from json but before I can do this I need to change the date format for Highcharts acceptable format.
  • Mark
    Mark over 11 years
    See edits. The other option is to change your value from a date string to a date epoch on the backend (whatever is generating the JSON) instead of in the Javascript as I do above.
  • JMHeap
    JMHeap over 10 years
    @Mark Can you put the example of the second one from the fiddle with "day/month/year" resolution on X axis. The pointInterval will show days properly when using data without "dates", but if you specify [[Date.UTC(2012, 2, 7, 10), 5]] it shows time, not day on X axis. I have been trying to solve that but the documentation on that its not totally clear for people that starts to use highcharts.
  • Cerin
    Cerin almost 7 years
    This answer doesn't make sense. If you have to heavily pre-process your data on the client side, that defeats the purpose of returning it via JSON.