What's the best way to present JSON data on chart


I’m exporting daily data (24 samples of timestamp and value) from Python/pandas and would like to present it in a chart. I am currently pushing data via API to string as JSON.
Would like to update the chart (preferably bar) every hour (from current_hour to current_hour + 23 samples/hours).

What are the best options here?

I recommend creating a basic bar chart in the page creation editor. Then you can examine the yaml that is generated to understand the usage of the oh-chart (it’s not shown in the page yaml but it is the root component of the configuration this is shown), the grid and axes slots, and oh-data-series components.

For your custom data instead of using an item property, you’ll use the data property of an oh-data-series with type bar which can accept a basic array. To get the array you can use the JSON.parse method in the widget expressions.

The whole chart system uses apache eCharts, so you can refer to those docs for config options and other details:

Thanks for the feedback. Are there any instructions on how to do it? Would be really helpfull.

I don’t think there are any instructions specific to chart creation. Just go to Settings → Pages and click on the blue floating button, select Create Chart and fill in the chart wizard dialog. Bar chart is one of the options right in the dialog.

I have somewhat similar problem in creating a chart. I have installed EntsoE Binding (EntsoE Binding [4.0.0;5.0.0)) which creates 24 separate channels for future hours where DateTime and Number channels holds the time and price. So, I’m wondering how this data could be plotted with the build-in Apache ECharts.

Honestly, while this is probably possible using the built-in charts, it’s stretching the system well past its intended use and you will probably have a much better experience with something like a grafana integration.

OK, thanks for the info. I’m already using InfluxDB so I may persist data into that then and do charting with Grafana.

I’ve created the page with bar chart.
But not sure how to integrate it into sitemap or habpanel. Could not find any howtos.
Could you please direct me here?

MainUI pages are a completely separate UI from either HABpanel or sitemaps. You will not be able to integrate the page you just made into either of those systems.

To access the page you’ve made via MainUI, you can either turn on the Show on sidebar switch in the page’s Sidebar & Visibility settings or create a widget on some other page (such as your overview page) which will navigate to the new chart page.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.