Categories: Tutorials

Rendering FusionCharts in an Android Application

Google’s Android is a Linux-based mobile operating system primarily designed for smartphones and tablets. Since its debut in 2007, it has been the best-selling operating system for tablets and smartphones. Furthermore, Android gives you access to a plethora of useful libraries and tools that can be used to create rich applications. In this post, we’ll walk through the process of integrating FusionCharts into an Android-native app. FusionCharts is available for web and mobile projects, making it simple to create stunning dashboards and Data Charts for your Android app. Because of its extensive documentation, cross-browser support, and consistent API, it is now easier than ever to add interactive graphs and responsive charts to your website. Without further ado, let’s get started with the tutorial!

Core Requirements

Before we start with the steps on embedding FusionCharts in an Android app, we need to make sure that we have the following components downloaded and installed on our local machine:

Embedding FusionCharts and Creating Charts in an Android App

For a demonstration, we will embed FusionCharts in an Android app and create the following three types of charts:
  • Column 2D chart, to showcase the quarterly revenue at Harry’s SuperMart
  • Pie 2D chart, to showcase the number of visitors for different age groups for one year
  • Drill-down chart, to showcase the top 3 juice flavors for one year
Follow the steps given below to embed FusionCharts and create charts in an Android app:

Step 1

  • Launch Android Studio. The Create New Project window is displayed.
  • Create a new project and name it FusionCharts as shown in the image below.

Step 2

  • Select the target device from the list of form factors mentioned and the minimum SDK required for your application, as shown in the image below:

Step 3

  • Create an activity for the mobile. The Activity class is a code block that supports the screen and the UI. For our project, we will select Empty Activity, as shown in the image below:
  • When the activity is selected, click Next.
  • Click Finish.
The image below shows the project structure created so far:

Step 4

  • From the res folder, select the layout folder, and open the activity_main.xml file.
  • Copy the code given below, for setting the layout of the application, and paste it in the activity_main.xml file.
< ?xml version="1.0" encoding="utf-8"?>

<linearlayout xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:tools="https://schemas.android.com/tools"
   android:id="@+id/activity_main"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="com.fusioncharts.app.fusiondemo.MainActivity"
   android:orientation="vertical"
   android:baselineAligned="false">

   <tablerow android:layout_width="350dp"
       android:layout_height="wrap_content"
       android:orientation="horizontal">
       <button android:text="Column"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/button_column"
           android:layout_gravity="left"
           android:onClick="showcolumn"></button>

       <button android:text="Pie"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/button_pie"
           android:onClick="showpie"></button>

       <button android:text="Drilldown"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/button_drilldown"
           android:layout_gravity="right"
           android:onClick="showdrilldown"></button>
   </tablerow>
   <webview android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/webView"></webview>
</linearlayout>
The image below shows the layout of the application created when the above code is executed. This layout can be further customized as required.

Step 5

  • From the java folder, select the com.fusioncharts.app.demo folder, and open the MainActivity.java file.
  • Copy the following code in the MainActivity.java file.
package com.fusioncharts.app.fusiondemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends Activity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   }
   public void showcolumn(View a) {
       if (a.getId() == R.id.button_column) {
           WebView webView= (WebView)findViewById(R.id.webView);
           webView.getSettings().setJavaScriptEnabled(true);
           webView.setWebChromeClient(new WebChromeClient());
           webView.loadUrl("file:///android_asset/index.html");
       }
   }
   public void showpie(View a) {
       if (a.getId() == R.id.button_pie) {
           WebView webView= (WebView)findViewById(R.id.webView);
           webView.getSettings().setJavaScriptEnabled(true);
           webView.setWebChromeClient(new WebChromeClient());
           webView.loadUrl("file:///android_asset/pie.html");
       }
   }
   public void showdrilldown(View a) {
       if (a.getId() == R.id.button_drilldown) {
           WebView webView= (WebView)findViewById(R.id.webView);
           webView.getSettings().setJavaScriptEnabled(true);
           webView.setWebChromeClient(new WebChromeClient());
           webView.loadUrl("file:///android_asset/drilldown.html");
       }
   }
}
After adding the above code in the MainActivity.java file, you’ll notice that each button-click loads an HTML page inside the webview. The subsequent steps talk about how these HTML pages are included.

Step 6

From the app folder, select New > Folder > Assets Folder, as shown in the image below: The New Android Component window opens.

Step 7

  • Select the target Source for your Assets Folder, as shown in the image below:
  • Click Finish

Step 8

  • The Copy window will appear. Insert the FusionCharts library files in the Assets folder. The image below shows the fusioncharts.js file will be copied into the Assets folder.
  • Include all the other library files in the same way.

Step 9

  • Create HTML files for each chart type to be rendered.
  • In the case of the column 2D chart, copy the following code into the HTML file and save it in the assets folder.
