efenadir
Posts: 31
Joined: Sat Jul 10, 2021 6:32 pm

Set data grouping with button

Hi,

I want users to see the prices daily, weekly, monthly with their triggers in the UI. I can set the data interval weekly, monthly with DataGrouping.Units API. But I am doing it manually from the code. Also I am passing daily data to chart.

Is there any chance to change this from the UI, like users can change the date range from date selector? For example, users can see 6 months or 2 years of data on a daily, weekly or monthly basis.

Thanks for your consideration!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Set data grouping with button

Hello efenadir!

You can create custom button in rangeSelector so the user can choose something different from the default implemented buttons: https://api.highcharts.com/highstock/ra ... or.buttons

Inside click event you can also define exactly what should happen after clicking the button: https://api.highcharts.com/highstock/ra ... ents.click

Best regards!
Dominik Chudy
Highcharts Developer
efenadir
Posts: 31
Joined: Sat Jul 10, 2021 6:32 pm

Re: Set data grouping with button

Hi Dominik,

Thank you for your response. I tried two approaches for this problem and one of is your suggestion in this post, but both of them did not work that I wanted. Let me explain to you.

As I stated in above, I want users to see the chart daily, weekly, monthly basis in whatever date range. For example, user can see 2 years data on monthly basis.(There should be 24 data points.) or 6 months data on weekly basis.(There should be 24 data points.) These are my solutions that I tried:

1. Use extra buttons on range selector
Demo: https://codesandbox.io/s/data-grouping- ... c/index.js

Problems:
1. When user clicks the week button on the range selector, it will show the data weekly which is good. But, the date range is also a week. I know I can change the count parameter in the button settings, but it still show one date range which depends on the count parameter. Unlike of these, I want users can see whatever date range they want to see. For example there is 10 years data in the chart and first, user select 5 years span or 6 month span etc. and click week button. After users should see 5 years or 6 months of data on weekly basis.

2. When user clicks the week button on the range selector, and after change the date range from the date picker, the data returns the old format like daily basis. Also, this still happens when you slide the bottom date range selector. https://monosnap.com/file/5gO16UXUh4FyP ... kvZIGgb9Dt

2. Use custom button
Demo: https://codesandbox.io/s/pie-chart-fork ... c/index.js

At this approach, the other approach's problems are not exist which is good. But there is one:

1. If you add some technical indicators to the chart and click "Show data weekly" then the technical indicators are gone. I tried to solve this but couldn't find anything. No such thing in annotations, tags etc. However, technical indicators cannot be charted.

You can try the cases which I stated on demo's. I hope I explained well. I will be appreciate if you help me on this. Both approaches will be applicable from me if these problems are gone.

Thank you for your consideration!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Set data grouping with button

Hi again!

In this case, I would try the second way to do what you want. As far as I understand the problem here is that when you add a technical indicator and click your custom button the indicator disappears. Am I right?

Could you tell me if all indicators make the same problem or maybe it happens with only one of them? Maybe we could modify the code inside the click function of this button to fix the issue with indicators.

Best regards!
Dominik Chudy
Highcharts Developer
efenadir
Posts: 31
Joined: Sat Jul 10, 2021 6:32 pm

Re: Set data grouping with button

Hi Dominik,
In this case, I would try the second way to do what you want. As far as I understand the problem here is that when you add a technical indicator and click your custom button the indicator disappears. Am I right?
Yes, you are right. You can test on demo's.
Could you tell me if all indicators make the same problem or maybe it happens with only one of them?
No, it happens with all of the indicators. I believe the reason of this: When you add an indicator to the chart, it won't save to options object. If you console.log(options) after an indicator added to chart, in the series parameter in options object, you can see there is no sign of that indicator. Normally, indicator object should be added in that series parameter in options object. (When you add indicator and click save chart on stock tools, you can see the indicator object in that localstorage object.)

Btw, I found a solution on my second approach. It does work on my local program but does not work on the codesandbox demo, could not understand why. Due to the indicators does not come to options object, I take the indicators from chart object which refers to this keyword in the onlick() parameter. With this method, when I click the custom button, indicators also will appear on the chart.

Code: Select all

{
          text: "Show data weekly",
          onclick: function () {
            setOptions((options) => ({
              ...options,
              series: this.series.map((indicator) => {
                return [...options.series, indicator.userOptions];
              }),
            }));
            },
          },
Besides that, I also have several questions that related with this indicator topic. I can ask further.

Thanks!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Set data grouping with button

Hi!

There's a problem with the way you update the series config. The indicator that has been added to the chart by stockTools wasn't added to the chart's config and that's the reason why on update it disappeared. To do it your way we need to change updateArgs to true and false to make oneToOne argument to false.

Demo: https://codesandbox.io/s/data-grouping- ... rked-d8h7r

Docs: https://www.npmjs.com/package/highchart ... ns-details

We can also do it in a simpler way using chart.update method. Here you've got the demo: https://codesandbox.io/s/data-grouping- ... rked-f5120

Best regards!
Dominik Chudy
Highcharts Developer
efenadir
Posts: 31
Joined: Sat Jul 10, 2021 6:32 pm

Re: Set data grouping with button

Thank you Dominik, it really helped me!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Set data grouping with button

That's great to hear!

In case of any further questions, feel free to contact us again.
Dominik Chudy
Highcharts Developer

Return to “Highcharts Stock”