Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

FusionCharts Suite XT includes multi-series charts that allow to plot data for multiple datasets. For example, you can plot the revenue collected each month for the last two years using a multi-series chart. Multi-series charts allow to plot the highs and lows of multiple datasets while also comparing them.

The different types of multi-series charts available in the FusionCharts Suite XT are:

  • Multi-series Column 2D Chart

  • Multi-series Column 3D Chart

  • Multi-series Bar 2D Chart

  • Multi-series Bar 3D Chart

  • Multi-series Line 2D Chart

  • Multi-series Area 2D Chart

In this section, you will be shown a few examples of how multi-series charts look and how you can create a simple multi-series chart.

Creating a Multi-series Column 2D Chart

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

FusionCharts will load here..
{ "chart": { "caption": "Comparison of Quarterly Revenue", "xAxisname": "Quarter", "yAxisName": "Revenues (In USD)", "numberPrefix": "$", "plotFillAlpha": "80", "paletteColors": "#0075c2,#1aaf5d", "baseFontColor": "#333333", "baseFont": "Helvetica Neue,Arial", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "showBorder": "0", "bgColor": "#ffffff", "showShadow": "0", "canvasBgColor": "#ffffff", "canvasBorderAlpha": "0", "divlineAlpha": "100", "divlineColor": "#999999", "divlineThickness": "1", "divLineIsDashed": "1", "divLineDashLen": "1", "divLineGapLen": "1", "usePlotGradientColor": "0", "showplotborder": "0", "valueFontColor": "#ffffff", "placeValuesInside": "1", "showHoverEffect": "1", "rotateValues": "1", "showXAxisLine": "1", "xAxisLineThickness": "1", "xAxisLineColor": "#999999", "showAlternateHGridColor": "0", "legendBgAlpha": "0", "legendBorderAlpha": "0", "legendShadow": "0", "legendItemFontSize": "10", "legendItemFontColor": "#666666" }, "categories": [ { "category": [ { "label": "Q1" }, { "label": "Q2" }, { "label": "Q3" }, { "label": "Q4" } ] } ], "dataset": [ { "seriesname": "Previous Year", "data": [ { "value": "10000" }, { "value": "11500" }, { "value": "12500" }, { "value": "15000" } ] }, { "seriesname": "Current Year", "data": [ { "value": "25400" }, { "value": "29800" }, { "value": "21800" }, { "value": "26800" } ] } ], "trendlines": [ { "line": [ { "startvalue": "12250", "color": "#0075c2", "displayvalue": "Previous{br}Average", "valueOnRight": "1", "thickness": "1", "showBelow": "1", "tooltext": "Previous year quarterly target : $13.5K" }, { "startvalue": "25950", "color": "#1aaf5d", "displayvalue": "Current{br}Average", "valueOnRight": "1", "thickness": "1", "showBelow": "1", "tooltext": "Current year quarterly target : $23K" } ] } ] }
{
    "chart": {
        "caption": "Comparison of Quarterly Revenue",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "plotFillAlpha": "80",
        "paletteColors": "#0075c2,#1aaf5d",
        "baseFontColor": "#333333",
        "baseFont": "Helvetica Neue,Arial",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "showBorder": "0",
        "bgColor": "#ffffff",
        "showShadow": "0",
        "canvasBgColor": "#ffffff",
        "canvasBorderAlpha": "0",
        "divlineAlpha": "100",
        "divlineColor": "#999999",
        "divlineThickness": "1",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1",
        "usePlotGradientColor": "0",
        "showplotborder": "0",
        "valueFontColor": "#ffffff",
        "placeValuesInside": "1",
        "showHoverEffect": "1",
        "rotateValues": "1",
        "showXAxisLine": "1",
        "xAxisLineThickness": "1",
        "xAxisLineColor": "#999999",
        "showAlternateHGridColor": "0",
        "legendBgAlpha": "0",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendItemFontSize": "10",
        "legendItemFontColor": "#666666"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3"
                },
                {
                    "label": "Q4"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Previous Year",
            "data": [
                {
                    "value": "10000"
                },
                {
                    "value": "11500"
                },
                {
                    "value": "12500"
                },
                {
                    "value": "15000"
                }
            ]
        },
        {
            "seriesname": "Current Year",
            "data": [
                {
                    "value": "25400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "21800"
                },
                {
                    "value": "26800"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "12250",
                    "color": "#0075c2",
                    "displayvalue": "Previous{br}Average",
                    "valueOnRight": "1",
                    "thickness": "1",
                    "showBelow": "1",
                    "tooltext": "Previous year quarterly target  : $13.5K"
                },
                {
                    "startvalue": "25950",
                    "color": "#1aaf5d",
                    "displayvalue": "Current{br}Average",
                    "valueOnRight": "1",
                    "thickness": "1",
                    "showBelow": "1",
                    "tooltext": "Current year quarterly target  : $23K"
                }
            ]
        }
    ]
}
<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: 'mscolumn2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Comparison of Quarterly Revenue",
            "xAxisname": "Quarter",
            "yAxisName": "Revenues (In USD)",
            "numberPrefix": "$",
            "plotFillAlpha": "80",

            //Cosmetics
            "paletteColors": "#0075c2,#1aaf5d",
            "baseFontColor": "#333333",
            "baseFont": "Helvetica Neue,Arial",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "showBorder": "0",
            "bgColor": "#ffffff",
            "showShadow": "0",
            "canvasBgColor": "#ffffff",
            "canvasBorderAlpha": "0",
            "divlineAlpha": "100",
            "divlineColor": "#999999",
            "divlineThickness": "1",
            "divLineIsDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1",
            "usePlotGradientColor": "0",
            "showplotborder": "0",
            "valueFontColor": "#ffffff",
            "placeValuesInside": "1",
            "showHoverEffect": "1",
            "rotateValues": "1",
            "showXAxisLine": "1",
            "xAxisLineThickness": "1",
            "xAxisLineColor": "#999999",
            "showAlternateHGridColor": "0",
            "legendBgAlpha": "0",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "legendItemFontSize": "10",
            "legendItemFontColor": "#666666"
        },
        "categories": [{
            "category": [{
                "label": "Q1"
            }, {
                "label": "Q2"
            }, {
                "label": "Q3"
            }, {
                "label": "Q4"
            }]
        }],
        "dataset": [{
            "seriesname": "Previous Year",
            "data": [{
                "value": "10000"
            }, {
                "value": "11500"
            }, {
                "value": "12500"
            }, {
                "value": "15000"
            }]
        }, {
            "seriesname": "Current Year",
            "data": [{
                "value": "25400"
            }, {
                "value": "29800"
            }, {
                "value": "21800"
            }, {
                "value": "26800"
            }]
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "12250",
                "color": "#0075c2",
                "displayvalue": "Previous{br}Average",
                "valueOnRight": "1",
                "thickness": "1",
                "showBelow": "1",
                "tooltext": "Previous year quarterly target  : $13.5K"
            }, {
                "startvalue": "25950",
                "color": "#1aaf5d",
                "displayvalue": "Current{br}Average",
                "valueOnRight": "1",
                "thickness": "1",
                "showBelow": "1",
                "tooltext": "Current year quarterly target  : $23K"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The above chart compares the quarterly revenue earned for the previous year and the current year. The columns for both datasets, one for the previous year and one for the current year, have been rendered using different colors. This makes it easy to interpret and compare the data.

Creating a Multi-series Line 2D Chart

A simple multi-series line chart looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Number of visitors last week", "subCaption": "Bakersfield Central vs Los Angeles Topanga", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "paletteColors": "#0075c2,#1aaf5d", "bgcolor": "#ffffff", "showBorder": "0", "showShadow": "0", "showCanvasBorder": "0", "usePlotGradientColor": "0", "legendBorderAlpha": "0", "legendShadow": "0", "showAxisLines": "0", "showAlternateHGridColor": "0", "divlineThickness": "1", "divLineIsDashed": "1", "divLineDashLen": "1", "divLineGapLen": "1", "xAxisName": "Day", "showValues": "0" }, "categories": [ { "category": [ { "label": "Mon" }, { "label": "Tue" }, { "label": "Wed" }, { "vline": "true", "lineposition": "0", "color": "#6baa01", "labelHAlign": "center", "labelPosition": "0", "label": "National holiday", "dashed": "1" }, { "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" } ] } ], "trendlines": [ { "line": [ { "startvalue": "17022", "color": "#6baa01", "valueOnRight": "1", "displayvalue": "Average" } ] } ] }
{
    "chart": {
        "caption": "Number of visitors last week",
        "subCaption": "Bakersfield Central vs Los Angeles Topanga",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "paletteColors": "#0075c2,#1aaf5d",
        "bgcolor": "#ffffff",
        "showBorder": "0",
        "showShadow": "0",
        "showCanvasBorder": "0",
        "usePlotGradientColor": "0",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "showAxisLines": "0",
        "showAlternateHGridColor": "0",
        "divlineThickness": "1",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1",
        "xAxisName": "Day",
        "showValues": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Mon"
                },
                {
                    "label": "Tue"
                },
                {
                    "label": "Wed"
                },
                {
                    "vline": "true",
                    "lineposition": "0",
                    "color": "#6baa01",
                    "labelHAlign": "center",
                    "labelPosition": "0",
                    "label": "National holiday",
                    "dashed": "1"
                },
                {
                    "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"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "17022",
                    "color": "#6baa01",
                    "valueOnRight": "1",
                    "displayvalue": "Average"
                }
            ]
        }
    ]
}
<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: 'msline',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Number of visitors last week",
            "subCaption": "Bakersfield Central vs Los Angeles Topanga",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "paletteColors": "#0075c2,#1aaf5d",
            "bgcolor": "#ffffff",
            "showBorder": "0",
            "showShadow": "0",
            "showCanvasBorder": "0",
            "usePlotGradientColor": "0",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "showAxisLines": "0",
            "showAlternateHGridColor": "0",
            "divlineThickness": "1",
            "divLineIsDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1",
            "xAxisName": "Day",
            "showValues": "0"
        },
        "categories": [{
            "category": [{
                "label": "Mon"
            }, {
                "label": "Tue"
            }, {
                "label": "Wed"
            }, {
                "vline": "true",
                "lineposition": "0",
                "color": "#6baa01",
                "labelHAlign": "center",
                "labelPosition": "0",
                "label": "National holiday",
                "dashed": "1"
            }, {
                "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"
            }]
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "17022",
                "color": "#6baa01",
                "valueOnRight": "1",
                "displayvalue": "Average"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The above chart compares the number of visitors to the website for the last week and the current week. The line segments for both datasets, one for the last week and one for the current week, have been rendered using different colors. This makes it easy to interpret and compare the data.

Brief Explanation of the Data Structure

In the JSON data, the attributes and their corresponding values are written in the following key-value pair format:

"<attributeName>": "<value>"

Given below is a brief description of the data structure needed to render a multi-series chart:

Attribute Name Description

type

It is used to specify the type of chart you want to render. For example, to render a column 2D chart, the value for this attribute will be column2d.

renderAt

It is used to specify the container object where the chart will be rendered.

width

It is used to specify the width of the chart.

height

It is used to specify the height of the chart.

dataFormat

It is used to specify the type of data that will be passed to the chart object. This attribute takes two values: json, where the JSON data to render the chart is passed to the dataSource attribute, and jsonurl, where the relative path to a .json file is passed to the dataSource attribute.

dataSource

It specifies the source from where the data will be fetched, depending on the value passed to the dataFormat attribute.

caption

It is used to specify the chart caption. This attribute belongs to the chart object.

subCaption

It is used to specify the chart sub-caption. This attribute belongs to the chart object.

xAxisName

It is used to specify the name for the x-axis.

yAxisName

It is used to specify the name for the y-axis.

numberPrefix

It is used to specify the character that will precede all numeric values on the chart, e.g. $ for the currency symbol.

theme

It is used to specify the theme for the chart.

label

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

value

It is used to specify the value for a data item. This attribute belongs to the data object, which in turn belongs to the dataset object. The dataset object is an object array that can be used to make multiple datasets.

seriesName

It is used to specify a name for the dataset. This name is shown in the legend box rendered below the chart. This attribute belongs to the dataset object. The dataset object is an object array that can be used to make multiple datasets.

Note that the number of category objects defined should be equal to the number of data objects defined, that is, if you mention twelve categories (twelve months), the data for both years (2013 and 2014) should also contain twelve data objects (twelve rows of data). Else, the chart will display empty space at that position.

Top