Choose an item

Spline Charts

These chart types belong to PowerCharts XT.

Spline charts are a specialized form of line charts that display smooth curves through the different data points. It integrates all the characteristics of a conventional line chart except for the fact that unlike line charts, which connect data points with straight lines, spline charts draw a fitted curved line to join the data points.

Spline charts can be used for plotting data that requires the usage of curve-fitting e.g., an impulse-response chart, a product life cycle chart, etc. It is also significantly used in designing Pareto charts.

FusionCharts Suite XT includes four types of spline charts:

  • Single-series spline 2D chart

  • Multi-series spline 2D chart

  • Single-series spline area 2D chart

  • Multi-series spline area 2D chart

Single-Series Spline 2D Chart

A single-series spline 2D chart draws a single fitted curve through the data points.

To create a single-series spline 2D chart follow the steps given below:

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the chart type using the type attribute. To render a spline chart, set spline.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the chart attributes page of single-series spline 2D chart.

A simple single-series spline 2D chart looks like this:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Total footfall in Bakersfield Central",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "No. of Footfalls",
        "lineThickness": "2",
        "divlineAlpha": "100",
        "divlineColor": "#999999",
        "divlineThickness": "1",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1",
        "showXAxisLine": "1",
        "xAxisLineThickness": "1"
    },
    "data": [
        {
            "label": "Mon",
            "value": "15123"
        },
        {
            "label": "Tue",
            "value": "14233"
        },
        {
            "label": "Wed",
            "value": "25507"
        },
        {
            "vline": "true",
            "lineposition": "0",
            "color": "#29C3BE",
            "labelHAlign": "left",
            "label": "National holiday"
        },
        {
            "label": "Thu",
            "value": "9110"
        },
        {
            "label": "Fri",
            "value": "15529"
        },
        {
            "label": "Sat",
            "value": "20803"
        },
        {
            "label": "Sun",
            "value": "19202"
        }
    ]
}
<chart theme="fusion" caption="Total footfall in Bakersfield Central" subcaption="Last week" xaxisname="Day" yaxisname="No. of Footfalls" linethickness="2" divlinealpha="100" divlinecolor="#999999" divlinethickness="1" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1" showxaxisline="1" xaxislinethickness="1">
    <set label="Mon" value="15123" />
    <set label="Tue" value="14233" />
    <set label="Wed" value="25507" />
    <vline lineposition="0" color="#29C3BE" labelhalign="left" label="National holiday" />
    <set label="Thu" value="9110" />
    <set label="Fri" value="15529" />
    <set label="Sat" value="20803" />
    <set label="Sun" value="19202" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    "type": "spline",
    "dataFormat": "json",
    "renderAt": "chart-container",
    "width": "700",
    "height": "400",
    "dataSource": {
        "chart": {
            "theme": "fusion",
            "caption": "Total footfall in Bakersfield Central",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "No. of Footfalls",

            //Cosmetics
            "lineThickness": "2",
            "divlineAlpha": "100",
            "divlineColor": "#999999",
            "divlineThickness": "1",
            "divLineIsDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1",
            "showXAxisLine": "1",
            "xAxisLineThickness": "1",
        },
        "data": [{
            "label": "Mon",
            "value": "15123"
        }, {
            "label": "Tue",
            "value": "14233"
        }, {
            "label": "Wed",
            "value": "25507"
        }, {
            "vline": "true",
            "lineposition": "0",
            "color": "#29C3BE",
            "labelHAlign": "left",
            "label": "National holiday"
        }, {
            "label": "Thu",
            "value": "9110"
        }, {
            "label": "Fri",
            "value": "15529"
        }, {
            "label": "Sat",
            "value": "20803"
        }, {
            "label": "Sun",
            "value": "19202"
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the single-series spline 2D chart.

Multi-Series Spline Chart

To render a multi-series spline chart:

  • Set the type attribute to msspline.

  • Use the seriesname attribute and the data object, which belong to the dataset object, to specify multiple datasets.

For a detailed list of attributes, refer to the chart attributes page of multi-series spline 2D chart.

A multi-series spline chart looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Number of visitors last week",
        "subCaption": "Bakersfield Central vs Los Angeles Topanga",
        "xAxisName": "Day",
        "yAxisName": "No. of Visitor",
        "showXAxisLine": "1",
        "xAxisLineColor": "#999999"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Mon"
                },
                {
                    "label": "Tue"
                },
                {
                    "label": "Wed"
                },
                {
                    "vline": "true",
                    "lineposition": "0",
                    "color": "#F2726F",
                    "labelHAlign": "right",
                    "labelPosition": "0",
                    "label": "National holiday"
                },
                {
                    "label": "Thu"
                },
                {
                    "label": "Fri"
                },
                {
                    "label": "Sat"
                },
                {
                    "label": "Sun"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Bakersfield Central",
            "data": [
                {
                    "value": "15123"
                },
                {
                    "value": "14233"
                },
                {
                    "value": "25507"
                },
                {
                    "value": "9110"
                },
                {
                    "value": "15529"
                },
                {
                    "value": "20803"
                },
                {
                    "value": "19202"
                }
            ]
        },
        {
            "seriesname": "Los Angeles Topanga",
            "data": [
                {
                    "value": "13400"
                },
                {
                    "value": "12800"
                },
                {
                    "value": "22800"
                },
                {
                    "value": "12400"
                },
                {
                    "value": "15800"
                },
                {
                    "value": "19800"
                },
                {
                    "value": "21800"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Number of visitors last week" subcaption="Bakersfield Central vs Los Angeles Topanga" xaxisname="Day" yaxisname="No. of Visitor" showxaxisline="1" xaxislinecolor="#999999">
    <categories>
        <category label="Mon" />
        <category label="Tue" />
        <category label="Wed" />
        <vline lineposition="0" color="#F2726F" labelhalign="right" labelposition="0" label="National holiday" />
        <category label="Thu" />
        <category label="Fri" />
        <category label="Sat" />
        <category label="Sun" />
    </categories>
    <dataset seriesname="Bakersfield Central">
        <set value="15123" />
        <set value="14233" />
        <set value="25507" />
        <set value="9110" />
        <set value="15529" />
        <set value="20803" />
        <set value="19202" />
    </dataset>
    <dataset seriesname="Los Angeles Topanga">
        <set value="13400" />
        <set value="12800" />
        <set value="22800" />
        <set value="12400" />
        <set value="15800" />
        <set value="19800" />
        <set value="21800" />
    </dataset>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'msspline',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Number of visitors last week",
            "subCaption": "Bakersfield Central vs Los Angeles Topanga",
            "xAxisName": "Day",
            "yAxisName": "No. of Visitor",
            "showXAxisLine": "1",
            "xAxisLineColor": "#999999"
        },
        "categories": [{
            "category": [{
                "label": "Mon"
            }, {
                "label": "Tue"
            }, {
                "label": "Wed"
            }, {
                "vline": "true",
                "lineposition": "0",
                "color": "#F2726F",
                "labelHAlign": "right",
                "labelPosition": "0",
                "label": "National holiday"
            }, {
                "label": "Thu"
            }, {
                "label": "Fri"
            }, {
                "label": "Sat"
            }, {
                "label": "Sun"
            }]
        }],

        "dataset": [{
            "seriesname": "Bakersfield Central",
            "data": [{
                "value": "15123"
            }, {
                "value": "14233"
            }, {
                "value": "25507"
            }, {
                "value": "9110"
            }, {
                "value": "15529"
            }, {
                "value": "20803"
            }, {
                "value": "19202"
            }]
        }, {
            "seriesname": "Los Angeles Topanga",
            "data": [{
                "value": "13400"
            }, {
                "value": "12800"
            }, {
                "value": "22800"
            }, {
                "value": "12400"
            }, {
                "value": "15800"
            }, {
                "value": "19800"
            }, {
                "value": "21800"
            }]
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the multi-series spline chart.

Multi-Series Spline Area 2D

A multi-series spline area 2D chart is nothing but a conventional area with a smoothed curve drawn through the data points in the series. It allows you to plot data for multiple data sets.

To render a multi-series spline area 2D chart:

  • Set the type attribute to mssplinearea.

  • Use the seriesname attribute and the data object, which belong to the dataset object, to specify multiple datasets.

For a detailed list of attributes, refer to the chart attributes page of multi-series spline area 2D chart.

A simple multi-series spline area 2D chart looks like this:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Number of Footfalls Last Week",
        "subCaption": "Garden Groove harbour vs Crompton-Rancho Dom",
        "xAxisName": "Day",
        "yAxisName": "No. of Footfalls",
        "showXAxisLine": "1",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Mon"
                },
                {
                    "label": "Tue"
                },
                {
                    "label": "Wed"
                },
                {
                    "vline": "true",
                    "lineposition": "0",
                    "color": "#F2726F",
                    "labelHAlign": "right",
                    "labelPosition": "0",
                    "label": "National holiday"
                },
                {
                    "label": "Thu"
                },
                {
                    "label": "Fri"
                },
                {
                    "label": "Sat"
                },
                {
                    "label": "Sun"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Garden Groove harbour",
            "data": [
                {
                    "value": "15123"
                },
                {
                    "value": "14233"
                },
                {
                    "value": "21507"
                },
                {
                    "value": "9110"
                },
                {
                    "value": "14829"
                },
                {
                    "value": "17503"
                },
                {
                    "value": "20202"
                }
            ]
        },
        {
            "seriesname": "Crompton-Rancho Dom",
            "data": [
                {
                    "value": "11400"
                },
                {
                    "value": "12800"
                },
                {
                    "value": "17800"
                },
                {
                    "value": "10400"
                },
                {
                    "value": "11800"
                },
                {
                    "value": "13100"
                },
                {
                    "value": "20800"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Number of Footfalls Last Week" subcaption="Garden Groove harbour vs Crompton-Rancho Dom" xaxisname="Day" yaxisname="No. of Footfalls" showxaxisline="1" tooltipcolor="#ffffff" tooltipborderthickness="0" tooltipbgcolor="#000000" tooltipbgalpha="80" tooltipborderradius="2" tooltippadding="5">
    <categories>
        <category label="Mon" />
        <category label="Tue" />
        <category label="Wed" />
        <vline lineposition="0" color="#F2726F" labelhalign="right" labelposition="0" label="National holiday" />
        <category label="Thu" />
        <category label="Fri" />
        <category label="Sat" />
        <category label="Sun" />
    </categories>
    <dataset seriesname="Garden Groove harbour">
        <set value="15123" />
        <set value="14233" />
        <set value="21507" />
        <set value="9110" />
        <set value="14829" />
        <set value="17503" />
        <set value="20202" />
    </dataset>
    <dataset seriesname="Crompton-Rancho Dom">
        <set value="11400" />
        <set value="12800" />
        <set value="17800" />
        <set value="10400" />
        <set value="11800" />
        <set value="13100" />
        <set value="20800" />
    </dataset>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'mssplinearea',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Number of Footfalls Last Week",
            "subCaption": "Garden Groove harbour vs Crompton-Rancho Dom",
            "xAxisName": "Day",
            "yAxisName": "No. of Footfalls",
            "showXAxisLine": "1",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5"
        },

        "categories": [{
            "category": [{
                "label": "Mon"
            }, {
                "label": "Tue"
            }, {
                "label": "Wed"
            }, {
                "vline": "true",
                "lineposition": "0",
                "color": "#F2726F",
                "labelHAlign": "right",
                "labelPosition": "0",
                "label": "National holiday"
            }, {
                "label": "Thu"
            }, {
                "label": "Fri"
            }, {
                "label": "Sat"
            }, {
                "label": "Sun"
            }]
        }],
        "dataset": [{
            "seriesname": "Garden Groove harbour",
            "data": [{
                "value": "15123"
            }, {
                "value": "14233"
            }, {
                "value": "21507"
            }, {
                "value": "9110"
            }, {
                "value": "14829"
            }, {
                "value": "17503"
            }, {
                "value": "20202"
            }]
        }, {
            "seriesname": "Crompton-Rancho Dom",
            "data": [{
                "value": "11400"
            }, {
                "value": "12800"
            }, {
                "value": "17800"
            }, {
                "value": "10400"
            }, {
                "value": "11800"
            }, {
                "value": "13100"
            }, {
                "value": "20800"
            }]
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the multi-series spline area 2D chart.

Single-Series Spline Area 2D Chart

To render a single-series spline area chart, set the type attribute to splinearea.

For a detailed list of attributes, refer to the chart attributes page of single-series spline area 2D chart.

A simple single-series spline area 2D chart looks like this:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Total sales of iPhone",
        "subCaption": "Last month",
        "xAxisName": "Week",
        "yAxisName": "Units sold",
        "showXAxisLine": "1"
    },
    "data": [
        {
            "label": "Week 1",
            "value": "530"
        },
        {
            "label": "Week 2",
            "value": "660"
        },
        {
            "label": "Week 3",
            "value": "420"
        },
        {
            "label": "Week 4",
            "value": "580"
        },
        {
            "label": "Week 5",
            "value": "560"
        }
    ]
}
<chart theme="fusion" caption="Total sales of iPhone" subcaption="Last month" xaxisname="Week" yaxisname="Units sold" showxaxisline="1">
    <set label="Week 1" value="530" />
    <set label="Week 2" value="660" />
    <set label="Week 3" value="420" />
    <set label="Week 4" value="580" />
    <set label="Week 5" value="560" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'splinearea',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Total sales of iPhone",
            "subCaption": "Last month",
            "xAxisName": "Week",
            "yAxisName": "Units sold",
            "showXAxisLine": "1"
        },
        "data": [{
            "label": "Week 1",
            "value": "530"
        }, {
            "label": "Week 2",
            "value": "660"
        }, {
            "label": "Week 3",
            "value": "420"
        }, {
            "label": "Week 4",
            "value": "580"
        }, {
            "label": "Week 5",
            "value": "560"
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the single-series spline area 2D chart.

Spline and spline area charts do not support joining of empty data points in the chart. That means, if your chart does not contain data at a particular point, the data points cannot be connected to each other and will appear as a broken dataset.