Zoom/Scroll/Pan

FusionCharts allows you to plot a huge set of data along with the interactive zooming, panning and scrolling features. With FusionCharts you can easily zoom into any subset of data, pin a certain data point and pan to compare with the rest of the data.

For quick reference, you can perform following actions:

• Zooming
• Zoom Scatter
• Panning
• Scrolling

Zooming

Let’s take an example where you are displaying the number of unique web visitors in a year for two different websites. If you try to adjust this data in one view it will look clumsy. This is where the zoom feature plays a part. FusionCharts will display the data in a neatly-compressed macroscopic view and then you can zoom into the data for more details. FusionCharts also makes sure that the chart is optimized and boosted with high performance. Zooming is supported in Line and Scatter data plots.

Now, you might feel that it is kind of difficult to precisely zoom into a specific month by dragging the mouse cursor on the data plots. FusionCharts allows you to zoom into the specific data set using a drop-down list.

Zoom Scatter

In FusionCharts, you can build the Zoom Scatter chart, a special type of chart that helps viewers discover correlations between millions of data plots. The chart comes equipped with a toolbar that lets viewers focus on specific data plots, or specific regions within the data. You can Zoom-in to focus on a section of the chart, and Zoom-out to get back to the previous view.

You can also Zoom/Pan to switch between Zoom and Pan modes. In Zoom mode, you can select a section within the data and zoom in on that specific section. You can also use the pan mode, in which you can pan through the data in the current, zoomed in view.

For instance, in the given example, you can see the performances of two servers (Server 1 and Server 2) of a company plotted in a Zoom Scatter chart. Zoom and pan through any section of the data by using the relevant buttons in the toolbar at the top of the chart. They can also compare the performances of the two servers by going into Zoom/Pan mode and selecting a section of the two data series together.

Panning

Pinning helps to pin a segment of data and compare it with the rest of the chart data simply by scrolling through. For example - You might want to compare the data from 1st of Jan - 10th Jan with the whole data set. Switch to the pin mode and select the data to pin, then drag and compare the segment which you have pinned to any part of the canvas.

To know more about this feature, click here.

Scrolling

In dashboards and monitors, often there is a lot of data to be shown on a chart in a compact space. Scroll charts help you to accommodate huge sets of data. You can scroll across the chart to view the part of the data you wish to.

FusionCharts allows you to update the scrollbar position based on custom inputs. For example, you want to scroll to a particular set of data which is of interest to you. Provide a range (0-1) in a text box and the scroll bar will move accordingly to that provided position. To know about scrollTo API method click here.

You might want the chart’s first view to appear at the end of the data set. Use the “scrollToEnd” API, to render the chart with the scroll bar towards the right end of the canvas.

Customize the look and feel of the scrollbar using a list of predefined attribute support. To know more about the attributes click here.

There is also an option of decoupling the scroll bar with the X-axis. You can change the scroll position as shown in the multi-series scroll column chart.

In the case of the bar chart where the scroll bar takes a vertical position, you can configure the placement as shown below

To know more about this feature, click here.