3D Charts

FusionCharts Suite XT allows you plot 3D charts as well. 3D charts plot the data points with depth, and gradients and shadows to enhance the effect. While 3D charts add a dimension to the chart visuals, they are not recommended for all dashboards.

Let's Begin

Creating 3D charts involves the following steps:

  1. Installing FusionCharts Suite XT for your application
  2. Converting your data to a JSON or XML format. FusionCharts Suite XT accepts both data formats, and can read it as a string, or from a file, local or remote
  3. Including the FusionCharts JavaScript library in your HTML page
  4. Creating a container <div> for the chart
  5. Using the new FusionCharts() constructor to create the chart instance, and then calling the render() method

In this section. we will look at how you can create a Column 3D, a Pie 3D, and a Funnel 3D chart.

Column 3D Chart

Let's build a column 3D chart showing the monthly revenue Harry's SuperMart generated in the last year.

The column 3D chart will look like this:

FusionCharts should load here..

The HTML code needed to generate this chart would look like this:

<html>
<head>
<title>My First Column 3D chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        "type": "mscolumn3d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource":  {
            "chart": {
                "caption": "Sales in Last Two Years",
                "subCaption": "Quarter-wise comparison",
                "xAxisName": "Quarter",
                "yAxisName": "Sales (In USD)",
                "numberPrefix": "$",
                "theme": "fint"
            },

            "categories": [{
                "category": [{
                    "label": "Q1"
                }, {
                    "label": "Q2"
                }, {
                    "label": "Q3"
                }, {
                    "label": "Q4"
                }]
            }],
            "dataset": [{
                "seriesname": "Previous Year",
                "data": [{
                    "value": "10000"
                }, {
                    "value": "11500"
                }, {
                    "value": "12500"
                }, {
                    "value": "15000"
                }]
            }, {
                "seriesname": "Current Year",
                "data": [{
                    "value": "25400"
                }, {
                    "value": "29800"
                }, {
                    "value": "21800"
                }, {
                    "value": "26800"
                }]
            }]
        }
    });

    revenueChart.render();

});

</script>
</head>
<body>
  <div id="chartContainer">A column 3D chart will load here!</div>
</body>
</html>

In the above code, we:

  • Created an instance of FusionCharts object in the revenueChart variable. Each chart or gauge in your HTML page needs to have a separate variable. The initialization code is wrapped within FusionCharts.ready method. This safeguards your chart instantiation code from being called before FusionCharts Suite XT library is loaded and is ready to be used on the page.

  • Next, we created an instance of column3d chart. Each chart type in FusionCharts Suite XT has a unique alias, using which you can create instance of that chart. In this case, we are creating an instance of a Column 3D chart with dimensions of 400x300 pixels, and providing JSON data as a string.

  • To specify the data format as JSON, we set the dataFormat parameter to json.

  • The actual JSON data is embedded as string as value of dataSource parameter. The chart object contains a list of key-value pairs that let you configure the functional and cosmetic attributes of your chart. Each row of the tabular data is present within the data array, with quarter of the year with key as label, and revenue with key as value.

  • If you noted, we have used the theme attribute in the chart's JSON data and provided fint (FusionCharts Suite XT Internal theme) as the value for it. Themes let you centralize your cosmetic and functional properties across various charts in your web application. FusionCharts Suite XT are shipped with 3 default themes - ocean, zune and carbon.

  • Call the render method to draw the chart in chart-container <div> element.

Thats it! You just created your first interactive Column 3D JavaScript chart using FusionCharts Suite XT.

Pie 3D Chart

The Great Online Sale, where several shopping portals offered their products at reduced prices, has just concluded. Harry has participated in this sale and is analyzing his website's performance during this sale based on different parameters. Among other things, Harry wishes to know the percentage of visitors, who visited his website during the sale, according to age groups: teenagers, adults, middle-aged people, and senior citizens.

Let's build a 3D pie chart for Harry that will show him the percentage of visitors according to their age group.

The Pie 3D chart will look like this:

FusionCharts should load here..

The HTML code needed to do generate this chart would look like this

<html>
<head>
<title>My First Pie 3D chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
    var demographicsChart = new FusionCharts({
        "type": "pie3d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "caption": "Age profile of website visitors",
                "subCaption": "Last Year",
                "startingAngle": "120",
                "showLabels": "0",
                "showLegend": "1",
                "enableMultiSlicing": "0",
                "slicingDistance": "15",

                //To show the values in percentage
                "showPercentValues": "1",
                "showPercentInTooltip": "0",
                "plotTooltext": "Age group : $label<br>Total visit : $datavalue",
                "theme": "fint"
            },
            "data": [{
                "label": "Teenage",
                "value": "1250400"
            }, {
                "label": "Adult",
                "value": "1463300"
            }, {
                "label": "Mid-age",
                "value": "1050700"
            }, {
                "label": "Senior",
                "value": "491000"
            }]
        }
    });

    demographicsChart.render();
});

