Vaadin chart datetime is different

Question

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

<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>

Post the code for ybTest2. How are you posting it to database? — Ofisora, Sep 19 '17 at 02:38
//Entity @Id// primary key @GeneratedValue(strategy = GenerationType.AUTO)//자동증가 @Column(name ="SEQ_NO") public long seqNo; @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") @Column(name ="INPUT_TIME") @Temporal(TemporalType.TIMESTAMP) public Date inputTime; @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") @Column(name ="AGENT_TIME") @Temporal(TemporalType.TIMESTAMP) @NotNull — 양병혁, Sep 19 '17 at 04:15
@Ofisora //@ResponseBody public List ybTest2(@RequestBody Map — 양병혁, Sep 19 '17 at 04:29
starttime = transFormat.parse(testtime); endtime = transFormat.parse(testtime1); System.out.print(starttime); List YangDatas = epoService.findByinputTimeBetween(starttime,endtime); model.addAttribute(YangDatas); return YangDatas; } Sorry I do not know how to add the source separately. Once you've commented out the date format you received and the datetime you received. — 양병혁, Sep 19 '17 at 04:30

score 0 · Accepted Answer · answered Sep 19 '17 at 06:10

0

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:

either set UTC dates to the series
or disable the use of UTC by running the following snippet before the chart is drawn:

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

answered Sep 19 '17 at 06:10

Guille

449
3
6

Thanks for your help. – 양병혁 Sep 19 '17 at 06:55

Vaadin chart datetime is different

1 Answers1