buddydacote
Posts: 2
Joined: Thu Aug 03, 2023 1:49 pm

Questions regarding 2 Panes - Avg and Time

Quick intro, I'm the product designer for a small company and looking to see if an idea I want to pitch to the dev team is actually doable.

I was wondering if it's possible to have a two pane setup like https://www.highcharts.com/demo/stock/c ... and-volume but instead of both graphs based on averages, the top graph is based on daily averages and the second graph is based on multiple summaries over time during the day.

Example of what I am wanting to do.

Both graphs are based on a smart light being on or off.

The top graph is the daily average of how long a light is on. So at the end of the day it would tally the average hours.

The bottom graph is an event line summary of when and how long the light has been on or off (maybe 2 line graphs 1=On 2=Off)

The next behavior I would like to see is if I move the mouse from one day to the next it would start by just showing the on/off summary tooltip below and when I hover the last hour I get both the on time avg tooltip AND the on/off summary status tooltip below it.

My question, is this something that can be done with Highcharts or Highstock and, if so, what would be the best direction I should give my dev team to pull this off?

Design below:
Image
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

Re: Questions regarding 2 Panes - Avg and Time

Hi!

Welcome to our forum and thanks for reaching out to us with your question!

Of course, presenting such chart in Highcharts is achievable. I've created a simple example with randomized data, where first pane is depicting summary of light switched on, and the below is a line graph with the hourly data. This can be easily done with Higcharts stock dataGrouping object, which allows a variety of functions and customization for displaying desired output.

Demo: https://jsfiddle.net/BlackLabel/3Lt7dvyp/

API:
https://api.highcharts.com/highstock/pl ... roximation
https://api.highcharts.com/highstock/pl ... ping.units
https://api.highcharts.com/highstock/yAxis.top
https://api.highcharts.com/highstock/yAxis.offset

Let me know if you have any more questions!
Best regards!
Jędrzej Ruta
Highcharts Developer
buddydacote
Posts: 2
Joined: Thu Aug 03, 2023 1:49 pm

Re: Questions regarding 2 Panes - Avg and Time

Jędrzej Ruta your amazing response blew my mind. Normally I get annihilated with egos with questions like these in other places, but you went above and beyond and I can't thank you enough for your help.

I do have some lingering thoughts but you covered most of my major concerns and gave my developers an amazing head start which is perfect. Any of the lingering stuff I hope they can figure out with ease.

Thank you again!
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

Re: Questions regarding 2 Panes - Avg and Time

You're welcome, that's what we're here for!

In case of any further questions, feel free to contact us again.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Stock”