Skip to main content Skip to footer

Expand Your Data Visualization with Animation, Polar, Sunburst, and Treemap Charts in SpreadJS 12

Expand your data visualization toolset with these great new features from SpreadJS 12! Not only have we added animation to the most common chart types, but we've also added three new charts: radar, treemap, and sunburst.

Add loading and updating animation to JavaScript charts

With SpreadJS' new seamless loading and updating animation for column, bar, line, and pie chart, your dashboards will truly shine.

In this example, we have data for monthly rainfall for several geographical regions, and we need to compare which country witnessed the highest and the lowest rainfall in a particular month. When we plot the data in the spreadsheet and create the chart, the additional animation allows us to more easily visualize data in real-time and make informed decisions quickly and efficiently.

You can add an existing animation in a worksheet based on your requirements as shown here:

JavaScript chart animation

You can also update the animation in the worksheet by dynamically changing the data to identify trends in real-time:

JavaScript chart animation

Learn more about chart animation

New Charts: Radar, Sunburst, and Treemap Charts

These new charts (also available in Excel) have full Spread Web Designer support, and you'll be able to seamlessly import and export Excel files that include these charts.

Radar Charts

Radar charts displays multivariate observations with an arbitrary number of variables; it's often used to show personality traits or test scores. Radar charts are typically used to compare between two or more entities over a range of characteristics. In a radar chart, three or more quantitative variables are represented on axes with each category having its own value axis radaiating from the center point. Lines are used to connect the series values and the relative position or angle of the axes is usually unpredictable.

SpreadJS supports three types of radar charts:

1) Basic radar chart

2) Filled radar chart

3) Radar chart with markers

In this example, Bob and David's scores are depicted for different competencies. When we've plotted their scores on the radar chart, we can see how Bob's strengths (in blue) differ from David's strengths (in orange).

JavaScript basic radar chart

JavaScript filled radar chart

JavaScript radar chart with markers

In addition to these options, SpreadJS includes customization for legend, labels, title, axes, and color.

Try the Radar Chart Demo | Radar Chart Documentation

Sunburst Charts

A sunburst chart visualizes hierarchical data from a root node (center) outward to lower hierarchies. A segment of the inner circle is a parent to the segments of the outer circle which lie within the angular sweep of the parent. Sunburst charts are great for showing how one category or level (ring) is broken into its contributing pieces.

In the example below, the world population is expressed by continent; region; and country. The distribution of population becomes immediately clear when we see the prominence of some colors:

JavaScript sunburst chart

Try the Sunburst Demo | Read Sunburst Documentation

Treemap Chart

A treemap chart displays hierarchical information combined with relative quantity. They're especially useful if your app has space constraints and you need to plot thousands of datapoints with numerous entities defined in the tables in the worksheet.

Here's a look at the world population chart as expressed in a treemap:

JavaScript treemap chart

Try the Demo | Documentation

Jody Handley

comments powered by Disqus