Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Spline charts are a specialized form of line charts that display smooth curves through the different data points.

In this section, you will be introduced to the:

  • Basics of spline charts

  • Types of spline charts

Basics of Spline Charts

Spline charts integrate 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.

Types

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.

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

FusionCharts will load here..

The data structure needed to render a single-series spline 2D chart is given below:

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

Multi-series Spline 2D Chart

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

FusionCharts will load here..

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.

Multi-series Spline Area 2D Chart

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

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

FusionCharts will load here..

The data structure needed to render a multi-series spline area 2D chart is given below:

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

Single-series Spline Area 2D Chart

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

FusionCharts will load here..

To render a single-series spline chart:

  • Set the type attribute to splinearea.

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.

There! You have now seen and understood the basics of spline charts and how the various types can be rendered.

Top