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
typeattribute. To render a spline chart, setspline.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
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": {
"caption": "Total footfall in Bakersfield Central",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Footfalls",
"lineThickness": "2",
"paletteColors": "#008ee4,#6baa01",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"showValues": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"showAlternateHGridColor": "0"
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"labelHAlign": "left",
"label": "National holiday"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}<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 fusioncharts = new FusionCharts({
"type": "spline",
"dataFormat": "json",
"renderAt": "chart-container",
"width": "550",
"height": "350",
"dataSource": {
"chart": {
"caption": "Total footfall in Bakersfield Central",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Footfalls",
//Cosmetics
"lineThickness": "2",
"paletteColors": "#008ee4,#6baa01",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"showValues": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"showAlternateHGridColor": "0"
},
"data": [{
"label": "Mon",
"value": "15123"
}, {
"label": "Tue",
"value": "14233"
}, {
"label": "Wed",
"value": "25507"
}, {
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"labelHAlign": "left",
"label": "National holiday"
}, {
"label": "Thu",
"value": "9110"
}, {
"label": "Fri",
"value": "15529"
}, {
"label": "Sat",
"value": "20803"
}, {
"label": "Sun",
"value": "19202"
}]
}
}
);
fusioncharts.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
typeattribute tomsspline.Use the
seriesnameattribute and thedataobject, which belong to thedatasetobject, 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": {
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"subcaptionFontBold": "0",
"xAxisName": "Day",
"yAxisName": "No. of Visitor",
"showValues": "0",
"paletteColors": "#0075c2,#1aaf5d",
"bgColor": "#ffffff",
"showBorder": "0",
"showShadow": "0",
"showAlternateHGridColor": "0",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"canvasBgColor": "#ffffff",
"legendBorderAlpha": "0",
"legendShadow": "0",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"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"
}
]
}
]
}<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 fusioncharts = new FusionCharts({
type: 'msspline',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"subcaptionFontBold": "0",
"xAxisName": "Day",
"yAxisName": "No. of Visitor",
"showValues": "0",
"paletteColors": "#0075c2,#1aaf5d",
"bgColor": "#ffffff",
"showBorder": "0",
"showShadow": "0",
"showAlternateHGridColor": "0",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"canvasBgColor": "#ffffff",
"legendBorderAlpha": "0",
"legendShadow": "0",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"categories": [{
"category": [{
"label": "Mon"
}, {
"label": "Tue"
}, {
"label": "Wed"
}, {
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"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"
}]
}]
}
}
);
fusioncharts.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
typeattribute tomssplinearea.Use the
seriesnameattribute and thedataobject, which belong to thedatasetobject, 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": {
"caption": "Number of Footfalls Last Week",
"subCaption": "Garden Groove harbour vs Crompton-Rancho Dom",
"xAxisName": "Day",
"yAxisName": "No. of Footfalls",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"subcaptionFontBold": "0",
"paletteColors": "#6baa01,#008ee4",
"usePlotGradientColor": "0",
"bgColor": "#ffffff",
"showBorder": "0",
"showPlotBorder": "0",
"showValues": "0",
"showShadow": "0",
"showAlternateHGridColor": "0",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"canvasBgColor": "#ffffff",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"legendBorderAlpha": "0",
"legendShadow": "0",
"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": "#6baa01",
"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"
}
]
}
]
}<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 fusioncharts = new FusionCharts({
type: 'mssplinearea',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Number of Footfalls Last Week",
"subCaption": "Garden Groove harbour vs Crompton-Rancho Dom",
"xAxisName": "Day",
"yAxisName": "No. of Footfalls",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"subcaptionFontBold": "0",
"paletteColors": "#6baa01,#008ee4",
"usePlotGradientColor": "0",
"bgColor": "#ffffff",
"showBorder": "0",
"showPlotBorder": "0",
"showValues": "0",
"showShadow": "0",
"showAlternateHGridColor": "0",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"canvasBgColor": "#ffffff",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"legendBorderAlpha": "0",
"legendShadow": "0",
"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": "#6baa01",
"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"
}]
}]
}
}
);
fusioncharts.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": {
"caption": "Total sales of iPhone",
"subCaption": "Last month",
"xAxisName": "Week",
"yAxisName": "Units sold",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"subcaptionFontBold": "0",
"paletteColors": "#0075c2",
"usePlotGradientColor": "0",
"bgColor": "#ffffff",
"showBorder": "0",
"showValues": "0",
"showShadow": "0",
"showAlternateHGridColor": "0",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"canvasBgColor": "#ffffff",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "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"
}
]
}<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 fusioncharts = new FusionCharts({
type: 'splinearea',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Total sales of iPhone",
"subCaption": "Last month",
"xAxisName": "Week",
"yAxisName": "Units sold",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"subcaptionFontBold": "0",
"paletteColors": "#0075c2",
"usePlotGradientColor": "0",
"bgColor": "#ffffff",
"showBorder": "0",
"showValues": "0",
"showShadow": "0",
"showAlternateHGridColor": "0",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"canvasBgColor": "#ffffff",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "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"
}]
}
}
);
fusioncharts.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.
Was this article helpful to you ?