Creating a Pareto Chart

A Pareto chart, named after Vilfredo Pareto, is a type of chart that combines the column chart with the line chart.

In this section you will be introduced to the basics of the Pareto chart and 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:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Employee late arrivals by reported cause", "subCaption": "Last month", "xAxisName": "Reported Cause", "pYAxisName": "No. of Occurrence", "sYAxisname": "Cumulative Percentage", "showHoverEffect": "1", "theme": "fint" }, "data": [ { "label": "Traffic", "value": "5680" }, { "label": "Family Engagement", "value": "1036" }, { "label": "Public Transport", "value": "950" }, { "label": "Weather", "value": "500" }, { "label": "Emergency", "value": "140" }, { "label": "Others", "value": "68" } ] }

{
    "chart": {
        "caption": "Employee late arrivals by reported cause",
        "subCaption": "Last month",
        "xAxisName": "Reported Cause",
        "pYAxisName": "No. of Occurrence",
        "sYAxisname": "Cumulative Percentage",
        "showHoverEffect": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Traffic",
            "value": "5680"
        },
        {
            "label": "Family Engagement",
            "value": "1036"
        },
        {
            "label": "Public Transport",
            "value": "950"
        },
        {
            "label": "Weather",
            "value": "500"
        },
        {
            "label": "Emergency",
            "value": "140"
        },
        {
            "label": "Others",
            "value": "68"
        }
    ]
}

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'pareto2d',
    renderAt: 'chart-container',
    width: '600',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Employee late arrivals by reported cause",
            "subCaption": "Last month",
            "xAxisName": "Reported Cause",
            "pYAxisName": "No. of Occurrence",
            "sYAxisname": "Cumulative Percentage",
            "showHoverEffect": "1",
            "theme": "fint"

        },
        "data": [{
            "label": "Traffic",
            "value": "5680"
        }, {
            "label": "Family Engagement",
            "value": "1036"
        }, {
            "label": "Public Transport",
            "value": "950"
        }, {
            "label": "Weather",
            "value": "500"
        }, {
            "label": "Emergency",
            "value": "140"
        }, {
            "label": "Others",
            "value": "68"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Creating a Pareto 3D Chart

A simple Pareto 3D chart looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{
    "chart": {
        "caption": "Employee late arrivals by reported cause",
        "subCaption": "Last month",
        "xAxisName": "Reported Cause",
        "pYAxisName": "No. of Occurrence",
        "sYAxisname": "Cumulative Percentage",
        "showHoverEffect": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Traffic",
            "value": "5680"
        },
        {
            "label": "Family Engagement",
            "value": "1036"
        },
        {
            "label": "Public Transport",
            "value": "950"
        },
        {
            "label": "Weather",
            "value": "500"
        },
        {
            "label": "Emergency",
            "value": "140"
        },
        {
            "label": "Others",
            "value": "68"
        }
    ]
}

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'pareto3d',
    renderAt: 'chart-container',
    width: '600',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Employee late arrivals by reported cause",
            "subCaption": "Last month",
            "xAxisName": "Reported Cause",
            "pYAxisName": "No. of Occurrence",
            "sYAxisname": "Cumulative Percentage",
            "showHoverEffect": "1",
            "theme": "fint"

        },
        "data": [{
            "label": "Traffic",
            "value": "5680"
        }, {
            "label": "Family Engagement",
            "value": "1036"
        }, {
            "label": "Public Transport",
            "value": "950"
        }, {
            "label": "Weather",
            "value": "500"
        }, {
            "label": "Emergency",
            "value": "140"
        }, {
            "label": "Others",
            "value": "68"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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 Pareto 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.