Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

An error line chart is a conventional line chart with the ability to show error (or deviations) in data.

In this section you will be shown how you can:

Creating a Simple Error Line Chart

As an example, we will create an error line chart that compares the estimated procurement from two suppliers.

An error line chart thus created looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "xaxisname": "Category", "yaxisname": "Item (%)", "numberSuffix": "%", "caption": "Estimated Procurement from Top 2 Suppliers", "subcaption": "(Next Year)", "showvalues": "0", "halferrorbar": "0", "plottooltext": "$seriesname, $label: $value%" }, "categories": [ { "category": [ { "label": "Food & Beverage" }, { "label": "Apparel" }, { "label": "Electronics" }, { "label": "Baby Products" } ] } ], "dataset": [ { "seriesname": "MB Suppliers", "data": [ { "value": "28", "errorvalue": "2" }, { "value": "16", "errorvalue": "2" }, { "value": "24", "errorvalue": "3" }, { "value": "32", "errorvalue": "2" } ] }, { "seriesname": "VST Group Co Ltd ", "data": [ { "value": "12", "errorvalue": "2" }, { "value": "30", "errorvalue": "4" }, { "value": "35", "errorvalue": "5" }, { "value": "14", "errorvalue": "2" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "xaxisname": "Category",
        "yaxisname": "Item (%)",
        "numberSuffix": "%",
        "caption": "Estimated Procurement from Top 2 Suppliers",
        "subcaption": "(Next Year)",
        "showvalues": "0",
        "halferrorbar": "0",
        "plottooltext": "$seriesname, $label: $value%"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Food & Beverage"
                },
                {
                    "label": "Apparel"
                },
                {
                    "label": "Electronics"
                },
                {
                    "label": "Baby Products"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "MB Suppliers",
            "data": [
                {
                    "value": "28",
                    "errorvalue": "2"
                },
                {
                    "value": "16",
                    "errorvalue": "2"
                },
                {
                    "value": "24",
                    "errorvalue": "3"
                },
                {
                    "value": "32",
                    "errorvalue": "2"
                }
            ]
        },
        {
            "seriesname": "VST Group Co Ltd ",
            "data": [
                {
                    "value": "12",
                    "errorvalue": "2"
                },
                {
                    "value": "30",
                    "errorvalue": "4"
                },
                {
                    "value": "35",
                    "errorvalue": "5"
                },
                {
                    "value": "14",
                    "errorvalue": "2"
                }
            ]
        }
    ]
}
<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: 'errorline',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "xaxisname": "Category",
            "yaxisname": "Item (%)",
            "numberSuffix": "%",
            "caption": "Estimated Procurement from Top 2 Suppliers",
            "subcaption": "(Next Year)",
            "showvalues": "0",
            "halferrorbar": "0",
            "plottooltext": "$seriesname, $label: $value%"
        },
        "categories": [{
            "category": [{
                "label": "Food & Beverage"
            }, {
                "label": "Apparel"
            }, {
                "label": "Electronics"
            }, {
                "label": "Baby Products"
            }]
        }],
        "dataset": [{
            "seriesname": "MB Suppliers",
            "data": [{
                "value": "28",
                "errorvalue": "2"
            }, {
                "value": "16",
                "errorvalue": "2"
            }, {
                "value": "24",
                "errorvalue": "3"
            }, {
                "value": "32",
                "errorvalue": "2"
            }]
        }, {
            "seriesname": "VST Group Co Ltd ",
            "data": [{
                "value": "12",
                "errorvalue": "2"
            }, {
                "value": "30",
                "errorvalue": "4"
            }, {
                "value": "35",
                "errorvalue": "5"
            }, {
                "value": "14",
                "errorvalue": "2"
            }]
        }]
    }
}
);
    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 create an error line chart:

Attribute Description

label

It is used to specify the label for the data item. The label is rendered on the x-axis. This attribute belongs to the category object, which belongs to the categories object.

value

It is used to specify the numeric value for a data item. This value will be plotted on the chart. This attribute belongs to the data object, which belongs to the dataset object.

errorValue

It is used to specify the error value that will be plotted as the error bar on the chart. This attribute belongs to the data object, which belongs to the dataset object.

Configuring Error Bars

You can customize the cosmetic properties of error bars to change their appearance.

