Configuring a Pareto Chart

The Pareto chart, named after Vilfredo Pareto, is a type of chart which contains both bars and a line. FusionCharts Suite XT allows you to configure several functional and cosmetic properties for the Pareto chart.

In this section you will be shown how you can:

Displaying Values for the Line Series

By default, the auto-generated percentage values for the line chart are not rendered.

A pareto chart configured to render the percentage values for the line chart looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "theme": "fint", "caption": "Employee late arrivals by reported cause", "subCaption": "Last month", "xAxisName": "Reported Cause", "pYAxisName": "No. of Occurrence", "sYAxisname": "Cumulative Percentage", "showValues": "0", "showXAxisLine": "1", "showLineValues": "1" }, "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": {
        "theme": "fint",
        "caption": "Employee late arrivals by reported cause",
        "subCaption": "Last month",
        "xAxisName": "Reported Cause",
        "pYAxisName": "No. of Occurrence",
        "sYAxisname": "Cumulative Percentage",
        "showValues": "0",
        "showXAxisLine": "1",
        "showLineValues": "1"
    },
    "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": {
            "theme": "fint",
            "caption": "Employee late arrivals by reported cause",
            "subCaption": "Last month",
            "xAxisName": "Reported Cause",
            "pYAxisName": "No. of Occurrence",
            "sYAxisname": "Cumulative Percentage",
            "showValues": "0",
            "showXAxisLine": "1",
            "showLineValues": "1"
        },
        "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>

Given below is a brief description of the attribute that is used to show data values for the line series:

Attribute Name	Description
`showLineValues`	It is used to specify whether the percentage data values will be shown for the line chart. Setting this attribute to `1` will show them, setting it to `0` (default) will hide them.

Customizing the Line Dataset

A pareto chart with the line segments customized looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "theme": "fint", "caption": "Employee late arrivals by reported cause", "subCaption": "Last month", "xAxisName": "Reported Cause", "pYAxisName": "No. of Occurrence", "sYAxisname": "Cumulative Percentage", "showValues": "0", "showXAxisLine": "1", "lineThickness": "2", "lineColor": "#8e0000", "lineAlpha": "80", "lineDashed": "1", "lineDashLen": "5", "lineDashGap": "3" }, "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": {
        "theme": "fint",
        "caption": "Employee late arrivals by reported cause",
        "subCaption": "Last month",
        "xAxisName": "Reported Cause",
        "pYAxisName": "No. of Occurrence",
        "sYAxisname": "Cumulative Percentage",
        "showValues": "0",
        "showXAxisLine": "1",
        "lineThickness": "2",
        "lineColor": "#8e0000",
        "lineAlpha": "80",
        "lineDashed": "1",
        "lineDashLen": "5",
        "lineDashGap": "3"
    },
    "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": {
            "theme": "fint",
            "caption": "Employee late arrivals by reported cause",
            "subCaption": "Last month",
            "xAxisName": "Reported Cause",
            "pYAxisName": "No. of Occurrence",
            "sYAxisname": "Cumulative Percentage",
            "showValues": "0",
            "showXAxisLine": "1",
            //Line dataset customizing attributes
            //Changing thickness
            "lineThickness": "2",
            //Changing color
            "lineColor": "#8e0000",
            //Changing alpha
            "lineAlpha": "80",
            //Setting line to a dashed line
            "lineDashed": "1",
            //Setting dash length
            "lineDashLen": "5",
            //Setting gap between two dash
            "lineDashGap": "3"
        },
        "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>

Given below is a brief description of the attributes used to customize the line segments:

Attribute Name	Description
`lineColor`	It is used to specify the hex code for the color that will be used to render the line.
`lineThickness`	It is used to configure the thickness of the line, in pixels.
`lineAlpha`	It use to set the transparency for the line segments. This attribute takes values between 0 (transparent) and 100 (opaque).
`lineDashed`	It is used to specify whether the line segments will be rendered as dashed lines. Setting this attribute to `1` will render them as dashed lines, setting it to `0` will render them as whole lines.
`lineDashLen`	It is used to specify the length of each dash, if the line segments are to be rendered as dashed lines.
`lineDashGap`	It is used to specify the gap between each dash, if the line segments are to be rendered as dashed lines.

Hiding Secondary Axis Values

A pareto chart with the secondary y-axis values hidden looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "theme": "fint", "caption": "Employee late arrivals by reported cause", "subCaption": "Last month", "xAxisName": "Reported Cause", "pYAxisName": "No. of Occurrence", "sYAxisname": "Cumulative Percentage", "showValues": "0", "showXAxisLine": "1", "showSecondaryLimits": "0", "showDivLineSecondaryValue": "0" }, "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": {
        "theme": "fint",
        "caption": "Employee late arrivals by reported cause",
        "subCaption": "Last month",
        "xAxisName": "Reported Cause",
        "pYAxisName": "No. of Occurrence",
        "sYAxisname": "Cumulative Percentage",
        "showValues": "0",
        "showXAxisLine": "1",
        "showSecondaryLimits": "0",
        "showDivLineSecondaryValue": "0"
    },
    "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": {
            "theme": "fint",
            "caption": "Employee late arrivals by reported cause",
            "subCaption": "Last month",
            "xAxisName": "Reported Cause",
            "pYAxisName": "No. of Occurrence",
            "sYAxisname": "Cumulative Percentage",
            "showValues": "0",
            "showXAxisLine": "1",
            //Hiding Secondary Axis Value
            "showSecondaryLimits": "0",
            "showDivLineSecondaryValue": "0"

        },
        "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>

Given below is a brief description of the attributes used to hide the secondary y-axis values:

Attribute Name	Description
`showSecondaryLimits`	It is used to specify whether the upper and lower limits for the secondary y-axis will be shown. Setting this attribute to `0` will hide the limits, setting it to `1` (default) will show them.
`showDivLineSecondaryValue`	It is used to specify whether the divisional line values for the secondary y-axis will be shown. Setting this attribute to `0` will hide the values, setting it to `1` (default) will show them.

Showing/Hiding the Line Chart

Given below is a brief description of the attribute used to show/hide the line chart:

Attribute Name	Description
`showCumulativeLine`	It is used to specify whether the line chart will be rendered in the Pareto chart. Setting this attribute to `0` will hide the line chart, setting it to `1` (default) will show it.