Site icon FusionBrew – The FusionCharts Blog

How to create a Pareto chart?

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. 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.
Exit mobile version