Scroll three bar charts at the same time

Hi,

I need a little bit of help.

I have three differe bar charts with the same left axis in the same dashboard but with different bottom axis.

How can I scroll all of them together when I scroll only one of them, or is there a way to have only one scroll bar for all three?


Thanks alot!

That will depend on why you have a scroll bar on the left axis of a bar chart.


I will assume a simple situation, and correct me if this assumption is wrong. In my setup I have three bar charts using the same hierarchy, and each is using a different measure. I change the Horizontal Zooming for each of them to have Maximum Visible Categories of 5, which means I have a scroll bar on the bottom axis to be able to see all 10 categories. I then use the Horizontal Bars option, which flips the axes and I now have the same scroll bar on the left side. It's important to note here that the scroll bar is still on the X axis, which is now positioned on the left.


The simplest solution in this situation is to assign the same X axis viewport settings instance to the three charts. With nothing selected on the dashboard, open the Properties panel and add a script to the Ready action. Use the following code for the script:

chart1.control.xViewport = chart2.control.xViewport = chart3.control.xViewport;

Hope this works.

Elia's answer is probably closer that what you are looking for but you may also want to consider the option of linking the charts by controlling the zoom of one chart from another. This is showcased under the following webinar specifically starting at minute 10:00.

I should have been more descriptive about my situation, but yes, you are assuming right (even with the Maximum Visible Categories of 5, witch is my case).


The code does work! Thanks!

After applying the code, I have encountered another problem.

I have hidden the left axis (X axis) and the scroll bar from the second and third chart, so that I can control them only from the scroll bar from the first chart.

But after I click de scroll bar, it disappeares, somehow taking the proprieties from the second and third chart.

Any ideeas on how to make the scroll bar visible? Thanks!!

The scrollbar's visibility and appearance are part of the viewport settings. With this code, they will be the same for all three charts.


If you want to only show one scrollbar, the script will be a lot more complicated. You will have to use jQuery to add an event handler to the view port of one chart, which will update the viewports of the other two charts. This event fires on the chart.control object itself, and its event name and passed arguments can be found here: https://www.dundas.com/support/api-docs/js/#API Reference/dundas/controls/Chart/constants.html.


Another option is to use a Slider instead of the scrollbar. This is very easy when dealing with a numeric axis, but for a categorical situation you will again have to script. In this case, you will have to create a sort of mapping between the numerical values on the slider and the categories on the axis. Moving the slider will filter the hierarchy on all three charts, which will effectively look like scrolling.


With all of that being said, you may want to consider a low-key "hack" and simply mask the two scrollbars with a white square overtop :)


Thanks a lot for all the information!

Probably the hack will be the best choice for the moment :)

The hack usually is the best - dirty but effective.

I think it will help as well, because the scrollbar sometimes takes up vertical space and you want all the chart areas to be the same height.