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