chart printed on paper

Web charts offer a distinct advantage over their printed-on-paper counterparts: interactivity. When you’re plotting large quantities of data, an interactive zooming chart feature, as well as a preview feature, will help make your charts more relevant for your users. There are a variety of ways zooming can be implemented in ZingChart. Choosing your zooming and preview options will depend, in part, on how much data you have and where it is stored.

Which Approach to Zooming is Best?

You’re rendering client-side, web-based charts. In these cases, the data for the chart will generally be stored in the browser memory when the page or chart is rendered or stored on the server and delivered to the browser upon request.

ZingChart’s zooming features allow developers to leverage different zooming options depending on their needs. If you have a smaller set of data stored in the browser memory, there are simple attributes that can be used in ZingChart to provide end users with the ability to zoom in and out of the available data and investigate it at different levels of detail.

However, if you have a larger dataset stored on the server, the ZingChart API provides a variety of methods and events to give users the ability to select the region of the chart on which they would like to zoom in. This triggers a function to go fetch the necessary data. Bottom line: ZingChart gives you the tools to create the best zooming interactions for your users.

Once you have determined the best approach to zooming, the most important factor to consider is which zooming features your users need in order to best understand the data. ZingChart provides different customizations to zooming, ensuring your users have a positive chart experience.

Zoom X

Start with a large overview of, say, time series data. Adding Zoom X will allow your users to zoom in on data down to the microsecond level… if your data allows.  When limiting zooming to the x-axis, users can get a closer view of a specific time series or region of data along the x-axis while ensuring they won’t cut off data points at the top or bottom of the chart.

Here is a simple example with a small dataset.

Now here is an example with a much larger dataset. In this case, the data is recalculated on zoom. This is a great example of how the ZingChart API can be used to satisfy almost a specific zooming need.

Zoom Y

Zooming specifically along the y axis works for:

  • Data sets with a wide variance among values
  • Users who need to closely inspect a small range of data along the y-axis

Zoom XY

When users need the ability to select and zoom into different regions of a chart, you can allow zooming on both axes. In the demo below, users can click and drag to highlight a region of the chart. The chart will zoom and adjust the scales for the x-axis and the multiple y-axes.

Getting Precise with Zooming

ZingChart offers several ways to give your users precision with their zooming interactions. Check out a whopping good demo with all these features below.

Preview

One way to give your users more control over what they zoom in on is to include the preview object in your chart JSON. This is the feature that puts a small version of the chart below the primary one, with controls to set up a zoom. Additionally, you can set this object to reflect the zooming that a user has done by clicking and dragging within the primary chart.

Snap to Node

_“Get me to the data, and make it snappy!” _ZingChart offers a Zoom Snap attribute. This makes a zoom action snap to the nearest node when a user clicks and drags a region, even if they did not click precisely on a node.

Zoom to Date/Date Picker

The ability to zoom to a specific date will be especially useful for users viewing time series data. This was added using the API.

Interactive Zoom Chart Feature- Summary

Zooming is a great way to enhance the usability of your charts. However, choosing a zooming method is a decision that likely depends on the size of your data set. Whether it is on the server or the client side, ZingChart offers a variety of efficient and useful ways to zoom in on charts.