Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

  • Display values for the line series

  • Customize the line dataset

  • Hide secondary axis values

  • Show/hide the line chart

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

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.

The data structure needed to show percentage values for the line chart is given below:

{ "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"
        }
    ]
}

Customizing the Line Dataset

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

FusionCharts will load here..

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.

The data structure needed to customize the line segments is given below:

{ "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"
        }
    ]
}

Hiding Secondary Axis Values

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

FusionCharts will load here..

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.

The data structure needed to hide the secondary y-axis values is given below:

{ "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"
        }
    ]
}

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.

There! You have now seen how you can configure the Pareto chart.

Top