Numeric and Boolean timeseries data on single chart

[richard.seaman]

Hi,

I am trying to determine the best way to show numeric and boolean time series data on the same graph, with a shared tooltip.
I have attached an example of what I'm trying to achieve.

Here is what I have so far (using React & Typescript):
https://stackblitz.com/edit/highcharts- ... tChart.tsx

I'm trying to keep the numeric and boolean data separate, so I've simply split the chart in half for now.
The numeric series on the top and the boolean on the bottom.

The numeric data is straightforward.
I'm using a line series per numeric trend, on a single y-axis.

The boolean data is where I'm having difficulties.
As per the example screenshot, I'm trying to show a continuous bar for each boolean trend.
True periods are represented with a solid colour and false periods represented with a faded colour.
From reviewing the documentation, the most suitable series type seems to be xrange.
I have used a single xrange series for all boolean trends and given each trend its own category on a dedicated boolean y-axis.

The shared tooltip is an issue in the current implementation.
When hovering over the numeric portion of the chart, only the numeric series are shown in the tooltip and the boolean series is faded.
When hovering over a boolean point within the boolean series, only the specific boolean point is included in the tooltip and the numeric series values are those from the beginning of the boolean point.
The desired behaviour is as follows:
- the tooltip always follows the mouse (and crosshairs)
- the tooltip shows the values for all numeric and boolean trends at (or nearest to) the crosshairs
- the boolean series does not fade when the mouse isn't over it

My questions are as follows:
1. Are there more suitable approaches for this use case instead of trying to use xrange for boolean data?
2. Can you provide any suggestions on how to implement the tooltip so the desired behaviour is achieved?

Thanks in advance.

[pawelys]

Hi! Welcome to the official Highcharts forum, and thanks for contacting us with your question!
1. Regarding the topic of how to present the boolean data, I think that your approach is the best. Of course, it all depends on your style and personal preference.

2. To stop series from fading out you can modify the inactive state of the series. Check the following snippet of the code

Code: Select all

plotOptions: {
  series: {
    states: {
      inactive: {
        opacity: 1
      }
    }
  }
}

API Reference: https://api.highcharts.com/highcharts/p ... s.inactive

the requirement of the tooltip following the mouse is the default one. You can edit the way, the tooltip is displayed by editing the formatter function. You can add the HTML elements to the tooltip, to display it exactly how you want. I would get the value from the "this" object in the formatted function to check values in this point from the other series and add the info I want. Let me know, if that works for you, and in case of any further questions feel free to contact us again! Kind regards,

[richard.seaman]

Hi,

Thank you for your response and suggestions.

I have updated my example here:
https://stackblitz.com/edit/highcharts- ... hartV4.tsx

The example includes a number of "versions" which I will discuss below.

Version 1
This is the original version of my implementation from my first post.

Version 2
I changed the inactive opacity as per your suggestion and it worked well.
I tried to use the tooltip formatter function to format the tooltip as required.
I hit the following issues:
- As I was using the x value directly in the tooltip html, I lost the default formatting. Is this default formatting function available to use?
- Only one boolean point was available in the "this" context so I couldn't get the values for the other points.
- When a boolean point was available in the context, it "froze" the tooltip at the beginning of the boolean range.

Version 3
I added valueSuffix and valueDecimal properties for the numeric series and it worked well.
I used a dedicated series per boolean trend, rather than combining them all onto a single series. This provided the "points" context that I needed within the tooltip formatter function's "this".
I hit the following issues:
- The boolean series alignment along the boolean y axis categories was not correct. I couldn't figure out how to fix the alignment.
- The boolean series had no colours in the legend.
- The boolean points still only seemed to appear within the formatter's context when hovering over particular areas of the graph

Version 4
In an attempt to make the boolean points always appear in the formatter context, I used a common interval for all series (numeric and boolean). So the true/false ranges from the previous versions were sub divided with points for every hour.
This seemed to fix the issue of the points context not being available in the formatter. It also hid the issue of the tooltip "freezing" as the intervals were all the same.
I hit the following issues:
- Borders seemed to appear between some consecutive false ranges even though the border width was 0 (see attached image - note the slivers within the false ranges).


