Categories: Tutorials

How to Create a Pareto Chart: Step-by-Step Guide

Differentiating the important from the not-so important is a very vital task for any management. In this post, we will see how a Pareto chart is a vital tool for the same, and how it can be easily created using the Dual-Y Combination chart in FusionCharts v3.

The Situation

You are James Gordon. A lot of public property has been damaged and destroyed by some miscreants in Gotham city. As the police commissioner, you are under a lot of pressure from the residents to catch hold of them.

So you decide to prepare a report on the same, and then decide whom to tackle first. You have been able to collect the following data:

Miscreant	Damage done (USD)
Batman	$400,000
Robin	$250,000
Joker	$150,000
Riddler	$100,000
Mad Hatter	$50,000
Stray Bats	$50,000

Bring in the savior

The Pareto chart plots the raw values in descending order using columns. As James Gordon, you already have the data arranged. We need to find out the cumulative percentages of the damage done, and then show that using a line chart on the secondary y-axis.

So we add one more column to the table showing the individual contributions to the damage done.

Miscreant	Damage done (USD)	Individual Share
Batman	$450,000	45%
Robin	$300,000	30%
Joker	$100,000	10%
Riddler	$80,000	8%
Mad Hatter	$50,000	5%
Stray Bats	$20,000	2%

Now let us convert the individual share to cumulative percentages.

Miscreant	Damage done (USD)	Cumulative Share
Batman	$450,000	45%
Robin	$300,000	75%
Joker	$100,000	85%
Riddler	$80,000	93%
Mad Hatter	$50,000	98%
Stray Bats	$20,000	100%

And now we are all ready to make our Pareto chart. As we said, the individual values will go on the column chart (primary Y-axis) and the cumulative percentage values on a line chart (secondary Y-axis).

Anyone who sees this Pareto chart will be easily able to see that Batman and Robin are causing almost 80% of the damage to the city, and should be the first ones to be taken care of.

The XML data used to generate this is easy to understand too:

<chart caption="”Damages" done="" by="" miscreants”="" numberprefix="”$”" showvalues="”0″" syaxismaxvalue="”100″" snumbersuffix="”%”" formatnumberscale="”0″">

<categories>

</categories>

<dataset>

</dataset>

<dataset parentyaxis="”S”">

</dataset>

</chart>

If you do not feel very comfortable with the XML data above, you can take a look at the XML data format for Dual Y-Axis Combination Chart here to feel more at ease.

Quite clearly, the damages in dollars and in percentages have been input using 2 different data sets. Since the percentages should be displayed on the secondary Y-axis, parentYAxis=”S” has been set for the second data set. We have also assigned a maximum value for the secondary Y-Axis and a suffix for all the numbers using the SYAxisMaxValue and SNumberSuffix attributes respectively.

Situation taken care of. Some more situations?

The example we just demonstrated is probably the most fictitious one ever taken up in FusionCharts history. There are a whole lot of real-life situations where the Pareto chart helps prioritize your workflow.

Quality control: In quality control, the Pareto chart is often used to identify the most common sources of defects, the highest occurring type of defect, or the most frequent reasons for customer complaints, etc.
The 80-20 rule: The 80-20 rule is a common rule of thumb in business. Statements like “80% of your sales comes from 20% of your clients” or “80% of your visitors check out only 20% of your website” can easily be demonstrated using the Pareto chart.

So we just saw how you can easily create the Pareto chart using FusionCharts and it helps you identify what to devote most time and resources to. Make the most out of it.

sanket

Next FusionCharts Free Goes Open Source for Developers »

Previous « FusionCharts Free Website Gets a Fresh New Look

View Comments

Shamasis Bhattacharya says:

August 25, 2009 at 7:48 pm

Interesting indeed! i guess, we can also use trendlines to mark that magical 80/20 region!
And ah! I also wrote a small piece of code to help users generate Pareto Chart XML from simple single-series CSV.
https://www.shamasis.net/2009/08/generating-pareto-chart-data-for-fusioncharts/