Share X Axis When Zooming Watch List Charts
-
I followed the advice in this post to get two watch charts on the same page and the x-axis on both gets sets by the date bar on the header, and that works great.
The challenge now is if someone clicks and zooms/pans on chart 1 the x-axis on chart 2 stays set per the date bar. Is there a method to always have the x-axis be matched on both charts even when zooming with the click and drag feature?
-
@chio
Is this something like what you want? https://www.amcharts.com/kbase/syncing-zoom-across-several-date-based-serial-charts/We can certainly look into implementing something like this in a future release but its not currently possible without writing your own custom component.
-
@jared-wiltshire yes that example is exactly what i'd want.
do you have guidance on a tutorial for how i write my own custom component to implement this?
-
@chio This shows you how to add a user module. You might also want to search the forum for "user module" to find some examples of how it is used.
https://help.infiniteautomation.com/getting-started-with-a-user-module/For reference, our directives are open source and located here - https://github.com/infiniteautomation/ma-dashboards/tree/main/UI/web/ngMango/directives
You might want to look at serialChart.js or stateChart.js for example.I would recommend that you have a reasonable knowledge of AngularJS to attempt this.