Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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:

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:

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:

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.

Top