javascriptpolymervaadin-charts

Vaadin chart datetime is different


I am Korean. Do not speak English well. I want to solve the current problem. to represent the time. However, this time is different by 9 hours. I want to solve this problem. Please tell me how. Thank you...

enter image description here

enter image description here

<dom-module id="queue-area-charts">
    <template>
        <iron-ajax auto id="AjaxPost" url="http://localhost:9090/ybTest2"   method="POST" content-type="application/json" handle-as="json" on-response="_onResponse" last-response="{{hresponse}}"  debounce-duration="300"></iron-ajax>
        <template is="dom-repeat" items="{{hresponse}}" as="hresponse">
            {{hresponse.cpu}}
            {{hresponse.AGENT_TIME}}
            <p></p>
        </template>

        <vaadin-area-chart id="chart">
            <x-axis type="datetime"></x-axis>
            <y-axis allow-decimals='false' min='0' max="100">
            </y-axis>
                                    <!--"2017-07-27 18:04:46"   15  ====    1501146197000-->
            <tooltip formatter="function () {
                    return '<b>'+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>';}">
            </tooltip>
            <data-series name="Queue">
                <data>
                    <template is="dom-repeat" items="{{hresponse}}" as="hresponse">
                        <point>
                            <x>[[hresponse.AGENT_TIME]]</x>
                            <y>[[hresponse.cpu]]</y>
                        </point>
                    </template>
                </data>
            </data-series>
        </vaadin-area-chart>
    </template>
    <script>
        Polymer({
            is: "queue-area-charts",
            properties: {
                hresponse:{
                    type: Object,
                    notify:true,
                },
            },
            _onResponse: function(e, request) {
                this.attached();
            },
            attached: function () {
                this.async(function () {
                    var starttime = "2017-07-27 18:04:46",
                        endtime = "2017-07-28 00:00:00";
                    var oData = {"starttime": starttime, "endtime": endtime};
                    this.$.AjaxPost.body = JSON.stringify(oData);
                    this.$.AjaxPost.generateRequest();
                }, 3000);
            }
        });
    </script>
</dom-module>


Solution

  • 9 hours sounds exactly like Korea time zone, KST (UTC +9), vaadin-charts and its underlying chart library shows dates in UTC by default.

    So you can:

    Highcharts.setOptions({ global: { useUTC: false } });