Get the timezone from my browser/server to inject in angular2-highcharts

Question

I actually get the timezone setup manually using the timezoneOffset function coming from the Highcharts API, I am currently in gmt+2 so I set it to -2 * 60 but when we go change the hour in October my setup will not work properly anymore, so I decided to take my browser or the server time instead. I know we could take the gettimezoneOffset function coming from the API getTimezoneOffset: Function. The pb is I am setup with typescript and Angular 4, how could I make it in an elegant way? thanks in advance

Here's my actual working code using timezoneOffset:

 constructor(public userService3: UserService3) {

     const Highcharts = require('highcharts');

    Highcharts.setOptions({
  global: {
    timezoneOffset: -2 * 60
   }
});
           this.options = {
            title : { text : '' },
            chart: {  type: 'area'},
            legend: { enabled: false },
            credits: { enabled: false },
            xAxis: { type: 'datetime',
                    startOnTick: false,
                    endOnTick: false,
                    tickInterval: 36e5 * 2, // two hours
                    },
            yAxis: { min: 0,
              max: 100 },
            plotOptions: {
              series: {
                  color: '#648e59',
                  fillOpacity: 0.8,
                  fillColor: '#648e59',
                  pointInterval: 36e5 * 2 // two hours
                      }
            },
            series: [{
              name: 'Someone1',
              data: [],
            }]
        };
    }
   saveInstance(chartInstance) {
    this.chart = chartInstance;
     console.log(chartInstance);
}

    public ngOnInit () {
    this.dataSubscription = this.userService3.getData().subscribe((data) 
=> {
      this.options.series[0].data = data.data.operating_details;
      console.log(data);
   });
}
    ngOnDestroy() {
      if (this.dataSubscription){
this.dataSubscription.unsubscribe();
}
    }

Here's my html:

   <chart [options]="options" (load)="saveInstance($event.context)"> 
   </chart>

score 4 · Answer 1 · answered Jul 19 '17 at 13:18

4

var date = new Date(); var timezone = date.getTimezoneOffset();

But I think you should get the time zone from the server because browser give the timezone according to local system, if someone changes it it will cause problem for you.

answered Jul 19 '17 at 13:18

Jaimin Raval

146
5

That would just give you the timezone of the server. If the server is in California, but the user is in New York this would possibly cause some problems. – BFunk Mar 12 '21 at 17:42

score 2 · Accepted Answer · answered Jul 19 '17 at 12:59

2

You can simply get the timezone offset from your client:

const timeZoneOffset = new Date().getTimezoneOffset();

You will get the local difference from UTC in minutes, then use it as you wish. Depending on your type of application, this should be a better approach than hard coding the time zone for most cases when your client are in different time zones.

answered Jul 19 '17 at 12:59

BogdanC

2,746
2
24
22

thanks for your help I am trying to implement your code in angular2-highchart – Emile Cantero Jul 19 '17 at 13:23
1

Thanks it works ! I use your code that way: `const timeZoneOffset = new Date().getTimezoneOffset(); const Highcharts = require('highcharts'); Highcharts.setOptions({ global: { timezoneOffset: timeZoneOffset } });` – Emile Cantero Jul 19 '17 at 13:28

Get the timezone from my browser/server to inject in angular2-highcharts

2 Answers2