<html>
<head>
 <title>My first chart using FusionCharts Suite XT</title>
 <script type="text/javascript" src="fusioncharts.js"></script>
 <script type="text/javascript" src="fusioncharts.charts.js"></script>
 <script type="text/javascript" src="fusioncharts.theme.fint.js"></script>
 <script type="text/javascript">
 FusionCharts.ready(function(){
    var revenueChart = new FusionCharts({
        "type": "column2d",
        "renderAt": "chartContainer",
        "width": "260",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "caption": "Quarterly revenue for last year",
                "subCaption": "Harry's SuperMart",
                "palettecolors": "#2874A6",
                "useplotgradientcolor": "0",
                "yAxisName": "Revenues (In USD)",
                "theme": "fint",
                "showvalues": "0",
                "yaxismaxvalue": "40000",
                "yaxisminvalue": "0"
            },
            "data": [{
                    "label": "Q1",
                    "value": "16000"
                },
                {
                    "label": "Q2",
                    "value": "25300"
                },
                {
                    "label": "Q3",
                    "value": "10140"
                },
                {
                    "label": "Q4",
                    "value": "19140"
                }
            ]
        }
    });
    revenueChart.render();
 })
 </script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>
  • For the pie 2D chart, copy the following code into the HTML file and save it in the assets folder.
<html>
<head>
 <title>My first chart using FusionCharts Suite XT</title>
</head>
<body>
 <div id="chartContainer">FusionCharts XT will load here!</div>
 <script src="fusioncharts.js"></script>
 <script src="fusioncharts.charts.js"></script>
 <script type="text/javascript">
 FusionCharts.ready(function(){
    var ageGroupChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chartContainer',
        width: '270',
        height: '290',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Visitors by Age Group",
                "subCaption": "Last year",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "pieradius": "40",
                "enableSmartLabels": "1",
                "startingAngle": "0",
                "showPercentValues": "1",
                "showPercentInTooltip": "0",
                "decimals": "1",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
                "showHoverEffect": "1",
                "showLegend": "1",
                "legendBgColor": "#ffffff",
                "legendBorderAlpha": '0',
                "legendShadow": '0',
                "legendItemFontSize": '10',
                "legendItemFontColor": '#666666'
            },
            "data": [{
                    "label": "Teenage",
                    "value": "1250400"
                },
                {
                    "label": "Adult",
                    "value": "1463300"
                },
                {
                    "label": "Mid-age",
                    "value": "1050700"
                },
                {
                    "label": "Senior",
                    "value": "491000"
                }
            ]
        }
    }).render();
});
 </script>
</body>
</html>
  • For the drill-down chart, copy the following code into the HTML file and save it in the assets folder.
<html>
<head>
  <title>My first chart using FusionCharts Suite XT</title>
  <script type="text/javascript" src="fusioncharts.js"></script>
  <script type="text/javascript" src="fusioncharts.charts.js"></script>
  <script type="text/javascript">
