Zooming charts by Behaviour subject - scrollbar issue and missing zoomComplete event

[Benjamin Fritz]

Hello everyone,

i have a situation where i need to programmatically control zooming and panning inside the chart. 

To this purpose i have implemented a solution based on what i found in your forums:

• i use a property that stores a basic configuration object for he xAxis config
• That basic config is used as initial value in a rxjs BehaviourSubject "focusXAxis"
• in the template i subscribe to it "[primaryXAxis]='focusXAxis | async'"
• in the component i have a method setZoom(zoomFactor, zoomPosition)  The method nexts those values into the BehaviourSubject "focusXAxis"

That approach does cause the chart to change focus but there are 2 things i'm missing:

1. my handcrafted approach does not emit a zoomComplete event (and i'd be fond of a solution that does that)
2. it also shows an issue with the "enableScrollbar" feature of the zoomModel: The scrollbar does not update accordingly. That causes weird glitches when zooming around: To test, i just use 2 setTimeout calls that each call my handcrafted setter method at a different time with different values

Please advise on those 2 missing things. 

Maybe there is even a smarter way, to control zooming programatically, that i have missed so far?

Many thanks and best regards

[Durga Gopalakrishnan]

Hi Benjamin, 

We are validating your reported scenario. We will update the status within one business day(14^th July, 2020). We appreciate your patience until then. 

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi Benjamin, 

We have analysed your queries. Chart zooming can be handled by setting zoomFactor and zoomPosition for required axis. The enableScrollbar property renders scrollbar for chart. The zoomComplete event will be triggered when zooming is completed. Please check with the below snippet and screenshot. 

Code Snippet 

<ejschart [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis'(zoomComplete)='zoomComplete($event)'  [zoomSettings]='zoom'> 

</ejs-chart> 

this.primaryXAxis = { 

            valueType: 'DateTime', 

            labelFormat: 'MMM y', 

            zoomFactor: 0.2, zoomPosition: 0.6 

        }; 

 this.zoom = { 

            enableSelectionZooming: true, 

            enableScrollbar: true 

        }; 

public zoomComplete(args: IZoomCompleteEventArgs ): void{ 

      // code 

    } 

 

Screenshot 

 

 

Sample 

https://stackblitz.com/edit/angular-s18age-38p5vw 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Durga G 

[Benjamin Fritz]

Hi Durga,

thanks for the helpful reply and the stackblitz. 

I have played with a fork of your stackblitz and it works fine in there: 

https://stackblitz.com/edit/angular-s18age-vlsnu5?file=app.component.ts

In it i added the timeout changing the axis properties and i cannot reproduce my scrollbar-related issue, so i guess it's gone. 

As for not gettting a zoomComplete event when the zoom changes via the axis properties:

I'll just create a subject that gets nexted from both: the zoomComplete event and any axis changes i make. 

This works fine for me. 

Thanks again for your help. 

Best regards

Benjamin

[Srihari Muthukaruppan]

Hi Benjamin,  

 

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M