Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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:

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:

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: '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.

Top