Rendering FusionCharts in an Android Application

Android is a Linux-based mobile operating system developed by Google, primarily designed for smartphones and tablets. It was unveiled in 2007 and since then it has been the best selling OS for tablets and smartphones. Android provides access to a wide range of useful libraries and tools that can be used to build rich applications.

This tutorial will guide you on how you can embed FusionCharts in an Android native app.

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 demonstration, we will embed FusionCharts in an Android app and create the following three types of charts:

  • A column 2D chart, to showcase the quarterly revenue at Harry’s SuperMart
  • A pie 2D chart, to showcase the number of visitors for different age groups for one year
  • A 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.

create-new-project

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:

select-android-devices

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:

add-an-activity

  • When the activity is selected, click Next.
  • Click Finish.

The image below shows the project structure created so far:

android-project-structure

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.

The image below shows the layout of the application created when the above code is executed. This layout can be further customized as required.

layout

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.

Once you are done with adding the above code in the MainActivity.java file, you’ll notice that at each button click an HTML page will load 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:

create-assets-folder

The New Android Component window opens.

Step 7

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

configure-component

  • 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.

copy-window

  • Include all the other library files in the same way.

Step 9

  • Create HTML files for the each chart type to be rendered.
  • For the column 2D chart, copy the following code into the HTML file and save it in assets folder.

  • For the pie 2D chart, copy the following code into the HTML file and save it in assets folder.

  • For the drill-down chart, copy the following code into the HTML file and save it in assets folder.

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 3 different views for respective charts. Only one gets displayed at a time.

FC-output

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:

apk-file

If you find any difficulty in rendering the chart or you see any error in your code, click here to download the complete source code of the sample project we have created for this tutorial.

Leave a Comment