FusionCharts.ready(function() {
    var salesChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chartContainer',
        width: '260',
        height: '290',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Top 3 Juice Flavors",
                "subcaption": "Last year",
                "xaxisname": "Flavor",
                "yaxisname": "Amount (In USD)",
                "numberprefix": "$",
                "palettecolors": "#008ee4",
                "canvasbgalpha": "0",
                "canvasborderalpha": "0",
                "useplotgradientcolor": "0",
                "showplotborder": "0",
                "placevaluesinside": "1",
                "valuefontcolor": "#ffffff",
                "captionpadding": "20",
                "showaxislines": "1",
                "axislinealpha": "20",
                "divlinealpha": "20",
                "showborder": "1",
                "bgalpha": "0",
                "animation": "0"
            },
            "data": [{
                "label": "Apple",
                "value": "810000",
                "link": "newchart-xml-apple"
            }, {
                "label": "Cranberry",
                "value": "620000",
                "link": "newchart-xml-cranberry"
            }, {
                "label": "Grapes",
                "value": "350000",
                "link": "newchart-xml-grapes"
            }],
            "linkeddata": [{
                "id": "apple",
                "linkedchart": {
                    "chart": {
                        "caption": "Apple Juice - Quarterly Sales",
                        "subcaption": "Last year",
                        "xaxisname": "Quarter",
                        "yaxisname": "Amount (In USD)",
                        "numberprefix": "$",
                        "palettecolors": "#008ee4",
                        "canvasbgalpha": "0",
                        "canvasborderalpha": "0",
                        "useplotgradientcolor": "0",
                        "showplotborder": "0",
                        "placevaluesinside": "1",
                        "valuefontcolor": "#ffffff",
                        "captionpadding": "20",
                        "showaxislines": "1",
                        "axislinealpha": "20",
                        "divlinealpha": "20",
                        "showborder": "1",
                        "bgalpha": "0",
                        "animation": "0"
                    },
                    "data": [{
                        "label": "Q1",
                        "value": "157000"
                    }, {
                        "label": "Q2",
                        "value": "172000"
                    }, {
                        "label": "Q3",
                        "value": "206000"
                    }, {
                        "label": "Q4",
                        "value": "275000"
                    }]
                }
            }, {
                "id": "cranberry",
                "linkedchart": {
                    "chart": {
                        "caption": "Cranberry Juice - Quarterly Sales",
                        "subcaption": "Last year",
                        "xaxisname": "Quarter",
                        "yaxisname": "Amount (In USD)",
                        "numberprefix": "$",
                        "palettecolors": "#008ee4",
                        "canvasbgalpha": "0",
                        "canvasborderalpha": "0",
                        "useplotgradientcolor": "0",
                        "showplotborder": "0",
                        "placevaluesinside": "1",
                        "valuefontcolor": "#ffffff",
                        "captionpadding": "20",
                        "showaxislines": "1",
                        "axislinealpha": "20",
                        "divlinealpha": "20",
                        "showborder": "1",
                        "bgalpha": "0",
                        "animation": "0"
                    },
                    "data": [{
                        "label": "Q1",
                        "value": "102000"
                    }, {
                        "label": "Q2",
                        "value": "142000"
                    }, {
                        "label": "Q3",
                        "value": "187000"
                    }, {
                        "label": "Q4",
                        "value": "189000"
                    }]
                }
            }, {
                "id": "grapes",
                "linkedchart": {
                    "chart": {
                        "caption": "Grape Juice - Quarterly Sales",
                        "subcaption": "Last year",
                        "xaxisname": "Quarter",
                        "yaxisname": "Amount (In USD)",
                        "numberprefix": "$",
                        "palettecolors": "#008ee4",
                        "canvasbgalpha": "0",
                        "canvasborderalpha": "0",
                        "useplotgradientcolor": "0",
                        "showplotborder": "0",
                        "placevaluesinside": "1",
                        "valuefontcolor": "#ffffff",
                        "captionpadding": "20",
                        "showaxislines": "1",
                        "axislinealpha": "20",
                        "divlinealpha": "20",
                        "showborder": "1",
                        "bgalpha": "0",
                        "animation": "0"
                    },
                    "data": [{
                        "label": "Q1",
                        "value": "45000"
                    }, {
                        "label": "Q2",
                        "value": "72000"
                    }, {
                        "label": "Q3",
                        "value": "95000"
                    }, {
                        "label": "Q4",
                        "value": "108000"
                    }]
                }
            }]
        }
    });
    salesChart.render();
});

</script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

Step 10

  • Click Run, to execute the application.
  • If all steps have been followed correctly, the output will be rendered as shown in the image below: Note: The output shown below is three different views for the respective charts. But, only one gets displayed at a time.

Building Your Own .apk File

Follow the steps given below to build your own .apk file:
  • From the Build menu, select the Build APK option, as shown in the image below:
If you find any difficulty in rendering the chart or you see any errors in your code, click here to download the complete source code of the sample project we have created for this tutorial.
Ayan Bhadury and Dishank Tiwari

View Comments

  • Until now, you didnt develop fusionchart natively coded for android/iOS...
    you just simply put it into webview...

    other charting libraries offer it, like highchart...

    I love using fusionchart in web since 2013, when I was a web developer'
    now I am an android developer now, and I want to see fusionChart natively in android/iOS asap...

Leave a Comment
Share
Published by
Ayan Bhadury and Dishank Tiwari
Tags: AndroidAndroid applicationAndroid StudioFusionChartsrendering FusionCharts in Android Application
8 years ago

Recent Posts

Pie Charts: A Slice of Data You Can’t Ignore

Ever had a data set that seemed more complicated than a Rubik's cube? You’re not…

3 weeks ago

Venn Diagrams: A Simple Yet Powerful Tool for Visualizing Relationships

We’ve all seen them in textbooks or presentations—those overlapping circles that simplify complex information into…

1 month ago

Announcing FusionCharts v4.1: Elevate Your Data Visualization Experience!

We’re excited to announce the upcoming release of FusionCharts v4.1—a groundbreaking step forward in the…

1 month ago

Bubble Maps: Visualizing Data Like Never Before

Have you ever been overwhelmed by a massive data set and wondered, "How do I…

1 month ago

Stock Charts: Mastering the Art of Visualizing Financial Data

If you’ve ever tried to make sense of the stock market, you’ve probably come across…

2 months ago

What is a Bar Chart Used For?

Imagine you’re comparing the sales performance of your top product lines across different regions, or…

3 months ago