Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

The FusionCharts Suite XT standard charts are simple charts used to plot single-series data. For example, you can plot the revenue for each month of one year using a single-series chart. These charts are rendered with a single y-axis. You can choose to render the column chart and the bar chart in 2D or 3D.

The standard single-series charts available in the FusionCharts Suite XT are:

  • Column 2D

  • Column 3D

  • Bar 2D

  • Bar 3D

  • Line 2D

  • Area 2D

In this section, you will be shown a few examples of how the standard charts look and work.

Creating the Column 2D Chart

A single-series column 2D chart looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Monthly revenue for last year", "subCaption": "Harry's SuperMart", "xAxisName": "Month", "yAxisName": "Revenues (In USD)", "numberPrefix": "$", "theme": "fint" }, "data": [ { "label": "Jan", "value": "420000" }, { "label": "Feb", "value": "810000" }, { "label": "Mar", "value": "720000" }, { "label": "Apr", "value": "550000" }, { "label": "May", "value": "910000" }, { "label": "Jun", "value": "510000" }, { "label": "Jul", "value": "680000" }, { "label": "Aug", "value": "620000" }, { "label": "Sep", "value": "610000" }, { "label": "Oct", "value": "490000" }, { "label": "Nov", "value": "900000" }, { "label": "Dec", "value": "730000" } ] }
{
    "chart": {
        "caption": "Monthly revenue for last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Monthly revenue for last year",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Month",
            "yAxisName": "Revenues (In USD)",
            "numberPrefix": "$",
            "theme": "fint"
        },

        "data": [{
            "label": "Jan",
            "value": "420000"
        }, {
            "label": "Feb",
            "value": "810000"
        }, {
            "label": "Mar",
            "value": "720000"
        }, {
            "label": "Apr",
            "value": "550000"
        }, {
            "label": "May",
            "value": "910000"
        }, {
            "label": "Jun",
            "value": "510000"
        }, {
            "label": "Jul",
            "value": "680000"
        }, {
            "label": "Aug",
            "value": "620000"
        }, {
            "label": "Sep",
            "value": "610000"
        }, {
            "label": "Oct",
            "value": "490000"
        }, {
            "label": "Nov",
            "value": "900000"
        }, {
            "label": "Dec",
            "value": "730000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the above chart, we have shown the monthly revenue for the last one year for Harry’s SuperMart. We have plotted the months along the x-axis and the revenue, which is a numeric value, along the y-axis.

Creating the Bar 2D Chart

A single-series bar 2D chart looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Top 5 Stores by Sales", "subCaption": "Last month", "yAxisName": "Sales (In USD)", "numberPrefix": "$", "paletteColors": "#0075c2", "bgColor": "#ffffff", "showBorder": "0", "showCanvasBorder": "0", "usePlotGradientColor": "0", "plotBorderAlpha": "10", "placeValuesInside": "1", "valueFontColor": "#ffffff", "showAxisLines": "1", "axisLineAlpha": "25", "divLineAlpha": "10", "alignCaptionWithCanvas": "0", "showAlternateVGridColor": "0", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5" }, "data": [ { "label": "Bakersfield Central", "value": "880000" }, { "label": "Garden Groove harbour", "value": "730000" }, { "label": "Los Angeles Topanga", "value": "590000" }, { "label": "Compton-Rancho Dom", "value": "520000" }, { "label": "Daly City Serramonte", "value": "330000" } ] }
{
    "chart": {
        "caption": "Top 5 Stores by Sales",
        "subCaption": "Last month",
        "yAxisName": "Sales (In USD)",
        "numberPrefix": "$",
        "paletteColors": "#0075c2",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "showCanvasBorder": "0",
        "usePlotGradientColor": "0",
        "plotBorderAlpha": "10",
        "placeValuesInside": "1",
        "valueFontColor": "#ffffff",
        "showAxisLines": "1",
        "axisLineAlpha": "25",
        "divLineAlpha": "10",
        "alignCaptionWithCanvas": "0",
        "showAlternateVGridColor": "0",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5"
    },
    "data": [
        {
            "label": "Bakersfield Central",
            "value": "880000"
        },
        {
            "label": "Garden Groove harbour",
            "value": "730000"
        },
        {
            "label": "Los Angeles Topanga",
            "value": "590000"
        },
        {
            "label": "Compton-Rancho Dom",
            "value": "520000"
        },
        {
            "label": "Daly City Serramonte",
            "value": "330000"
        }
    ]
}
<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: 'bar2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Top 5 Stores by Sales",
            "subCaption": "Last month",
            "yAxisName": "Sales (In USD)",
            "numberPrefix": "$",
            "paletteColors": "#0075c2",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "showCanvasBorder": "0",
            "usePlotGradientColor": "0",
            "plotBorderAlpha": "10",
            "placeValuesInside": "1",
            "valueFontColor": "#ffffff",
            "showAxisLines": "1",
            "axisLineAlpha": "25",
            "divLineAlpha": "10",
            "alignCaptionWithCanvas": "0",
            "showAlternateVGridColor": "0",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5"
        },

        "data": [{
            "label": "Bakersfield Central",
            "value": "880000"
        }, {
            "label": "Garden Groove harbour",
            "value": "730000"
        }, {
            "label": "Los Angeles Topanga",
            "value": "590000"
        }, {
            "label": "Compton-Rancho Dom",
            "value": "520000"
        }, {
            "label": "Daly City Serramonte",
            "value": "330000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

A bar chart is like a column chart that is inverted. Therefore, the numeric values, plotted along the y-axis in a column chart, are plotted along the x-axis in a bar chart and the data plot labels are plotted along the y-axis.

In the above chart, we have shown the five stores in a supermarket that have the highest sales. The sales figures have been plotted along the x-axis and the store names have been plotted along the y-axis.

Creating the Line 2D Chart

A single-series line 2D chart looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Total footfall in Bakersfield Central", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "No. of Visitors", "lineThickness": "2", "paletteColors": "#0075c2", "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", "showXAxisLine": "1", "xAxisLineThickness": "1", "xAxisLineColor": "#999999", "showAlternateHGridColor": "0" }, "data": [ { "label": "Mon", "value": "15123" }, { "label": "Tue", "value": "14233" }, { "label": "Wed", "value": "23507" }, { "label": "Thu", "value": "9110" }, { "label": "Fri", "value": "15529" }, { "label": "Sat", "value": "20803" }, { "label": "Sun", "value": "19202" } ], "trendlines": [ { "line": [ { "startvalue": "18500", "color": "#1aaf5d", "displayvalue": "Average{br}weekly{br}footfall", "valueOnRight": "1", "thickness": "2" } ] } ] }
{
    "chart": {
        "caption": "Total footfall in Bakersfield Central",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "No. of Visitors",
        "lineThickness": "2",
        "paletteColors": "#0075c2",
        "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",
        "showXAxisLine": "1",
        "xAxisLineThickness": "1",
        "xAxisLineColor": "#999999",
        "showAlternateHGridColor": "0"
    },
    "data": [
        {
            "label": "Mon",
            "value": "15123"
        },
        {
            "label": "Tue",
            "value": "14233"
        },
        {
            "label": "Wed",
            "value": "23507"
        },
        {
            "label": "Thu",
            "value": "9110"
        },
        {
            "label": "Fri",
            "value": "15529"
        },
        {
            "label": "Sat",
            "value": "20803"
        },
        {
            "label": "Sun",
            "value": "19202"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "18500",
                    "color": "#1aaf5d",
                    "displayvalue": "Average{br}weekly{br}footfall",
                    "valueOnRight": "1",
                    "thickness": "2"
                }
            ]
        }
    ]
}
<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: 'line',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Total footfall in Bakersfield Central",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "No. of Visitors",

            //Cosmetics
            "lineThickness": "2",
            "paletteColors": "#0075c2",
            "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",
            "showXAxisLine": "1",
            "xAxisLineThickness": "1",
            "xAxisLineColor": "#999999",
            "showAlternateHGridColor": "0",

        },
        "data": [{
            "label": "Mon",
            "value": "15123"
        }, {
            "label": "Tue",
            "value": "14233"
        }, {
            "label": "Wed",
            "value": "23507"
        }, {
            "label": "Thu",
            "value": "9110"
        }, {
            "label": "Fri",
            "value": "15529"
        }, {
            "label": "Sat",
            "value": "20803"
        }, {
            "label": "Sun",
            "value": "19202"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "18500",
                "color": "#1aaf5d",
                "displayvalue": "Average{br}weekly{br}footfall",
                "valueOnRight": "1",
                "thickness": "2"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the above chart, we have shown the total footfall at Bakersfield Central. We have plotted the days along the x-axis and the number of visitors along the y-axis.

Creating the Area 2D Chart

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

FusionCharts will load here..
{ "chart": { "caption": "Sales of Liquor", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "Sales (In USD)", "numberPrefix": "$", "paletteColors": "#0075c2", "bgColor": "#ffffff", "showBorder": "0", "showCanvasBorder": "0", "plotBorderAlpha": "10", "usePlotGradientColor": "0", "plotFillAlpha": "50", "showXAxisLine": "1", "axisLineAlpha": "25", "divLineAlpha": "10", "showValues": "1", "showAlternateHGridColor": "0", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5" }, "data": [ { "label": "Mon", "value": "4123" }, { "label": "Tue", "value": "4633" }, { "label": "Wed", "value": "5507" }, { "label": "Thu", "value": "4910" }, { "label": "Fri", "value": "5529" }, { "label": "Sat", "value": "5803" }, { "label": "Sun", "value": "6202" } ] }
{
    "chart": {
        "caption": "Sales of Liquor",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Sales (In USD)",
        "numberPrefix": "$",
        "paletteColors": "#0075c2",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "showCanvasBorder": "0",
        "plotBorderAlpha": "10",
        "usePlotGradientColor": "0",
        "plotFillAlpha": "50",
        "showXAxisLine": "1",
        "axisLineAlpha": "25",
        "divLineAlpha": "10",
        "showValues": "1",
        "showAlternateHGridColor": "0",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5"
    },
    "data": [
        {
            "label": "Mon",
            "value": "4123"
        },
        {
            "label": "Tue",
            "value": "4633"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4910"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ]
}
<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: 'area2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Sales of Liquor",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Sales (In USD)",
            "numberPrefix": "$",
            "paletteColors": "#0075c2",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "showCanvasBorder": "0",
            "plotBorderAlpha": "10",
            "usePlotGradientColor": "0",
            "plotFillAlpha": "50",
            "showXAxisLine": "1",
            "axisLineAlpha": "25",
            "divLineAlpha": "10",
            "showValues": "1",
            "showAlternateHGridColor": "0",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5"
        },

        "data": [{
            "label": "Mon",
            "value": "4123"
        }, {
            "label": "Tue",
            "value": "4633"
        }, {
            "label": "Wed",
            "value": "5507"
        }, {
            "label": "Thu",
            "value": "4910"
        }, {
            "label": "Fri",
            "value": "5529"
        }, {
            "label": "Sat",
            "value": "5803"
        }, {
            "label": "Sun",
            "value": "6202"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

An area chart is similar to the line chart, with the difference that the area marked by the anchors and line segments is filled.

In the above chart, we have shown the sales of liquor in a store for each day of a week. The sales figures have been plotted along the y-axis and the days have been plotted along the x-axis.

Brief Explanation of the JSON Data

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 standard single-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, when the JSON data to render the chart is passed to the dataSource attribute, and jsonurl, when 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. A theme is a pre-defined configuration for the visual elements of a chart - you can configure various elements like the background color, the color for the data plots, etc. at once and use the theme wherever you want the same configuration.

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 data object.

value

It is used to specify the value for a data item. This attribute belongs to the data object.

Top