ZingChart’s latest build was released on April 1, 2015 and contains several improvements. In addition to some behind-the-scenes enhancements to our JavaScript charts, there are some big additions to the library. One of the most noticeable is the addition of three new chart types.

New Types of JavaScript Charts

Waterfall Chart

Waterfall charts were designed to help people understand the overall effect positive or negative values as they are introduced to a data set. One common application for a waterfall chart is to visualize profits: bars for revenue and costs will chart the breakdown.

Waterfall charts are also known as:

  • Flying bricks chart
  • Mario chart
  • Bridge chart

How to use it in ZingChart

ZingChart waterfall charts are available in horizontal/vertical and (unlike other libraries) 2D/3D. They are very similar to bar charts, but your values array looks a bit different. The new string value “SUM” displays a bar with a cumulative total of the preceding values.

"series":[  
    {  
        "values":[120,569,231,"SUM",-342,-233,"SUM"]  
    }  
]
“SUM” can be used multiple times in your values array, but there are unique styling attributes for intermediate and final bars. Check out the [waterfall documentation](https://www.zingchart.com/docs/chart-types/waterfall) for more detailed information on using “SUM” and the waterfall chart’s new style attributes. ## **Box Plot** Box plots are commonly used in in descriptive statistics to show distributions. They are used to visualize groups of data through designated percentiles, known as quartiles. Some box plots also have lines that extend vertically to show the upper and lower quartile data. These lines are called whiskers. As a result, a box plot may also be known as: * Box-and-whisker plot * Box-and-whisker diagram These charts offer a compact way to visualize data that may otherwise be hard to represent in a smaller space. However, they are often misread by users unfamiliar with the chart type. For this reason, they may be more effective if the audience is familiar with them. ### **How to use it in ZingChart** There are two boxplot chart types: hboxplot for horizontal, and boxplot for vertical. Boxplot also introduces a new series object that consists of a “data-box” array and a “data-outlier” array, as seen in the single plot code below.
"series":[  
   {  
       "data-box" : [ [ 30, 45, 50, 57, 70 ] ],  
       "data-outlier" : [ [ 0, 24 ] ]  
   }  
]  

To learn about calculating boxplot values such as Interquartile Range (IQR) and the upper and lower fences, or to read about the styling attributes for this chart type, head on over to the boxplot documentation.

Population Pyramid

Population pyramids offer a way to visualize distribution of attributes among subsets of a data set. The data does not necessarily need to be population data, but it is commonly used for this type of dataviz. For example, in a given population, what is the distribution of men and women in certain age groups? A population pyramid can quickly answer such a question, with back to back bar graphs to compare the two subsets.

A population pyramid may also be called:

  • Age pyramid
  • Age picture diagram

How to use it in ZingChart

ZingChart population pyramids are available in quite a few forms: horizontal or vertical, and as a line, area, or bar. The chart type will always be pop-pyramid, but you can change the form by using the appropriate aspect value - hbar, vline, etc. - in the “options” object.

"type":"pop-pyramid",  
    "options":{  
        "label-placement":"middle"  
    },
Values arrays are defined as normal, but series objects in population pyramids must include the new “data-side” attribute, which can be set to 1 or 2.
"series":[  
    {  
        "data-side":1,  
        "background-color":"#007DF0 #0055A4",  
        "values":[7.8,7.1,6.2,5.3,4.4,3.6,3.2,2.8,2.4,2.0,1.6,1.2,0.9,0.7,0.4,0.3,0.1,0.1,0,0,0]  
    },  
    {  
        "data-side":2,  
        "background-color":"#94090D #D40D12",  
        "values":[7.8,7.1,6.2,5.3,4.4,3.6,3.2,2.8,2.4,2.0,1.6,1.2,0.9,0.7,0.4,0.3,0.1,0.1,0,0,0]  
    }  
]  

Read about other options for this new chart type, such as label-placement, in the population pyramid documentation.

Release Notes Have More Details

Looking for more information one what's new in ZingChart 2.1.0? Check out our changelog for all the nitty gritty details.

More JavaScript Charts and Features to Come

The ZingChart team is always adding new chart types and features to the library. Is there a certain chart or interaction you need for your dataviz project? Share it with us in the comments below and it just may become part of our next sprint.