panel-highcharts
panel-highcharts copied to clipboard
datetime format wrong
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")
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")
So using above worked...
chart = ph.HighStock(object=configuration, sizing_mode="stretch_width")
Thanks @govinda18 ...
Thanks both. Closing this one.