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": {
"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 |
|---|---|
|
It is used to specify whether the percentage data values will be shown for the line chart. Setting this attribute to |
Customizing the Line Dataset
A pareto chart with the line segments customized looks like this:
{
"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 |
|---|---|
|
It is used to specify the hex code for the color that will be used to render the line. |
|
It is used to configure the thickness of the line, in pixels. |
|
It use to set the transparency for the line segments. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify whether the line segments will be rendered as dashed lines. Setting this attribute to |
|
It is used to specify the length of each dash, if the line segments are to be rendered as dashed lines. |
|
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": {
"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 |
|---|---|
|
It is used to specify whether the upper and lower limits for the secondary y-axis will be shown. Setting this attribute to |
|
It is used to specify whether the divisional line values for the secondary y-axis will be shown. Setting this attribute to |
Showing/Hiding the Line Chart
Given below is a brief description of the attribute used to show/hide the line chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the line chart will be rendered in the Pareto chart. Setting this attribute to |