datetime format wrong

[Berowne]

Hi. Great product thanks! I have data with [[date, value]] being sent to high charts and the mouse-over feature shows the date properly but the x-axis shows in milli-seconds or 1970 if I use a format string on the config.

import panel_highcharts as ph import numpy as np import panel as pn

ph.config.theme("auto") pn.extension('highchart')

raw = np.array([['2020-01-02T00:00:00.000', 0.08724838802601927], ['2020-01-03T00:00:00.000', 0.3505050980452534], ['2020-01-07T00:00:00.000', 0.20308500006387006], ['2020-01-08T00:00:00.000', 0.30082278389285844], ['2020-01-09T00:00:00.000', 0.1532198747144695], ['2020-01-13T00:00:00.000', 0.29617460579831706], ['2020-01-14T00:00:00.000', 0.3101317710656381], ['2020-01-15T00:00:00.000', 0.26286860757963615], ['2020-01-16T00:00:00.000', 0.2246060860444374], ['2020-01-17T00:00:00.000', 0.23607952701269072]])

data= [{'name': 'labels', 'data': raw[:,0]}, {'name': 'random', 'data': raw[:,1]}]

configuration = { "zoomType": 'x', "title": {"text": "broken dates!"}, "xAxis": {"type": 'datetime', "labels": {"formatter": "function() {return Highcharts.dateFormat('%b/%e/%Y', this.value);}"}}, "yAxis": {"title": {"text": 'random'}}, "legend": {"enabled": True},
"series": data } chart = ph.HighChart(object=configuration, sizing_mode="stretch_width")

[govinda18]

For time series data, you should consider using HighStock instead. Also, highcharts expect datetime data to be in epoch milliseconds in UTC. Here is a code that works:

import panel_highcharts as ph
import numpy as np
import panel as pn
from datetime import datetime

ph.config.theme("auto")
pn.extension('highstock')

raw = np.array([['2020-01-02T00:00:00.000', 0.08724838802601927],
['2020-01-03T00:00:00.000', 0.3505050980452534],
['2020-01-07T00:00:00.000', 0.20308500006387006],
['2020-01-08T00:00:00.000', 0.30082278389285844],
['2020-01-09T00:00:00.000', 0.1532198747144695],
['2020-01-13T00:00:00.000', 0.29617460579831706],
['2020-01-14T00:00:00.000', 0.3101317710656381],
['2020-01-15T00:00:00.000', 0.26286860757963615],
['2020-01-16T00:00:00.000', 0.2246060860444374],
['2020-01-17T00:00:00.000', 0.23607952701269072]])

data = [{
    "name": "series",
    "data": list(map(lambda data: [datetime.fromisoformat(f"{data[0]}+00:00").timestamp() * 1000, float(data[1])], raw))
}]

configuration = {
    "series": data
}
ph.HighStock(object=configuration, sizing_mode="stretch_width")

[Berowne]

So using above worked...

chart = ph.HighStock(object=configuration, sizing_mode="stretch_width") Thanks @govinda18 ...

[MarcSkovMadsen]

Thanks both. Closing this one.