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.
Now let us convert the individual share to cumulative percentages.
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:
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% |
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% |
<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.
Shamasis Bhattacharya
August 25, 2009, 7:48 pmInteresting 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/