Stuck between Massive historical data and Daily Intricacies? Zoom Line Chart to the Rescue

So let’s say you have to analyze a company’s daily stock performance over the past 25 years. Quite a likely scenario when you are considering a serious investment or acquisition. But that’s 20,000 data points to analyze- fewer than the number of parts in most space stations!

The trouble is, often the only way to visualize both the overall trends and the underlying details is to juggle around with a dozen charts and scrolling back and forth to decipher any meaningful insight. But what if you could get an overview across all your data and zoom right in to the details when you see an interesting trend?

Introducing, the Zoom Line chart! In this post we will walk you through the zoom line chart, and show you how you can harness it to the best.

To quote Shneiderman’s mantra

Overview first, zoom and filter, then details-on-demand.

The zoom line chart is probably the best application of this mantra. First off, this chart can handle a larger amount of data points than any other chart. The example below has around 18 thousand data points of stock prices across 25 years.

Zoom Line chartThe entire data is compressed to fit the chart’s width, providing a quick overview . The zoom line chart also features information-packed tooltips. When you hover over a particular point on the overview, you can get the values and tips from all the data sets in that x-axis.

Informative tooltip in the Zoom Line chartTo zoom into the details, you just have to select the range in the chart.

Date range shown while selecting in the Zoom Line chartNotice that the date range shown in the tooltips below the scroll bar. This shows you the data range that is currently selected. By default, the selection snaps to the nearest vertical divisional line for easy interaction. Once you release the mouse button, the chart zooms to show the selected range in the available space.

Chart after zooming inTo see data beyond the currently selected range, you can simply scroll left or right using the scrollbar. The [cciel lang="javascript"]Zoom Out[/cciel] button would take you to the previous zoom level. If you want to jump back to the default chart view, click [cciel lang="javascript"]Reset Chart[/cciel].

That’s the beauty of the zoom line chart – you can zoom down all the way to view fluctuations by the day, or even minutes..

Zoom down to see the daily dataAnd snap right back to see the overall trends for a 25 year – instantly…

Zoom out to get the complete overview of your dataPretty nifty, wouldn’t you say?

But there’s more depth to the zoom line chart than just zooming. Lets say you want to compare the  daily trends during September 2009 with that during September 2010. Since they’re far apart, you would have to compare them with your naked eye.

The zoom line chart brings in an innovative feature called Pinning. Pinning literally enables you to pin one range of points over another, making trend-comparisons a lot more visual. To do Pin a range, click [cciel lang="javascript"]Switch to Pin Mode[/cciel]. You will now see that the mouse pointer has changed from a magnifying glass to a cross-hair.

Crosshair in Pin Mode of the Zoom Line chartNow you just need to select the target range- September 2009, in this case. The mouse pointer will turn to another icon upon releasing the mouse button. A ghost of the selected line segment gets imprinted on the canvas, thus letting you compare the pinned segment with the rest of the chart by just scrolling through.

Select data in Pin Mode of the Zoom Line chart

The pinned segment can be dragged to any part of the chart canvas.

Drag the pinned area to compare it with another data block

Once you’re done pinning the data points, you can switch back to the zoom mode from the [cciel lang="javascript"]Switch to Zoom Mode[/cciel] button.

As you can see, the Zoom Line chart proves very useful in making sense of large datasets, especially when you want to see the overall trends and the minute patterns simultaneously. While the Zoom Line chart will not be able to handle data in the realm of Big Data that is about a few gigabytes, it can handle about 20,000 data points quite easily.

Creating a zoom line chart is similar to creating other multi-series charts. Let us walk through the process of creating a zoom line chart which plots the daily stock prices of Adobe (ADBE), Apple Inc. (AAPL) and Microsoft (MSFT) for the last 25 years.

First you need to have the [cciel lang="xml"]<chart>[/cciel] element. [cceWl lang="xml"] <chart caption=”Stock Prices of last 25 Years” numberprefix=”$” dynamicAxis=”1″ bgcolor=”ffffff”>[/cceWl]

Then specify the [cciel lang="xml"]<categories>[/cciel] for the chart, which in this case are the dates.

[cceWl lang="xml"]

<categories>
<category label=”08/14/1986″/>
<category label=”08/15/1986″/>
<category label=”08/18/1986″/>


<category label=”08/22/2011″/>
<category label=”08/23/2011″/>
<category label=”08/24/2011″/>
</categories>
[/cceWl]

And then you specify each of the datasets. For this example, we have one dataset each for ADBE, AAPL and MSFT. Within each datasets you [cciel lang="xml"]<set>[/cciel] the value of the stock price for that date.
[cceWl lang="xml"]
<set value=”356.03″/>
<set value=”356.44″/>
<set value=”356.44″/>
<set value=”373.6″/>
[/cceWl]

With so many data labels on the X-axis, it gets difficult to see which data point lies on which date. To solve this problem, we’ve come up with Vertical divisional lines. These lines can be displayed on the chart canvas, above each data label. Enable them by declaring the [cciel lang="xml"]showVDivLines=”1″[/cciel] attribute of the [cciel lang="xml"]<chart>[/cciel]element.

This readies your XML data for the chart.

The zoom line chart also supports an alternative compact XML/JSON format, which simplifies the XMLization/JSONization of large quantities of data. In compact XML/JSON format categories and datasets are defined in the following manner:

[cceWl lang="xml"]<categories>Label  1|Label 2|Label 3|Label 4|Label 5| … </categories>
<dataset seriesName=’ABDE’>182|236|17|406|676|…  </dataset>
<dataset seriesName=’AAPL’>294|170|450|120|844|…  </dataset>
<dataset seriesName=’MSFT”>294|170|450|120|844|…  </dataset>[/cceWl]

If you use the compact XML/JSON format, then don’t forget to include the [cciel lang="xml"]compactDataMode=”1″[/cciel] and [cciel lang="xml"]dataSeparator=”|”[/cciel] attributes in the [cciel lang="xml"]<chart>[/cciel] element.

In your HTML file, copy the following to get the zoom line chart:
[cceWl lang="html"]
<html>
<head>
<title>Share Price of ADBE, AAPL and MSFT for last 25 years</title>
<script language=”JavaScript” src=”FusionCharts.js”></script>
</head>
<body bgcolor=”#ffffff”>
<!– Start Code for FusionCharts chart –>
<div id=”chartdiv” align=”center”>FusionCharts</div>
<script type=”text/javascript”>
var myChart = new FusionCharts(“ZoomLine.swf”, “chartID1″, “600″, “450″, “0″, “1″);
myChart.setDataURL(“data.xml”);
myChart.render(“chartdiv”);
</script>
<!– End Code for FusionCharts chart –>
</body>
</html>
[/cceWl]

Download the sample zoom line chart we’ve showcased in this post. Dive into the massive but simple XML document to see its structure.

The next time you encounter a situation where a large data set needs to be visualized, the zoom line chart would be a great fit. Your users will be delighted to interact with the data. And both of you could save time and effort of juggling between multiple charts.

See more samples of the zoom line chart and go through the documentation. If you have some thoughts about the zoom line chart, or have an interesting use case where you’ve already used it, please let us know in the comments below.

Leave a Comment