A Pareto chart, named after Vilfredo Pareto, is a type of chart which contains both bars and a line.
In this section you will be introduced to the basics of the Pareto chart and shown how you can create a simple one.:
Basics
The data values in a Pareto chart are represented by columns, which are arranged in descending order of magnitude. The cumulative total of these values is shown by an upward curving line. Pareto charts are used for isolating the key causes of a problem. They can also be used for determining the key factors of success.
The left vertical axis or the primary axis shows the frequency of occurrence, the cost, or other important units of measurement. The right vertical axis or the secondary axis shows the cumulative percentage of the total number of occurrences, the total cost, or the total of a specific unit of measurement.
The two types of Pareto charts available in the FusionCharts Suite XT are:
Pareto 2D
Pareto 3D
Creating a Pareto 2D Chart
A simple Pareto 2D chart looks like this:
The data structure needed to create a simple pareto 2D chart is given below:
Creating a Pareto 3D Chart
A simple Pareto 3D chart looks like this:
To change the chart type from Pareto 2D to Pareto 3D, you only have to change the value of the type attribute from pareto2d to pareto3d.
The data for this chart is single series. Values have to be provided only for the column. The percentage values for the line are automatically calculated and added to the chart.
Brief Explanation of the Data Structure
In the JSON data, the attributes and their corresponding values are written in the following key-value pair format:
"<attributeName>": "<value>"
Given below is a brief description of the data structure used to create the above stacked column 2D chart:
| Attribute Name | Description |
|---|---|
type |
It is used to specify the type of chart you want to render. For example, to render a Pareto 2D chart, the value for this attribute will be pareto2d. |
renderAt |
It is used to specify the container object where the chart will be rendered. |
width |
It is used to specify the width of the chart. |
height |
It is used to specify the height of the chart. |
dataFormat |
It is used to specify the type of data that will passed to the chart object. This attribute takes two values: json, where the JSON data to render the chart is passed to the dataSource attribute, and jsonurl, where the relative path to a .json file is passed to the dataSource attribute. |
dataSource |
It specifies the source from where the data will be fetched, depending on the value passed to the dataFormat attribute. |
caption |
It is used to specify the chart caption. This attribute belongs to the chart object. |
subCaption |
It is used to specify the chart sub-caption. This attribute belongs to the chart object. |
xAxisName |
It is used to specify the name for the x-axis. |
pYAxisName |
It is used to specify the name for the primary y-axis. |
sYAxisName |
It is used to specify the name for the secondary y-axis. |
showValues |
It is used to specify whether data values will be rendered with their corresponding data plots on the Pareto chart. Setting this attribute to 1 will show the values, setting it to 0 (default) will hide them. |
showXAxisLine |
It is used to specify whether the line representing the x-axis will be rendered on the Pareto chart. Setting this attribute to 0 will hide this line, setting it to 1 (default) will show it. |
theme |
It is used to specify the theme for the chart. |
label |
It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the category object array, which in turn belongs to the categories object array. |
value |
It is used to specify the value for a data item. This attribute belongs to the data object array, which in turn belongs to the dataset object array. |
There! you have now understood the basics of a Pareto chart and seen how you can create a simple one.