micronyks
Posts: 13
Joined: Wed Jun 08, 2022 7:23 am

How to update stock line current value when chart is zoomed-in with really good performance

I have 2 series (lines) displayed as shown in demo. I can have up to 30 series (lines) in one go.

What is implemented is, as soon as I move the mouse, it should update the current value (for all series (lines) - remember I can have up to 30 series in one go) in the grid shown right below stock chart. It is working expected.

Pls find working demo : https://stackblitz.com/edit/react-ts-q ... ptions.js FYI: You can focus on only mouseOver function rather than looking in to all other files as demo has so many files.

Problem 1

If you select 30 Days from the dropdown and start moving your mouse slowly, it updates the grid current value column for all series(lines) rightly.

But the problem is when I zoom-in (either by drag select mouse from one place to somewhere else in chart or by dragging two yellow handler towards each other ), it doesn't update the current value column

NOTE: These below two images are for your reference only to understand what I mean by No zoomed-in and zoomed-in

Without Zoom-in Image
without_zoom-in.jpg
without_zoom-in.jpg (34.07 KiB) Viewed 368 times
With Zoom-in Image - Try to bring both yellow handlers together
With_zoom-n.jpg
With_zoom-n.jpg (44.86 KiB) Viewed 368 times
FYI, if you select 7 Days and if you perform zoom-in, it works very well but for 30 Days with zoom-in scenario, it doesn't work. I need help to fix it.


Problem 2

As I told you I can have up to 30 series (lines) in one go. In given demo, there are two series(lines) and when you select 30 days, you have to move your mouse slowly, otherwise it will not update the value immediately. That is because on each mouse move, I'm looping through all lines multiple times and perform some logic. I know it is a bit complex logic as I use one/two for loops as shown in below code snippet. It runs every time when mouse is moved for each hovered point for all lines. This is very bad way of updating the current value BUT I want to improve this logic. I know this is not right implementation but I really have NO IDEA how to optimize it. Any help would be greatly appreciated.

Code: Select all

   mouseOver: (e) => {
                const index = e.target.index;
                const chart = e.target.series.chart;
                const series = chart.yAxis[0].series;
                const totalGridSeries = [...stockGrid];

                for (let i = 0; i < series.length; i++) {
                  const name = series[i].name || series[i].name;
                  const foundSeries = totalGridSeries.find(
                    (x) => x.name === name
                  );
                  if (foundSeries) {
                    if (index) {
                      const value = series[i].points[index]?.y;
                      if (value) {
                        foundSeries.currentValue = value;
                      } else {
                        foundSeries.currentValue = undefined;
                      }
                    } else {
                      foundSeries.currentValue = undefined;
                    }
                  }
                }

                setStockGrid(totalGridSeries);
              },
micronyks
Posts: 13
Joined: Wed Jun 08, 2022 7:23 am

Re: How to update stock line current value when chart is zoomed-in with really good performance

I just resolve: Problem 1 (with below code snippet)

If some one can help me resolve problem 2 and optimize the code. It is not performant at all. Look at below code it is working but not right way of doing the things.

https://stackblitz.com/edit/react-ts-qc ... ata%2Fi.js

Code: Select all

  events: {
              mouseOver: (e) => {
                const xAxisValue = e.target.x;
                const chart = e.target.series.chart;
                const series = chart.yAxis[0].series;
                const totalGridSeries = [...stockGrid];

                for (let i = 0; i < series.length; i++) {
                  const name = series[i].name || series[i].name;
                  const foundSeries = totalGridSeries.find(
                    (x) => x.name === name
                  );
                  if (foundSeries) {
                    if (xAxisValue) {
                      const foundPoint = series[i].points.find(
                        (t) => t.x === xAxisValue
                      );
                      if (foundPoint && foundPoint.y) {
                        foundSeries.currentValue = foundPoint.y;
                      } else {
                        foundSeries.currentValue = undefined;
                      }
                    } else {
                      foundSeries.currentValue = undefined;
                    }
                  }
                }

                setStockGrid(totalGridSeries);
              },
            },
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How to update stock line current value when chart is zoomed-in with really good performance

Hello,

First of all, removing all console.logs will optimize your code.

As for the optimization of table generation, in the demo below you have an example of how it can be done more efficiently. Unfortunately, I am not very familiar with the data-grid library you are using, so I presented it with a regular table.

Demo: https://stackblitz.com/edit/react-ts-b1 ... ckchart.js

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Stock”