plotly timezones

by sidhoda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.1/moment-timezone-with-data.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<body>
    <div data-bind="foreach: plots">
        <div data-bind="plotly: { data: data, layout: layout, options: options }">
    	</div> 
    </div>
</body>

JavaScript

var timezone = "America/New_York";
var browserTimezone = moment.tz.guess();
var data = [{
    Timestamp: "2015-03-28T20:00:00-04:00",
    Value: 0
}, {
    Timestamp: "2015-03-28T21:00:00-04:00",
    Value: 1
}, {
    Timestamp: "2015-03-28T22:00:00-04:00",
    Value: 2
}, {
    Timestamp: "2015-03-28T23:00:00-04:00",
    Value: 3
}, {
    Timestamp: "2015-03-29T00:00:00-04:00",
    Value: 4
}, {
    Timestamp: "2015-03-29T01:00:00-04:00",
    Value: 5
}, {
    Timestamp: "2015-03-29T02:00:00-04:00",
    Value: 6
}];

var x = data.map(function(x) {
    var t = moment.parseZone(x.Timestamp);
    return Date.UTC(t.year(), t.month(), t.date(), t.hour(), t.minute(), t.second(), t.millisecond());
    //return new Date(Date.UTC(t.year(), t.month(), t.date(), t.hour(), t.minute(), t.second(), t.millisecond()));
    //return moment.tz(x.Timestamp.replace("T", " ").substr(0, 19), "UTC").format('YYYY-MM-DD HH:mm:ss');
    //return x.Timestamp.replace("T", " ").substr(0, 19);
});

var y = data.map(function(x) {
    return x.Value;
});

console.log(browserTimezone);
console.log(x);
console.log(y);

function PlotViewModel(data) {
    console.log(data);
    var self = this;
    this.data = ko.observableArray(data);
    this.layout = ko.observable({
        showlegend: true,
        xaxis: {
            type: "date"
        },
        yaxis: {
            type: "linear"
        }
    });
    this.options = {
        showLink: false,
        sendData: false,
        displaylogo: false,
        displayModeBar: true,
        editable: false,
        showTips: false
    };
}

function AppViewModel() {
    var self = this;
    this.plots = ko.observableArray([
        new PlotViewModel([{
            type: 'scatter',
            x: x,
            y: y,
            mode: "lines+markers"
        }])
    ]);
}

// TODO: wrap in define
ko.bindingHandlers["plotly"] = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    	var value =...