Export charts in Excel

The Excel export is done using a server-side component running on .NET framework, that converts the chart configuration into excel file. FusionCharts provide self-hosted export server which can be used to perform Excel export. You can also set-up your private export server for data privacy and better efficiency.

Depending on the chart type, some of the charts will be exported as interactive charts in excel and others will be exported as a static image in the excel. However, the spreadsheet will always contain the chart data.

Let's check out a few examples of specific chart types using Excel export.

For detailed list of supported chart types and attributes click here .

Export multi-series area 2D chart

{ "chart": { "exportenabled": "1", "caption": "Sales of Liquor", "subCaption": "Previous week vs current week", "xAxisName": "Day", "yAxisName": "Sales (In USD)", "numberPrefix": "$", "paletteColors": "#0075c2,#1aaf5d", "bgColor": "#ffffff", "showBorder": "0", "showCanvasBorder": "0", "plotBorderAlpha": "10", "usePlotGradientColor": "0", "legendBorderAlpha": "0", "legendShadow": "0", "plotFillAlpha": "60", "showXAxisLine": "1", "axisLineAlpha": "25", "showValues": "0", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "divlineColor": "#999999", "divLineDashed": "1", "divLineDashLen": "1", "showAlternateHGridColor": "0", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5", "exportMode": "server" }, "categories": [ { "category": [ { "label": "Mon" }, { "label": "Tue" }, { "label": "Wed" }, { "label": "Thu" }, { "label": "Fri" }, { "label": "Sat" }, { "label": "Sun" } ] } ], "dataset": [ { "seriesname": "Previous Week", "data": [ { "value": "13000" }, { "value": "14500" }, { "value": "13500" }, { "value": "15000" }, { "value": "15500" }, { "value": "17650" }, { "value": "19500" } ] }, { "seriesname": "Current Week", "data": [ { "value": "8400" }, { "value": "9800" }, { "value": "11800" }, { "value": "14400" }, { "value": "18800" }, { "value": "24800" }, { "value": "30800" } ] } ] }
{
    "chart": {
        "exportenabled": "1",
        "caption": "Sales of Liquor",
        "subCaption": "Previous week vs current week",
        "xAxisName": "Day",
        "yAxisName": "Sales (In USD)",
        "numberPrefix": "$",
        "paletteColors": "#0075c2,#1aaf5d",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "showCanvasBorder": "0",
        "plotBorderAlpha": "10",
        "usePlotGradientColor": "0",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "plotFillAlpha": "60",
        "showXAxisLine": "1",
        "axisLineAlpha": "25",
        "showValues": "0",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "divlineColor": "#999999",
        "divLineDashed": "1",
        "divLineDashLen": "1",
        "showAlternateHGridColor": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
        "exportMode": "server"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Mon"
                },
                {
                    "label": "Tue"
                },
                {
                    "label": "Wed"
                },
                {
                    "label": "Thu"
                },
                {
                    "label": "Fri"
                },
                {
                    "label": "Sat"
                },
                {
                    "label": "Sun"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Previous Week",
            "data": [
                {
                    "value": "13000"
                },
                {
                    "value": "14500"
                },
                {
                    "value": "13500"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "15500"
                },
                {
                    "value": "17650"
                },
                {
                    "value": "19500"
                }
            ]
        },
        {
            "seriesname": "Current Week",
            "data": [
                {
                    "value": "8400"
                },
                {
                    "value": "9800"
                },
                {
                    "value": "11800"
                },
                {
                    "value": "14400"
                },
                {
                    "value": "18800"
                },
                {
                    "value": "24800"
                },
                {
                    "value": "30800"
                }
            ]
        }
    ]
}
<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: 'MSArea',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "exportenabled": "1",
            "caption": "Sales of Liquor",
            "subCaption": "Previous week vs current week",
            "xAxisName": "Day",
            "yAxisName": "Sales (In USD)",
            "numberPrefix": "$",
            "paletteColors": "#0075c2,#1aaf5d",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "showCanvasBorder": "0",
            "plotBorderAlpha": "10",
            "usePlotGradientColor": "0",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "plotFillAlpha": "60",
            "showXAxisLine": "1",
            "axisLineAlpha": "25",
            "showValues": "0",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "divlineColor": "#999999",
            "divLineDashed": "1",
            "divLineDashLen": "1",
            "showAlternateHGridColor": "0",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5",
            "exportMode": "server"
        },
        "categories": [{
            "category": [{
                    "label": "Mon"
                },
                {
                    "label": "Tue"
                },
                {
                    "label": "Wed"
                },
                {
                    "label": "Thu"
                },
                {
                    "label": "Fri"
                },
                {
                    "label": "Sat"
                },
                {
                    "label": "Sun"
                }
            ]
        }],
        "dataset": [{
                "seriesname": "Previous Week",
                "data": [{
                        "value": "13000"
                    },
                    {
                        "value": "14500"
                    },
                    {
                        "value": "13500"
                    },
                    {
                        "value": "15000"
                    },
                    {
                        "value": "15500"
                    },
                    {
                        "value": "17650"
                    },
                    {
                        "value": "19500"
                    }
                ]
            },
            {
                "seriesname": "Current Week",
                "data": [{
                        "value": "8400"
                    },
                    {
                        "value": "9800"
                    },
                    {
                        "value": "11800"
                    },
                    {
                        "value": "14400"
                    },
                    {
                        "value": "18800"
                    },
                    {
                        "value": "24800"
                    },
                    {
                        "value": "30800"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Click Export as Excel option from the menu, to download an excel file with corresponding chart and data.

Export the column 3D chart

{ "chart": { "exportenabled": "1", "exportMode": "server", "caption": "Monthly revenue for last year", "subCaption": "Harry's SuperMart", "xAxisName": "Month", "yAxisName": "Revenues (In USD)", "paletteColors": "#0075c2", "valueFontColor": "#ffffff", "baseFont": "Helvetica Neue,Arial", "captionFontSize": "20", "captionFontBold": "1", "subcaptionFontSize": "20", "subcaptionFontBold": "1", "placeValuesInside": "1", "rotateValues": "1", "showShadow": "0", "divlineColor": "#999999", "divLineDashed": "1", "divlineThickness": "1", "divLineDashLen": "1", "canvasBgColor": "#ffffff" }, "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": {
        "exportenabled": "1",
        "exportMode": "server",
        "caption": "Monthly revenue for last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenues (In USD)",
        "paletteColors": "#0075c2",
        "valueFontColor": "#ffffff",
        "baseFont": "Helvetica Neue,Arial",
        "captionFontSize": "20",
        "captionFontBold": "1",
        "subcaptionFontSize": "20",
        "subcaptionFontBold": "1",
        "placeValuesInside": "1",
        "rotateValues": "1",
        "showShadow": "0",
        "divlineColor": "#999999",
        "divLineDashed": "1",
        "divlineThickness": "1",
        "divLineDashLen": "1",
        "canvasBgColor": "#ffffff"
    },
    "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="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: 'column3d',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "exportenabled": "1",
            "exportMode": "server",
            "caption": "Monthly revenue for last year",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Month",
            "yAxisName": "Revenues (In USD)",
            "paletteColors": "#0075c2",
            "valueFontColor": "#ffffff",
            "baseFont": "Helvetica Neue,Arial",
            "captionFontSize": "20",
            "captionFontBold": "1",
            "subcaptionFontSize": "20",
            "subcaptionFontBold": "1",
            "placeValuesInside": "1",
            "rotateValues": "1",
            "showShadow": "0",
            "divlineColor": "#999999",
            "divLineDashed": "1",
            "divlineThickness": "1",
            "divLineDashLen": "1",
            "canvasBgColor": "#ffffff"
        },
        "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 sample, 3D column chart is exported in excel format.

Following attributes are used to customize the caption and subcaption of the above chart.

"captionFontSize": "20" "captionFontBold":"1" "subcaptionFontSize": "20" "subcaptionFontBold": "1"

Export doughnut chart

{ "chart": { "exportenabled": "1", "exportMode": "server", "caption": "Split of Revenue by Product Categories", "subCaption": "Last year", "numberPrefix": "$", "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000", "bgColor": "#ffffff", "showBorder": "0", "use3DLighting": "0", "showShadow": "0", "enableSmartLabels": "0", "startingAngle": "50", "showLabels": "0", "showPercentValues": "1", "showLegend": "1", "legendShadow": "0", "legendBorderAlpha": "0", "centerLabel": "Revenue from $label: $value", "centerLabelBold": "1", "showTooltip": "0", "decimals": "0", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "useDataPlotColorForLabels": "1", "showValues": "0" }, "data": [ { "label": "Food", "value": "28504" }, { "label": "Apparels", "value": "14633" }, { "label": "Electronics", "value": "10507" }, { "label": "Household", "value": "4910" } ] }
{
    "chart": {
        "exportenabled": "1",
        "exportMode": "server",
        "caption": "Split of Revenue by Product Categories",
        "subCaption": "Last year",
        "numberPrefix": "$",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "use3DLighting": "0",
        "showShadow": "0",
        "enableSmartLabels": "0",
        "startingAngle": "50",
        "showLabels": "0",
        "showPercentValues": "1",
        "showLegend": "1",
        "legendShadow": "0",
        "legendBorderAlpha": "0",
        "centerLabel": "Revenue from $label: $value",
        "centerLabelBold": "1",
        "showTooltip": "0",
        "decimals": "0",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "useDataPlotColorForLabels": "1",
        "showValues": "0"
    },
    "data": [
        {
            "label": "Food",
            "value": "28504"
        },
        {
            "label": "Apparels",
            "value": "14633"
        },
        {
            "label": "Electronics",
            "value": "10507"
        },
        {
            "label": "Household",
            "value": "4910"
        }
    ]
}
<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: 'doughnut2d',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "exportenabled": "1",
            "exportMode": "server",
            "caption": "Split of Revenue by Product Categories",
            "subCaption": "Last year",
            "numberPrefix": "$",
            "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "use3DLighting": "0",
            "showShadow": "0",
            "enableSmartLabels": "0",
            "startingAngle": "50",
            "showLabels": "0",
            "showPercentValues": "1",
            "showLegend": "1",
            "legendShadow": "0",
            "legendBorderAlpha": "0",
            "centerLabel": "Revenue from $label: $value",
            "centerLabelBold": "1",
            "showTooltip": "0",
            "decimals": "0",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "useDataPlotColorForLabels": "1",
            "showValues": "0"
        },
        "data": [{
                "label": "Food",
                "value": "28504"
            },
            {
                "label": "Apparels",
                "value": "14633"
            },
            {
                "label": "Electronics",
                "value": "10507"
            },
            {
                "label": "Household",
                "value": "4910"
            }
        ]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Set the starting angle of the first slice using startingAngle attribute.

Export error bar chart

{ "chart": { "exportenabled": "1", "exportMode": "server", "caption": "Machinery lifespan range", "subcaption": "Means & standard deviations", "xAxisName": "Systems", "yAxisName": "Life Span", "numberSuffix": " Years", "halfErrorBar": "0", "paletteColors": "#0075c2,#1aaf5d,#f2c500", "showValues": "1", "errorBarColor": "666666", "bgColor": "#ffffff", "showBorder": "0", "showCanvasBorder": "0", "usePlotGradientColor": "0", "showXAxisLine": "1", "axisLineAlpha": "25", "legendBorderAlpha": "0", "legendShadow": "0", "legendBgAlpha": "0", "showShadow": "0", "showAlternateHgridColor": "0", "showHoverEffect": "1", "rotateValues": "1" }, "categories": [ { "category": [ { "label": "Central AC" }, { "label": "Computers" }, { "label": "Bar-code Scanners" }, { "label": "Packaging Machines" }, { "label": "Chilling Compartments" } ] } ], "dataset": [ { "seriesname": "Daly City Serramonte", "data": [ { "value": "8", "errorvalue": "2" }, { "value": "3", "errorvalue": "0.5" }, { "value": "2", "errorvalue": "1" }, { "value": "6", "errorvalue": "1.8" }, { "value": "8", "errorvalue": "1.2" } ] }, { "seriesname": "Bakersfield Central", "data": [ { "value": "7", "errorvalue": "1" }, { "value": "4", "errorvalue": "0.5" }, { "value": "2", "errorvalue": "1" }, { "value": "4", "errorvalue": "0.8" }, { "value": "7", "errorvalue": "1" } ] }, { "seriesname": "Garden Groove harbour", "data": [ { "value": "9", "errorvalue": "2" }, { "value": "3", "errorvalue": "0.7" }, { "value": "3", "errorvalue": "1" }, { "value": "6", "errorvalue": "1.8" }, { "value": "7", "errorvalue": "1.2" } ] } ] }
{
    "chart": {
        "exportenabled": "1",
        "exportMode": "server",
        "caption": "Machinery lifespan range",
        "subcaption": "Means & standard deviations",
        "xAxisName": "Systems",
        "yAxisName": "Life Span",
        "numberSuffix": " Years",
        "halfErrorBar": "0",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500",
        "showValues": "1",
        "errorBarColor": "666666",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "showCanvasBorder": "0",
        "usePlotGradientColor": "0",
        "showXAxisLine": "1",
        "axisLineAlpha": "25",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendBgAlpha": "0",
        "showShadow": "0",
        "showAlternateHgridColor": "0",
        "showHoverEffect": "1",
        "rotateValues": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Central AC"
                },
                {
                    "label": "Computers"
                },
                {
                    "label": "Bar-code Scanners"
                },
                {
                    "label": "Packaging Machines"
                },
                {
                    "label": "Chilling Compartments"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Daly City Serramonte",
            "data": [
                {
                    "value": "8",
                    "errorvalue": "2"
                },
                {
                    "value": "3",
                    "errorvalue": "0.5"
                },
                {
                    "value": "2",
                    "errorvalue": "1"
                },
                {
                    "value": "6",
                    "errorvalue": "1.8"
                },
                {
                    "value": "8",
                    "errorvalue": "1.2"
                }
            ]
        },
        {
            "seriesname": "Bakersfield Central",
            "data": [
                {
                    "value": "7",
                    "errorvalue": "1"
                },
                {
                    "value": "4",
                    "errorvalue": "0.5"
                },
                {
                    "value": "2",
                    "errorvalue": "1"
                },
                {
                    "value": "4",
                    "errorvalue": "0.8"
                },
                {
                    "value": "7",
                    "errorvalue": "1"
                }
            ]
        },
        {
            "seriesname": "Garden Groove harbour",
            "data": [
                {
                    "value": "9",
                    "errorvalue": "2"
                },
                {
                    "value": "3",
                    "errorvalue": "0.7"
                },
                {
                    "value": "3",
                    "errorvalue": "1"
                },
                {
                    "value": "6",
                    "errorvalue": "1.8"
                },
                {
                    "value": "7",
                    "errorvalue": "1.2"
                }
            ]
        }
    ]
}
<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: 'errorbar2d',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "exportenabled": "1",
            "exportMode": "server",
            "caption": "Machinery lifespan range",
            "subcaption": "Means & standard deviations",
            "xAxisName": "Systems",
            "yAxisName": "Life Span",
            "numberSuffix": " Years",
            "halfErrorBar": "0",
            "paletteColors": "#0075c2,#1aaf5d,#f2c500",
            "showValues": "1",
            "errorBarColor": "666666",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "showCanvasBorder": "0",
            "usePlotGradientColor": "0",
            "showXAxisLine": "1",
            "axisLineAlpha": "25",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "legendBgAlpha": "0",
            "showShadow": "0",
            "showAlternateHgridColor": "0",
            "showHoverEffect": "1",
            "rotateValues": "1"
        },
        "categories": [{
            "category": [{
                    "label": "Central AC"
                },
                {
                    "label": "Computers"
                },
                {
                    "label": "Bar-code Scanners"
                },
                {
                    "label": "Packaging Machines"
                },
                {
                    "label": "Chilling Compartments"
                }
            ]
        }],
        "dataset": [{
                "seriesname": "Daly City Serramonte",
                "data": [{
                        "value": "8",
                        "errorvalue": "2"
                    },
                    {
                        "value": "3",
                        "errorvalue": "0.5"
                    },
                    {
                        "value": "2",
                        "errorvalue": "1"
                    },
                    {
                        "value": "6",
                        "errorvalue": "1.8"
                    },
                    {
                        "value": "8",
                        "errorvalue": "1.2"
                    }
                ]
            },
            {
                "seriesname": "Bakersfield Central",
                "data": [{
                        "value": "7",
                        "errorvalue": "1"
                    },
                    {
                        "value": "4",
                        "errorvalue": "0.5"
                    },
                    {
                        "value": "2",
                        "errorvalue": "1"
                    },
                    {
                        "value": "4",
                        "errorvalue": "0.8"
                    },
                    {
                        "value": "7",
                        "errorvalue": "1"
                    }
                ]
            },
            {
                "seriesname": "Garden Groove harbour",
                "data": [{
                        "value": "9",
                        "errorvalue": "2"
                    },
                    {
                        "value": "3",
                        "errorvalue": "0.7"
                    },
                    {
                        "value": "3",
                        "errorvalue": "1"
                    },
                    {
                        "value": "6",
                        "errorvalue": "1.8"
                    },
                    {
                        "value": "7",
                        "errorvalue": "1.2"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Set rotateValues attribute to 1 to rotate data values in chart.

Export radar chart

{ "chart": { "caption": "Budget analysis", "subCaption": "Current month", "captionFontSize": "14", "subcaptionFontSize": "14", "numberPrefix": "$", "baseFontColor": "#333333", "baseFont": "Helvetica Neue,Arial", "subcaptionFontBold": "0", "paletteColors": "#008ee4,#6baa01", "bgColor": "#ffffff", "radarfillcolor": "#ffffff", "showBorder": "0", "showShadow": "0", "showCanvasBorder": "0", "showLegend": "0", "legendBorderAlpha": "0", "legendShadow": "0", "divLineAlpha": "10", "usePlotGradientColor": "0", "numberPreffix": "$", "exportEnabled": "1", "exportMode": "server" }, "categories": [ { "category": [ { "label": "Marketing" }, { "label": "Product Management" }, { "label": "Customer Service" }, { "label": "Human Resource" }, { "label": "Sales & Distribution" } ] } ], "dataset": [ { "seriesname": "Allocated Budget", "data": [ { "value": "19000" }, { "value": "16500" }, { "value": "14300" }, { "value": "10000" }, { "value": "9800" } ] }, { "seriesname": "Actual Cost", "data": [ { "value": "6000" }, { "value": "9500" }, { "value": "11900" }, { "value": "8000" }, { "value": "9700" } ] } ] }
{
    "chart": {
        "caption": "Budget analysis",
        "subCaption": "Current month",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "numberPrefix": "$",
        "baseFontColor": "#333333",
        "baseFont": "Helvetica Neue,Arial",
        "subcaptionFontBold": "0",
        "paletteColors": "#008ee4,#6baa01",
        "bgColor": "#ffffff",
        "radarfillcolor": "#ffffff",
        "showBorder": "0",
        "showShadow": "0",
        "showCanvasBorder": "0",
        "showLegend": "0",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "divLineAlpha": "10",
        "usePlotGradientColor": "0",
        "numberPreffix": "$",
        "exportEnabled": "1",
        "exportMode": "server"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Marketing"
                },
                {
                    "label": "Product Management"
                },
                {
                    "label": "Customer Service"
                },
                {
                    "label": "Human Resource"
                },
                {
                    "label": "Sales & Distribution"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Allocated Budget",
            "data": [
                {
                    "value": "19000"
                },
                {
                    "value": "16500"
                },
                {
                    "value": "14300"
                },
                {
                    "value": "10000"
                },
                {
                    "value": "9800"
                }
            ]
        },
        {
            "seriesname": "Actual Cost",
            "data": [
                {
                    "value": "6000"
                },
                {
                    "value": "9500"
                },
                {
                    "value": "11900"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "9700"
                }
            ]
        }
    ]
}
<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: 'radar',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Budget analysis",
            "subCaption": "Current month",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "numberPrefix": "$",
            "baseFontColor": "#333333",
            "baseFont": "Helvetica Neue,Arial",
            "subcaptionFontBold": "0",
            "paletteColors": "#008ee4,#6baa01",
            "bgColor": "#ffffff",
            "radarfillcolor": "#ffffff",
            "showBorder": "0",
            "showShadow": "0",
            "showCanvasBorder": "0",
            "showLegend": "0",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "divLineAlpha": "10",
            "usePlotGradientColor": "0",
            "numberPreffix": "$",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "exportEnabled": "1",
            "exportMode": "server"
        },
        "categories": [{
            "category": [{
                    "label": "Marketing"
                },
                {
                    "label": "Product Management"
                },
                {
                    "label": "Customer Service"
                },
                {
                    "label": "Human Resource"
                },
                {
                    "label": "Sales & Distribution"
                }
            ]
        }],
        "dataset": [{
                "seriesname": "Allocated Budget",
                "data": [{
                        "value": "19000"
                    },
                    {
                        "value": "16500"
                    },
                    {
                        "value": "14300"
                    },
                    {
                        "value": "10000"
                    },
                    {
                        "value": "9800"
                    }
                ]
            },
            {
                "seriesname": "Actual Cost",
                "data": [{
                        "value": "6000"
                    },
                    {
                        "value": "9500"
                    },
                    {
                        "value": "11900"
                    },
                    {
                        "value": "8000"
                    },
                    {
                        "value": "9700"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Radar Chart is useful in visualizing multiple series of multi-dimensional data. Set showLegend attribute to 1 to show the legend.

Export box and whisker chart

{ "chart": { "caption": "Distribution of annual salaries", "subcaption": "By Gender", "xAxisName": "Pay Grades", "YAxisName": "Salaries (In USD)", "numberPrefix": "$", "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00", "bgColor": "#ffffff", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "showBorder": "0", "showCanvasBorder": "0", "showAlternateHGridColor": "0", "legendBorderAlpha": "0", "legendShadow": "0", "legendPosition": "right", "showValues": "0", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5", "exportEnabled": "1", "exportMode": "server", "clickURL": "https://www.google.com" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerboxcolor": "#0075c2", "upperboxcolor": "#1aaf5d", "data": [ { "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000" }, { "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500" }, { "value": "15000,19000,25000,32000,50000,65000" } ] }, { "seriesname": "Female", "lowerboxcolor": "#f45b00", "upperboxcolor": "#f2c500", "data": [ { "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000" }, { "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000" }, { "value": "24000,32000,35000,37000,39000, 58000" } ] } ] }
{
    "chart": {
        "caption": "Distribution of annual salaries",
        "subcaption": "By Gender",
        "xAxisName": "Pay Grades",
        "YAxisName": "Salaries (In USD)",
        "numberPrefix": "$",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
        "bgColor": "#ffffff",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "showBorder": "0",
        "showCanvasBorder": "0",
        "showAlternateHGridColor": "0",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendPosition": "right",
        "showValues": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
        "exportEnabled": "1",
        "exportMode": "server",
        "clickURL": "https://www.google.com"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Male",
            "lowerboxcolor": "#0075c2",
            "upperboxcolor": "#1aaf5d",
            "data": [
                {
                    "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
                },
                {
                    "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
                },
                {
                    "value": "15000,19000,25000,32000,50000,65000"
                }
            ]
        },
        {
            "seriesname": "Female",
            "lowerboxcolor": "#f45b00",
            "upperboxcolor": "#f2c500",
            "data": [
                {
                    "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
                },
                {
                    "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
                },
                {
                    "value": "24000,32000,35000,37000,39000, 58000"
                }
            ]
        }
    ]
}
<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: 'boxandwhisker2d',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Distribution of annual salaries",
            "subcaption": "By Gender",
            "xAxisName": "Pay Grades",
            "YAxisName": "Salaries (In USD)",
            "numberPrefix": "$",
            "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
            "bgColor": "#ffffff",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "showBorder": "0",
            "showCanvasBorder": "0",
            "showAlternateHGridColor": "0",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "legendPosition": "right",
            "showValues": "0",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5",
            "exportEnabled": "1",
            "exportMode": "server",
            "clickURL": "https://www.google.com"
        },
        "categories": [{
            "category": [{
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }],
        "dataset": [{
            "seriesname": "Male",
            "lowerboxcolor": "#0075c2",
            "upperboxcolor": "#1aaf5d",
            "data": [{
                    "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
                },
                {
                    "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
                },
                {
                    "value": "15000,19000,25000,32000,50000,65000"
                }
            ]
        }, {
            "seriesname": "Female",
            "lowerboxcolor": "#f45b00",
            "upperboxcolor": "#f2c500",
            "data": [{
                    "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
                },
                {
                    "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
                },
                {
                    "value": "24000,32000,35000,37000,39000, 58000"
                }
            ]
        }]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Set the legendPosition attribute to right or bottom (default) to specify the legend position.

Export spline chart

{ "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", "logoURL": "https://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png", "legendBorderAlpha": "0", "legendShadow": "0", "divlineAlpha": "100", "divlineColor": "#999999", "divlineThickness": "1", "divLineIsDashed": "1", "divLineDashLen": "1", "divLineGapLen": "1", "exportEnabled": "1", "exportMode": "server" }, "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",
        "logoURL": "https://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "divlineAlpha": "100",
        "divlineColor": "#999999",
        "divlineThickness": "1",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1",
        "exportEnabled": "1",
        "exportMode": "server"
    },
    "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: '500',
    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",
            "logoURL": "https://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "divlineAlpha": "100",
            "divlineColor": "#999999",
            "divlineThickness": "1",
            "divLineIsDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1",
            "exportEnabled": "1",
            "exportMode": "server"
        },
        "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>

Embed a logo on the chart using logoURL attribute.

Exporting the multi-axis line chart

{ "chart": { "exportenabled": "1", "exportMode": "server", "palette": "2", "caption": "CPU Usage", "subcaption": "(Last 10 Hours)", "xaxisname": "Time", "showvalues": "0", "divlinealpha": "100", "numvdivlines": "4", "vdivlinealpha": "0", "showalternatevgridcolor": "1", "alternatevgridalpha": "5", "canvaspadding": "0", "labeldisplay": "ROTATE", "showborder": "0" }, "categories": [ { "category": [ { "label": "10:00" }, { "label": "11:00" }, { "label": "12:00" }, { "label": "13:00" }, { "label": "14:00" }, { "label": "15:00" }, { "label": "16:00" }, { "label": "17:00" }, { "label": "18:00" }, { "label": "19:00" } ] } ], "axis": [ { "title": "CPU Usage", "tickwidth": "10", "divlineDashed": "1", "numbersuffix": "%", "dataset": [ { "seriesname": "CPU 1", "linethickness": "3", "color": "CC0000", "data": [ { "value": "16" }, { "value": "19" }, { "value": "16" }, { "value": "17" }, { "value": "23" }, { "value": "23" }, { "value": "15" }, { "value": "14" }, { "value": "19" }, { "value": "21" } ] }, { "seriesname": "CPU 2", "linethickness": "3", "color": "0372AB", "data": [ { "value": "12" }, { "value": "12" }, { "value": "9" }, { "value": "9" }, { "value": "11" }, { "value": "13" }, { "value": "16" }, { "value": "14" }, { "value": "16" }, { "value": "11" } ] } ] }, { "title": "PF Usage", "axisonleft": "0", "numdivlines": "4", "tickwidth": "10", "divlineDashed": "1", "formatnumberscale": "1", "defaultnumberscale": " MB", "numberscaleunit": "GB", "numberscalevalue": "1024", "dataset": [ { "seriesname": "PF Usage", "data": [ { "value": "696" }, { "value": "711" }, { "value": "636" }, { "value": "671" }, { "value": "1293" }, { "value": "789" }, { "value": "793" }, { "value": "993" }, { "value": "657" }, { "value": "693" } ] } ] }, { "title": "Processes", "axisonleft": "0", "numdivlines": "5", "tickwidth": "10", "divlineDashed": "1", "dataset": [ { "seriesname": "Processes", "data": [ { "value": "543" }, { "value": "511" }, { "value": "536" }, { "value": "449" }, { "value": "668" }, { "value": "588" }, { "value": "511" }, { "value": "536" }, { "value": "449" }, { "value": "668" } ] } ] } ] }
{
    "chart": {
        "exportenabled": "1",
        "exportMode": "server",
        "palette": "2",
        "caption": "CPU Usage",
        "subcaption": "(Last 10 Hours)",
        "xaxisname": "Time",
        "showvalues": "0",
        "divlinealpha": "100",
        "numvdivlines": "4",
        "vdivlinealpha": "0",
        "showalternatevgridcolor": "1",
        "alternatevgridalpha": "5",
        "canvaspadding": "0",
        "labeldisplay": "ROTATE",
        "showborder": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "10:00"
                },
                {
                    "label": "11:00"
                },
                {
                    "label": "12:00"
                },
                {
                    "label": "13:00"
                },
                {
                    "label": "14:00"
                },
                {
                    "label": "15:00"
                },
                {
                    "label": "16:00"
                },
                {
                    "label": "17:00"
                },
                {
                    "label": "18:00"
                },
                {
                    "label": "19:00"
                }
            ]
        }
    ],
    "axis": [
        {
            "title": "CPU Usage",
            "tickwidth": "10",
            "divlineDashed": "1",
            "numbersuffix": "%",
            "dataset": [
                {
                    "seriesname": "CPU 1",
                    "linethickness": "3",
                    "color": "CC0000",
                    "data": [
                        {
                            "value": "16"
                        },
                        {
                            "value": "19"
                        },
                        {
                            "value": "16"
                        },
                        {
                            "value": "17"
                        },
                        {
                            "value": "23"
                        },
                        {
                            "value": "23"
                        },
                        {
                            "value": "15"
                        },
                        {
                            "value": "14"
                        },
                        {
                            "value": "19"
                        },
                        {
                            "value": "21"
                        }
                    ]
                },
                {
                    "seriesname": "CPU 2",
                    "linethickness": "3",
                    "color": "0372AB",
                    "data": [
                        {
                            "value": "12"
                        },
                        {
                            "value": "12"
                        },
                        {
                            "value": "9"
                        },
                        {
                            "value": "9"
                        },
                        {
                            "value": "11"
                        },
                        {
                            "value": "13"
                        },
                        {
                            "value": "16"
                        },
                        {
                            "value": "14"
                        },
                        {
                            "value": "16"
                        },
                        {
                            "value": "11"
                        }
                    ]
                }
            ]
        },
        {
            "title": "PF Usage",
            "axisonleft": "0",
            "numdivlines": "4",
            "tickwidth": "10",
            "divlineDashed": "1",
            "formatnumberscale": "1",
            "defaultnumberscale": " MB",
            "numberscaleunit": "GB",
            "numberscalevalue": "1024",
            "dataset": [
                {
                    "seriesname": "PF Usage",
                    "data": [
                        {
                            "value": "696"
                        },
                        {
                            "value": "711"
                        },
                        {
                            "value": "636"
                        },
                        {
                            "value": "671"
                        },
                        {
                            "value": "1293"
                        },
                        {
                            "value": "789"
                        },
                        {
                            "value": "793"
                        },
                        {
                            "value": "993"
                        },
                        {
                            "value": "657"
                        },
                        {
                            "value": "693"
                        }
                    ]
                }
            ]
        },
        {
            "title": "Processes",
            "axisonleft": "0",
            "numdivlines": "5",
            "tickwidth": "10",
            "divlineDashed": "1",
            "dataset": [
                {
                    "seriesname": "Processes",
                    "data": [
                        {
                            "value": "543"
                        },
                        {
                            "value": "511"
                        },
                        {
                            "value": "536"
                        },
                        {
                            "value": "449"
                        },
                        {
                            "value": "668"
                        },
                        {
                            "value": "588"
                        },
                        {
                            "value": "511"
                        },
                        {
                            "value": "536"
                        },
                        {
                            "value": "449"
                        },
                        {
                            "value": "668"
                        }
                    ]
                }
            ]
        }
    ]
}
<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: 'multiaxisline',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "exportenabled": "1",
            "exportMode": "server",
            "palette": "2",
            "caption": "CPU Usage",
            "subcaption": "(Last 10 Hours)",
            "xaxisname": "Time",
            "showvalues": "0",
            "divlinealpha": "100",
            "numvdivlines": "4",
            "vdivlinealpha": "0",
            "showalternatevgridcolor": "1",
            "alternatevgridalpha": "5",
            "canvaspadding": "0",
            "labeldisplay": "ROTATE",
            "showborder": "0"
        },
        "categories": [{
            "category": [{
                    "label": "10:00"
                },
                {
                    "label": "11:00"
                },
                {
                    "label": "12:00"
                },
                {
                    "label": "13:00"
                },
                {
                    "label": "14:00"
                },
                {
                    "label": "15:00"
                },
                {
                    "label": "16:00"
                },
                {
                    "label": "17:00"
                },
                {
                    "label": "18:00"
                },
                {
                    "label": "19:00"
                }
            ]
        }],
        "axis": [{
                "title": "CPU Usage",
                "tickwidth": "10",
                "divlineDashed": "1",
                "numbersuffix": "%",
                "dataset": [{
                        "seriesname": "CPU 1",
                        "linethickness": "3",
                        "color": "CC0000",
                        "data": [{
                                "value": "16"
                            },
                            {
                                "value": "19"
                            },
                            {
                                "value": "16"
                            },
                            {
                                "value": "17"
                            },
                            {
                                "value": "23"
                            },
                            {
                                "value": "23"
                            },
                            {
                                "value": "15"
                            },
                            {
                                "value": "14"
                            },
                            {
                                "value": "19"
                            },
                            {
                                "value": "21"
                            }
                        ]
                    },
                    {
                        "seriesname": "CPU 2",
                        "linethickness": "3",
                        "color": "0372AB",
                        "data": [{
                                "value": "12"
                            },
                            {
                                "value": "12"
                            },
                            {
                                "value": "9"
                            },
                            {
                                "value": "9"
                            },
                            {
                                "value": "11"
                            },
                            {
                                "value": "13"
                            },
                            {
                                "value": "16"
                            },
                            {
                                "value": "14"
                            },
                            {
                                "value": "16"
                            },
                            {
                                "value": "11"
                            }
                        ]
                    }
                ]
            },
            {
                "title": "PF Usage",
                "axisonleft": "0",
                "numdivlines": "4",
                "tickwidth": "10",
                "divlineDashed": "1",
                "formatnumberscale": "1",
                "defaultnumberscale": " MB",
                "numberscaleunit": "GB",
                "numberscalevalue": "1024",
                "dataset": [{
                    "seriesname": "PF Usage",
                    "data": [{
                            "value": "696"
                        },
                        {
                            "value": "711"
                        },
                        {
                            "value": "636"
                        },
                        {
                            "value": "671"
                        },
                        {
                            "value": "1293"
                        },
                        {
                            "value": "789"
                        },
                        {
                            "value": "793"
                        },
                        {
                            "value": "993"
                        },
                        {
                            "value": "657"
                        },
                        {
                            "value": "693"
                        }
                    ]
                }]
            },
            {
                "title": "Processes",
                "axisonleft": "0",
                "numdivlines": "5",
                "tickwidth": "10",
                "divlineDashed": "1",
                "dataset": [{
                    "seriesname": "Processes",
                    "data": [{
                            "value": "543"
                        },
                        {
                            "value": "511"
                        },
                        {
                            "value": "536"
                        },
                        {
                            "value": "449"
                        },
                        {
                            "value": "668"
                        },
                        {
                            "value": "588"
                        },
                        {
                            "value": "511"
                        },
                        {
                            "value": "536"
                        },
                        {
                            "value": "449"
                        },
                        {
                            "value": "668"
                        }
                    ]
                }]
            }
        ]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

This chart will be rendered as a static image in excel sheet. Since excel supports only upto two axes, this chart cannot be represented as an interactive excel chart. So, the chart is exported as static image.

Detailed List of supported Charts types and attributes can be found here .

Was this article helpful to you ?