An error line chart, with the error bar customized, looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "xaxisname": "Category", "yaxisname": "Item (%)", "numberSuffix": "%", "caption": "Estimated Procurement from Top 2 Suppliers", "subcaption": "(Next Year)", "showvalues": "0", "plottooltext": "$seriesname, $label: $value%", "halferrorbar": "0", "errorBarColor": "#990000", "errorBarAlpha": "50", "errorBarThickness": "4", "errorBarWidth": "8" }, "categories": [ { "category": [ { "label": "Food & Beverage" }, { "label": "Apparel" }, { "label": "Electronics" }, { "label": "Baby Products" } ] } ], "dataset": [ { "seriesname": "MB Suppliers", "data": [ { "value": "28", "errorvalue": "2" }, { "value": "16", "errorvalue": "2" }, { "value": "24", "errorvalue": "3" }, { "value": "32", "errorvalue": "2" } ] }, { "seriesname": "VST Group Co Ltd ", "data": [ { "value": "12", "errorvalue": "2" }, { "value": "30", "errorvalue": "4" }, { "value": "35", "errorvalue": "5" }, { "value": "14", "errorvalue": "2" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "xaxisname": "Category",
        "yaxisname": "Item (%)",
        "numberSuffix": "%",
        "caption": "Estimated Procurement from Top 2 Suppliers",
        "subcaption": "(Next Year)",
        "showvalues": "0",
        "plottooltext": "$seriesname, $label: $value%",
        "halferrorbar": "0",
        "errorBarColor": "#990000",
        "errorBarAlpha": "50",
        "errorBarThickness": "4",
        "errorBarWidth": "8"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Food & Beverage"
                },
                {
                    "label": "Apparel"
                },
                {
                    "label": "Electronics"
                },
                {
                    "label": "Baby Products"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "MB Suppliers",
            "data": [
                {
                    "value": "28",
                    "errorvalue": "2"
                },
                {
                    "value": "16",
                    "errorvalue": "2"
                },
                {
                    "value": "24",
                    "errorvalue": "3"
                },
                {
                    "value": "32",
                    "errorvalue": "2"
                }
            ]
        },
        {
            "seriesname": "VST Group Co Ltd ",
            "data": [
                {
                    "value": "12",
                    "errorvalue": "2"
                },
                {
                    "value": "30",
                    "errorvalue": "4"
                },
                {
                    "value": "35",
                    "errorvalue": "5"
                },
                {
                    "value": "14",
                    "errorvalue": "2"
                }
            ]
        }
    ]
}
<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: 'errorline',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "xaxisname": "Category",
            "yaxisname": "Item (%)",
            "numberSuffix": "%",
            "caption": "Estimated Procurement from Top 2 Suppliers",
            "subcaption": "(Next Year)",
            "showvalues": "0",
            "plottooltext": "$seriesname, $label: $value%",
            //Error bar configuration
            "halferrorbar": "0",
            "errorBarColor": "#990000",
            "errorBarAlpha": "50",
            "errorBarThickness": "4",
            "errorBarWidth": "8"
        },
        "categories": [{
            "category": [{
                "label": "Food & Beverage"
            }, {
                "label": "Apparel"
            }, {
                "label": "Electronics"
            }, {
                "label": "Baby Products"
            }]
        }],
        "dataset": [{
            "seriesname": "MB Suppliers",
            "data": [{
                "value": "28",
                "errorvalue": "2"
            }, {
                "value": "16",
                "errorvalue": "2"
            }, {
                "value": "24",
                "errorvalue": "3"
            }, {
                "value": "32",
                "errorvalue": "2"
            }]
        }, {
            "seriesname": "VST Group Co Ltd ",
            "data": [{
                "value": "12",
                "errorvalue": "2"
            }, {
                "value": "30",
                "errorvalue": "4"
            }, {
                "value": "35",
                "errorvalue": "5"
            }, {
                "value": "14",
                "errorvalue": "2"
            }]
        }]
    }
}
);
    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 error bars:

Attribute Description

halfErrorBar

It is used to specify the type of error bars that will be rendered on the chart. Setting this attribute to 0 will show the high-low (full) error bars, setting it to 1 (default) will show the normal (half) error bars.

errorBarColor

It is used to specify the hex code of the color that will be used to render the error bars.

errorBarAlpha

It is used to specify the transparency of the error bars. This attribute takes values between 0 (transparent) and 100 (opaque).

errorBarThickness

It is used to specify the thickness of the error bars, in pixels.

errorBarWidth

It is used to specify the width of the error bars, in pixels.

Top