</script>
</head>
<body>
 <div id="chartContainer">A pie 3D chart will load here!</div>
</body>
</html>

In the above code, we:

  • Created an instance of FusionCharts object in the demographicsChart variable. Each chart or gauge in your HTML page needs to have a separate variable. The initialization code is wrapped within FusionCharts.ready method. This safeguards your chart instantiation code from being called before FusionCharts Suite XT library is loaded and is ready to be used on the page.

  • Next, we created an instance of pie3D chart. Each chart type in FusionCharts Suite XT has a unique alias, using which you can create instance of that chart.

  • To specify the data format as JSON, we set the dataFormat parameter to json.

  • The actual JSON data is embedded as string as value of dataSource parameter. The chart object contains a list of key-value pairs that let you configure the functional and cosmetic attributes of your chart. In this example it has the age group with key as value in the data array.

  • If you noted, we have used the theme attribute in the chart's JSON data and provided fint (FusionCharts Suite XT Internal theme) as the value for it. Themes let you centralize your cosmetic and functional properties across various charts in your web application. FusionCharts Suite XT are shipped with 3 default themes - ocean, zune and carbon.

  • Call the render method to draw the chart in chart-container <div> element.

Funnel 3D Chart

To maintain his newly-found foothold in the market, it is important that Harry understands customer interactions on his website. One metric that helps to analyze customer behavior is the visit to purchase conversion. Harry wants to understand the visits to purchase conversion for the last year. For this he needs to understand, how many unique visits were recorded, how many customers registered, and how many finally went to purchase products. This will also help him understand at what stage of the process his numbers fall and, thus, indicate what corrective measures to take.

Let's build a funnel chart for Harry that will show this conversion analysis.

FusionCharts should load here..

The HTML code needed to do generate this chart would look like this:

<html>
<head>
<title>My First Funnel 3D chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
  FusionCharts.ready(function () {
  var conversionChart = new FusionCharts({
        "type": "funnel",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "400",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "caption": "Conversion Funnel Analysis for last year",
                    "subcaption": "Harry's SuperMart Website",
                    "decimals": "1",
                    "labelDistance": "15",
                    "plotTooltext": "Success : $percentOfPrevValue",

                    //To show the values in percentage
                    "showPercentValues": "1",
                    "theme": "fint"
            },
                "data": [{
                "label": "Unique Website Visits",
                    "value": "1460000"
            }, {
                "label": "Programme Details Section Visits",
                    "value": "930000"
            }, {
                "label": "Attempts to Register",
                    "value": "540000"
            }, {
                "label": "Successful Registrations",
                    "value": "210000"
            }, {
                "label": "Logged In",
                    "value": "190000"
            }, {
                "label": "Purchased on Introductory Offers",
                    "value": "120000"
            }]
        }
    });

  conversionChart.render();
  });
</script>
</head>
<body>
 <div id="chartContainer">A funnel 3D chart will load here!</div>
</body>
</html>

In the above code, we:

  • Created an instance of FusionCharts object in the conversionChart variable. Each chart or gauge in your HTML page needs to have a separate variable. The initialization code is wrapped within FusionCharts.ready method. This safeguards your chart instantiation code from being called before FusionCharts Suite XT library is loaded and is ready to be used on the page.

  • Next, we created an instance of funnel chart. Each chart type in FusionCharts Suite XT has a unique alias, using which you can create instance of that chart.

  • To specify the data format as JSON, we set the dataFormat parameter to json.

  • The actual JSON data is embedded as string as value of dataSource parameter. The chart object contains a list of key-value pairs that let you configure the functional and cosmetic attributes of your chart. In this example it has the conversion stage with key as value in the data array.

  • If you noted, we have used the theme attribute in the chart's JSON data and provided fint (FusionCharts Suite XT Internal theme) as the value for it. Themes let you centralize your cosmetic and functional properties across various charts in your web application. FusionCharts Suite XT are shipped with 3 default themes - ocean, zune and carbon.

  • Call the render method to draw the chart in chart-container <div> element.

Thats it! you have configured your funnel chart.

Was there a problem rendering the chart?

In case something went wrong and you are unable to see the chart, check for the following:

  • If you are getting a JavaScript error on your page, check your browser console for the exact error and fix accordingly.

  • If the chart does not show up at all, but there are no JavaScript errors, check if the FusionCharts Suite XT JavaScript library has loaded correctly. You can use developer tools within your browser to see if fusioncharts.js was loaded. Check if the path to fusioncharts.js file is correct, and whether the file exists in that location.

  • If you get a Loading Data or Error in loading data message, check whether your JSON data structure is correct, and there are no conflicts related to quotation marks in your code.

Click here for more information on Troubleshooting

Zoom Line Charts
Adding Interactivity to Your Charts