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