So to sum up, I'm now trying to solve the following issues:
1. How to use the default date time formatting within a custom tooltip formatter function
2. How to fix the boolean series alignment along the y axis categories
3. How to assign and show the boolean series colours in the legend
4. How to fix the slivers of solid colour appearing within the false ranges

Thanks in advance.

[pawelys]

Hello again, Thanks for reaching out to us! By the way, a great way of presenting your work progress, it helps the support team a lot!
(One minor piece of advice, you could just update the options of the chart, instead of creating 4 separate components, but I know it was only in order to present the difference in options )
Regarding your issues:

1. To display the date in the formatter function you can use the Highcharts.dateFormat function. Check the following demo: https://jsfiddle.net/BlackLabel/grojtznh/


2. You need to apply following options:

Code: Select all

 centerInCategory: true,
      grouping: false,
      

to every series, or once in the plotOptions object. Check the following demo: https://jsfiddle.net/BlackLabel/z8ogq3L4/


3. You need to apply the following options:

Code: Select all

 
colorByPoint: false,
color: '#FF1212" //come color

to every series, or once in the plotOptions object. Check the following demo: https://jsfiddle.net/BlackLabel/bqm0k1p5/

4. I would try to switching to the approach, when the data is false, just not push it to the array. You might want to change a bit the way, you use the formatted function, but I think that this is better approach. I hope, that everything is clear for you. In case of any further questions feel free to contact us again!


Kind regards,

[richard.seaman]

Hi Pawel,

Thanks a million for your help with this.
I'm glad that you found the examples useful.
I've added another "Version 5" which applies your feedback.
(I'm afraid I just copy and pasted another component rather than refactor them so just the options update, I'll know for next time though!)
https://stackblitz.com/edit/highcharts- ... hartV5.tsx

I applied your suggestion for number 4 to one of the boolean series (Bool 2).
While it does remove the little slivers from the false periods, it means that the point isn't available within the tooltip formatter's context.
Presumably this is what you meant about having to change the formatter function a bit.
Unfortunately the issue seems to happen in the solid (true) periods too, see example screenshot.
It's difficult to reproduce as it appears to be random.

I attempted to fix the slivers in Version 6.
I set the grid line width to 0 for the boolean y axis but it didn't seem to have an impact.
I thought that the sliver may be the border so I changed the borderWidth to 1px to see if it "covered" up the slivers.
Interestingly, with the border on, the slivers appeared to get wider (see green arrows in attached screenshot) which would lead me to think that it's nothing to do with the border settings.

Is there anything else you can think of which may be causing the slivers?

Thanks again.

[pawelys]

Hi! Looks good right now!
The small slivers appear because of the rounding of the pixels to full values for more sharp image. There is a crips option, which disables this option.
The other way, is to set borderWidth: 1, and borderColor, which is the same as the color of the point.

Referring to what you said, about not having the point reference, if it is not defined, since you want to know, if the value is either true or false, you can assume, that if the point is not accessible, the value is false and it is all you need. Let me know if this works for you, and in case of any further questions feel free to contact me again! Kind regards,

[richard.seaman]

Hi,

I've added added another couple of versions:
https://stackblitz.com/edit/highcharts- ... hartV8.tsx

Version 7
I tried to set crisp to false but it didn't seem to have any effect.
I note that there's no documentation for series.xrange.crisp whereas there is for series.line.crisp.

Version 8
I set the border width to 1 and used the same colour as the series.
Unfortunately when including the false ranges, there were so many of them that they sort of merged into a solid bar and ended up looking like a true range!
I took your advice and removed the false ranges and relied on the logic you mentioned to populate the tooltip.
I added in some plotBands in an attempt to make it look like the false ranges are still there.

I'm pretty happy with where's it at now and I think I've plenty to play around with to get it looking the way I want.

Thanks again for all your help on this.

[pawelys]

Great! Good to hear, you managed to find some version, that suits you. In case of any further questions feel free to contact us anytime! Kind regards,