Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

2.6.0: Fixed timezone for line chart via parser #4511

Closed
JM2014 opened this issue Jul 16, 2017 · 4 comments
Closed

2.6.0: Fixed timezone for line chart via parser #4511

JM2014 opened this issue Jul 16, 2017 · 4 comments
Labels
status: duplicate time scale type: support

Comments

@JM2014
Copy link

JM2014 commented Jul 16, 2017

I would like to hava a fixed timezone inside my chart, which ignores any local browser settings.

I don't get the parser property working with a line chart.
Please see the added code:

<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript" src="Chart.bundle.js"></script>
  <div style="width:35%;">
        <canvas id="myChart"></canvas>
  </div>
  <script>
    var canvas = document.getElementById("myChart");
    var ctx = canvas.getContext('2d');

    // Global Options:
    Chart.defaults.global.defaultFontColor = 'black';
    Chart.defaults.global.defaultFontSize = 16;

   let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20000, 400000, 500000],
        }],
        labels: ['2016-06-14T17:00:00.000Z', '2016-06-14T17:10:00.000Z', '2016-06-14T17:20:00.000Z', '2016-06-14T17:30:00.000Z']
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 50,
                    suggestedMax: 100,
                }
            }],
            xAxes: [{
                type: 'time',     
                time: {
                    parser: function (utcMoment) {
                        return moment(utcMoment).utcOffset('+0100');
                    }
                }           
            }],
        }
    }
});
</script>
</body>
</html>

When trying this, I get an:

ReferenceError: moment is not defined

parser: function (utcMoment) {
return moment(utcMoment).utcOffset('+0100');
}

I also add the moment-library myself-> Then the error disappear, but the chart does not change.
I tried yesterday the whole day to get it running, with no success.
Is this a bug or a mistake from myside?
Is there somewhere a running example on 2.6.x?

Chart.js: Version 2.6.0
Browser: Firefox 53.0.3 (64bit) or Chrome (58.0.3029.110)

Greetings
Juergen
@etimberg
Copy link
Member

@JM2014 are you looking to display labels as a single time zone? The reason I ask is that using the parser option configures how the labels are read into moment objects.

You could try using options.ticks.callback on the scale to format the time into a specified time zone, however from looking at the code it looks like it gets passed the already formatted value which is not ideal.

One possible solution to this would be to pass the raw value to the callback. Thoughts @simonbrunel @benmccann ?

@benmccann
Copy link
Contributor

I haven't done anything with timezones before unfortunately. I saw a stackoverflow answer that had suggested to do it the way @JM2014 was attempting: #4303 (comment)

@JM2014
Copy link
Author

JM2014 commented Jul 19, 2017

Hi,
I will play with the callback a little bit. To be honest, I started with this problem, with a "normal" dataset....and also there I have no chance to change the timezone of the x-axis values.

The only way which I found meanwhile, was to take a global javascript method from the moment.lib:

moment.tz.setDefault('Asia/Tokyo');

But it seems for me, that this should be not the preferred way...
I am not sure, if changing the time-lib would be the best way...that must the chart.js team decide.

Anyway: The chart.js is great. I do not want to miss it!

If possible, I would like to check you, if it is a bug....

Greetings

<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript" src="moment.js"></script>
  <script type="text/javascript" src="moment-timezone-with-data.js"></script>
  <script type="text/javascript" src="Chart.js"></script>
  <div style="width:35%;">
        <canvas id="myChart"></canvas>
  </div>
  <script>
    // moment.tz.setDefault('Asia/Tokyo');
    var canvas = document.getElementById("myChart");
    var ctx = canvas.getContext('2d');

    // Global Options:
    Chart.defaults.global.defaultFontColor = 'black';
    Chart.defaults.global.defaultFontSize = 16;

   y0 = [
        {'x':1499916511733,'y':0.5},
        {'x':1499916539913,'y':0},
        {'x':1499916571023,'y':0},
        {'x':1499916601961,'y':20},
        {'x':1499916633087,'y':0},
        {'x':1499916664073,'y':4},
        {'x':1499916695183,'y':60},
        {'x':1499916726190,'y':100},
        {'x':1499916757527,'y':0},
   ]

   let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'First dataset',
            data: y0,
        }],
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 50,
                    suggestedMax: 100,
                }
            }],
            xAxes: [{
                type: 'time', 
            }],
            time: {
                    parser: function (utcMoment) {
                        return moment(utcMoment).utcOffset('+0300');
                    }
                }       
        }
    }
});
</script>
</body>
</html>

@etimberg
Copy link
Member

etimberg commented Nov 22, 2017 •
edited
Loading

Closing as a duplicate with #4814 which is tracking a PR for time zone support and related discussion

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status: duplicate time scale type: support
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@benmccann @JM2014 @etimberg