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.

Visual Basic .Net is one of the widely used object-oriented programming language, implemented on the .NET framework. We’ve already got detailed documentation on how to create charts in VB.NET using the FusionCharts VB.NET wrapper.

This tutorial showcases how you can render FusionCharts in Visual Basic .NET using database.

Let’s get started with the requirements and the steps for rendering FusionCharts in VB.NET using database.

System Requirements

To start rendering charts in VB.NET, we need to make sure that we have the following components downloaded on our local machine:

Creating ASP.NET application in Visual Basic

Follow the steps given below to create ASP.NET application using VB:

Step 1: Open Visual Studio. Click File->New. The File menu appears. In the menu Select Project. Refer to the image below:

Create new project_620

Creating new Project

Step 2: Select Visual Basic from the installed templates. Select ASP.NET application as shown in the image below:

Selecting template_620

Select ASP.NET Web Application as project type

Step 3: Create a project hierarchy named MultiSeriesChartFromDatabaseFromVB. Refer to the image below:

Project-hierarchy_320

Project hierarchy

Creating a Database

Here we’ll create a multi-series column chart using data from database. The chart will showcase comparison between the factories’ output w.r.t quality. Following are the steps to create a multi-series column chart in VB.NET.

Step 1: Create a database (name of the database is FactoryDb in our case) with two tables which showcases date wise production output of 3 different factories. The image below shows the schema diagram for the table:

Database structure_620

Schema Diagram for the Database

Step 2: Add the App_Data ASP.NET folder into the created project.
Click (right click) Project_Name -> Select Add
Click Add ASP.NET Folder option -> Select App_Data
Refer to the image below:

Adding-App_Data-folder_620

Adding App_Data ASP.NET folder

Step 3: Finally, insert FactoryDb in App_Data folder.

The database is created and is ready to connect. Next, we will see how to connect with the database.

Establish Database Connection

To hold the connection property in a centralized location, the connection properties should be defined using <connectionStrings> tag in web.config file. Web.config file is by default created within the project for holding the configurations of web application. Follow the steps below to define the connection property in web.config file:

  • Open Web.config file and locate <configuration> tag
  • Add <connectionStrings> tag after <configuration> tag
  • Define <connectionStrings> as shown below:
  • Save the Web.config file

Add .aspx File for Creating Charts

Step 1: Add a folder named scripts inside the project and include all the FusionCharts js files into the scripts folder. The folder structure of the project is shown in image below:

Adding--Scripts-folder_320

Add scripts folder

Step 2: Add FusionCharts.dll (as a reference) into the project to use FusionCharts VB.NET wrapper. To add FusionCharts.dll as a reference:

  • Right click on References->Select Add References. Refer to the image below:

adding-reference_320

Add Reference to the project

  • Selecting Add Reference in above step will open a Reference Manager dialogue box. Search for FusionCharts.dll in your local machine and add it into this box. Refer to the image below:

Adding fusioncharts dll_620

Add FusionCharts reference within the Project

Step 3: Add a new file (.aspx) named “Multiseriesdemo” within the project hierarchy.

Step 4: Include the fusioncharts.js and fusioncharts.charts.js libraries within <head> tag of Multiseriesdemo.aspx file as shown below:

Step 5: Include the literal control within the newly created aspx page as shown below:

Step 6: In Multiseriesdemo.aspx.vb, add the following namespaces with the existing ones:

  • Imports System.Data.Odbc
  • Imports FusionCharts.Charts
  • Imports System.Data.OleDb
  • Imports System.Configuration

Step 7: Within Multiseriesdemo.aspx.vb, define a class DbConn and include the code given below:

Step 8: In the Page_Load event handler write the following code to recreate the JSON structure with the values fetched from database. Pass the JSON string to chart constructor and call the Render() method.

Step 9: Right click on Multiseriesdemo.aspx file and select Set As Start Page from the options listed.

set-as-start_500

Start Page option

Step 10: Now, you are ready to render FusionCharts in your visual basic. Press ctrl + f5 to run and check the output of the chart as shown in image below:

final output_620

Multi-Series Column 2D Chart

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.

FusionCharts Suite XT includes an extensive range of charts, gauges, and maps that you can use to plot all types of static and real-time data. Not just that, the suite can be extended to be used with various JavaScript libraries for developing web and mobile applications.

This article talks about how FusionCharts can be used with the MEAN stack—a collection of JavaScript-based technologies—for rendering the various charts that are a part of the FusionCharts library. We will be talking about how you can create charts by passing chart data directly and by fetching data from a database.

Creating Charts Using FusionCharts Suite XT with the MEAN Stack

The MEAN Stack

MEAN is an acronym for MongoDB, ExpressJS, AngularJS and Node.js. The MEAN stack, like said earlier, is a full-stack of JavaScript-based technologies that are used to develop web applications; it is a complete development toolkit that can be used for the client-side as well as the server-side execution environments.

Let’s take a look at how you can start with installing and setting up the MEAN stack and go on to using it with FusionCharts to create charts.

Installing the MEAN Stack and Setting Up Your Project

In order to build an application, the four components of the MEAN stack have to be first installed individually.

Installing Node.js
Download the relevant Node.js installer for your operating system from here and follow the instructions to install it on your system. For Windows, the installer will update the path variable to include the location for the node executable.

To verify installation, open a terminal and the execute the command shown below:

Executing this command will tell you the node.js version installed.

Next, run the node command, after which the prompt will change. When the prompt changes, execute the following command on the command line:

If the output after executing this command is ‘Node is working’, your installation has been successful.

Installing MongoDB
MongoDB is an open-source document-based database that provides high performance, high availability, and can be scaled automatically. MongoDB distributions can be downloaded from here and installed in your system.

Installing Express.js
Express.js is a web application framework for Node.js that comes with a robust set of features for developing mobile and web applications. After you’ve installed Node.js, create a working directory to save your application. The steps are outlined below:

  1. Create a new directory, named fusioncharts-demo.
  2. Change the working directory to fusioncharts-demo.
  3. Create the package.json file for your application.
  4. Install Express.js for your application. Install it in the fusioncharts-demo directory and save it in the dependencies list.

Installing AngularJS
You can install AngularJS via Bower (a package management software).
If you don’t have Bower installed in your system, execute the following command to install it:

Now, to install AngularJS via Bower, execute the following command:

Installing FusionCharts

To integrate FusionCharts for your project, after the MEAN stack has been installed and setup, you need to install the FusionCharts Suite XT and the Angular-FusionCharts plugin.

We’ll be installing these using the Bower package management software.

Installing the FusionCharts Package
To install the FusionCharts package using Bower, execute the following command:

Click here to read more on installation via Bower.

Installing the Angular-FusionCharts Plugin
To install the Angular-FusionCharts plugin using Bower, execute the following command:

Click here to read more about the Angular-FusionCharts plugin.
Click here to read more on installation via Bower.

Creating a Simple Chart Using FusionCharts with the MEAN Stack

Now that the MEAN stack and FusionCharts package have been installed, it’s time we tried out rendering a simple chart using the combination.

Rendering a chart using FusionCharts and the MEAN stack is a 4 step process, as outlined below:

Step 1
Create a JS file, server.js, and save it in the fusioncharts-demo directory.
Copy the code given below and paste in the server.js file:

The server file is ready.

Step 2
Create a folder, public, under the fusioncharts-demo directory.
Create an HTML file, index.html, and save it in the fusioncharts-demo/public directory.

Add the code given below in the index.html file:

Step 3
Define the myctrl controller created in Step 2 using the ng-controller directive.
Create a folder, webapp, under the fusioncharts-demo directory.
Create a JS file, app.js, and save it in the fusioncharts-demo/webapp directory.
Copy the code given below and paste it in the app.js file:

Before we execute the final steps, let’s take a quick look at the directory structure created:

directory-structure

Step 4
Run the server.js file from the terminal, as shown below:

This will start the server.

Step 5
To test the app created, open your browser, and type http://localhost:3000 in the address bar.
Your chart should now render, as shown in the image below:

app-test

Creating Charts Using FusionCharts and MEAN Stack Using Data from a Database

We will now see how we can create charts using Express.js and MongoDB.

The steps for creating charts using FusionCharts and the MEAN stack and by fetching data from a database are outlined below:

  1. Install the mongoose client and establish connection to the MongoDB database
  2. Create a data model
  3. Populate data in the MongoDB database
  4. Create REST API for data retrieval
  5. Create a method to fetch data using the angular controller
  6. Create a view for rendering the chart

As an example, we’ll be writing the code to render a chart that shows the 10 most populous countries of the world. The chart can be drilled down further to show the 10 most populous cities in each country.

We will now cover each of the steps listed above in detail, with respect to the example.

Step 1: Installing the Mongoose client and establishing connection to the MongoDB database

Step 1.1
Install the Mongoose client. Mongoose translates the data in your database to JavaScript objects that can be used in your application.
Everything in Mongoose starts with a schema. Each schema maps to a MongoDB collection and defines the shape of the documents within that collection.
To install Mongoose, execute the following command at the terminal:

Step 1.2
Create a JS file, dbconnection.js, and save it under the fusioncharts-demo directory.
The code given below will establish connectivity with the MongoDB database.
Copy the code below and paste it in the dbconnection.js file.

Step 2: Creating a data model

Models are advanced constructors compiled from schema definitions. Instances of these models are documents that can be saved in and retrieved from the database.

Step 2.1
Create a folder, models, under the fusioncharts-demo directory.
Create a JS file, world.js, and save it in the fusioncharts-demo/models directory.
Add the code given below to the world.js file:

Step 2.2
Create a JSON file, data.json, and save it under the fusioncharts-demo directory.
The data to be populated in the database is passed as an array of JSON objects, as shown in the code below.
Add this code to the data.json file:

Our data model is now ready.

Step 3: Populating data in the MongoDB database

We’ll use the mongoimport command, as shown below, to create a MongoDB database and populate in it the data contained within the data.json.

This command takes the following information:

  1. name of the database ( -d fusioncharts_demo )
  2. name of the collection ( -c worlds )
  3. type of the input data ( –type json )
  4. location of the file containing data ( –file data.json )
  5. option to indicate that the input is a JSON array ( –jsonArray )

Step 4: Creating the REST API for data retrieval

Let us expose the REST API at the URL /worlddata.

This will fetch the data from the database and send a response object to the client, invoking the API.

Add the code given below to the server.js file (fusioncharts-demo/server.js):

Step 5: Creating a method to fetch the data from the database using the angular controller

Using the REST API (i.e. /worlddata), we’ve got the raw data.
Next, we need to create the fusioncharts data source inside the angular controller myctrl.
Add the code given below to the app.js file (fusioncharts-demo/webapp/app.js):

Step 6: Rendering the chart

Before we look at the template (/fusioncharts-demo/public/index.html), let us look at the directory structure we have created so far:

directory-structure-2a

Step 6.1
Now that the backend is ready, we need to create views for rendering the chart.
Add the code given below to the index.html file (fusioncharts-demo/public):

Step 6.2
Run the server.js file from the terminal, as shown below:

This will start the server.

Step 6.3
To test the app created, open your browser, and type http://localhost:3000 in the address bar.
Your chart should now render, as shown in the image below:

final-output-2(fetching-data-from-the-database)

FusionCharts Suite XT has always provided better charting solutions to ease the process of data visualization. Our team frequently comes up with new ways to implement FusionCharts according to your usage requirements, like in this tutorial.

This tutorial showcases how you can render charts using Fusioncharts in Microsoft Xamarin.

Xamarin is a platform to write native Android, iOS and Windows apps with native user interfaces. These codes can be shared across multiple platforms. The Xamarin platform also supports development of mobile applications for the above mentioned platforms, based on the .NET framework.

In March 2016, Microsoft acquired Xamarin with the goal of bringing cross platform mobile development to the wider Microsoft developer community. Xamarin Forms is now available to all Visual Studio users for free.

Let’s now get started with the requirements and the steps to render charts using FusionCharts in Microsoft Xamarin.

Core Requirements for Setup

Before we start with creating and rendering FusionCharts using the Xamarin platform, we need to make sure that we have the following components downloaded on our local machine:

Creating the WebView App Project

We’ll create a simple chart that showcases the monthly revenue for Harry’s SuperMart for a period of one year. Following are the steps to be followed for creating a column 2D chart using the Xamarin platform:

Step 1: Create a new project.
Click File -> New. The File menu renders.
Select Project

The image below outlines the steps:

xamarin_project

Step 2: Select Android under the installed template within Visual C# and select WebView App(Android). Refer to the image below:

xamarin

Step 3: Give a name to the project (FusionCharts in our case) and save it to the desired location in your system.

Step 4: From the View menu, open Solution Explorer and locate the assets folder.

Step 5: Insert the fusioncharts.js and fusioncharts.charts.js files within the Assets folder. Refer to the image below:

xamarin_folder_structure

Step 6: Search for the RazorView.cshtml file in Views folder, which is a view component and will be used for rendering the chart within the WebView component.

Step 7: In RazorView.cshtml file create a label and a button within a <div> tag. Place it in the <form> tag as shown below:

Step 8: Include the fusioncharts.js and fusioncharts.charts.js libraries within <head> tag of RazorView.cshtml.

Step 9: Declare a JavaScript function, getChart(), and define the entire FusionCharts JSON code (chart data) there.

Step 10: In MainActivity.cs file create a WebView object instance. Set the JavaScript.Enabled property to true for WebView settings, as shown below:

Step 11: Render the view that has been generated from RazorView. This can be done by including the following code in MainActivity.cs:

Step 12: Load the rendered HTML into the view with a base URL that points to the root of the bundled Assets folder, as shown in the code below:

Step 13: Define the subclass of the WebViewClient to render the view generated from RazorView.cshtml as shown below:

Step 14: Save the application and run the project using the Android_Accelerated_x86 6.0 emulator. Now, you are ready to run the application created. While you are in emulator, press ctrl + f5. to run and start the FusionCharts app as shown in image below:

xamarin_fc_app

Viewing the Chart

We are all set to render the chart now!
All you need to do is click the Chart button, you should be able to see your output.
The output should look as shown in the image below:

xamarin_output

FusionCharts Suite XT includes a wide plethora of charts that ease the process of data visualization tremendously. Another plus with this suite is that the JavaScript-based charts use the simple XML and JSON data formats for feeding data.

FusionCharts Suite XT can be also used with a number of server-side and client-side technologies, allowing developers to work with the technology of their choice.

This article introduces another new dimension to using the suite—creating charts from the FusionCharts library using JavaServer Faces.

JavaServer Faces is a Java specification or a framework for building component-based user interfaces for web applications. The Javaserver Faces API is designed to simplify the development of the user interface for a web application. FusionCharts Suite XT can also be rendered in a JSF page using the Java Wrapper.

Let’s now get started with the requirements and the steps for using FusionCharts using JavaServer Faces.

Set Up The Requirements

To get the code (for creating charts) in this blog working, we need to first download the following components on our local machine:

Creating a Basic Chart

By following the steps in this article, we will create an area chart which will showcase the sales of liquor in a store for each day of a week. The sales figures will be plotted along the y-axis and the days will be plotted along the x-axis.

To create a basic chart, we first need to create a chart object. Follow the steps mentioned below and you’ll be done with the creation of chart object.

Step 1: Create a Java class in your project. The created class will return the entire FusionCharts structure that gets rendered in an xhtml page.

Note: Include the FusionCharts.java file in the same folder where you have created the above java class. If you have placed the FusionCharts java wrapper inside a different package, import it into the Java class.

Step 2: Create an xhtml page that will render the required chart in the browser.

Finally, include the library files. Create a folder, resources under root folder of your local machine. Within the resources folder, create another folder, js. Include the JavaScript files inside the js folder.

The folder structure looks as shown below:

folder structure

Viewing the Chart

Now, as you are done with all the steps needed to render a chart, simply run the .xhtml file to render the chart.

The output looks as shown below:

sc6

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.

Was There a Problem Rendering Charts?

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

  • The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.
  • If the chart does not show up at all, check if the fusioncharts.js and fusioncharts wrapper FusionCharts.java was loaded. Also, check if the path to fusioncharts.js and FusionCharts.java file is correct, and whether the file exists in that location.

Creating Charts using JSP and MongoDB

FusionCharts offers a set of JavaScript charts that use simple XML and JSON formats to feed data to the graphs. FusionCharts provides a large variety of different types of charts that you can use in your demos.

JSP is one of the most widely used technologies that help software developers create dynamically generated web pages. While we already have detailed documentation on how JSP can be easily integrated with FusionCharts using the FusionCharts-JSP wrapper, this article talks about how you can use the MongoDB database along with FusionCharts and JSP for rendering charts.

MongoDB, one of the most popular document-oriented databases, that also stores data records as documents, which helps in handling big data and provides high scalability and performance. In this article, we’ll explore how to integrate JSP with MongoDB and create a chart using FusionCharts. We choose MongoDB over others because it is an open-source and document-oriented. It works on the concept of document and collections, stored data in the JSON format and can also vary in structure as per the requirement.

Now, as we have covered the basics sufficiently, let’s get started with the steps to create charts using JSP and MongoDB…

To get the code (for creating charts) in this blog working, we need to first install the following components:

Make sure that all the above mentioned components have been downloaded in your system.

To setup MongoDB on your operating system, please refer to the documentation here.

Next, we move on to how you can configure MongoDB and create a database

Only three steps and we will be done with the database part!

To know how you can set up MongoDb on your OS, refer to the documentation here.

Step 1: Create a json file that contains the data that goes into the database and will be used as the source data for the chart. We’ll name this file as country.json.

Step 2: Import the .json file created in Step 1 into mongodb using the “mongoimport” command as shown below.

import

Step 3: Next, open another shell to run the “mongo” command.

mongo

Step 4: Now we need to verify if our data has been imported correctly into the database or no. To do this, you need to execute the following commands:

  • Use the “show dbs” command to see your database. A list of the databases present is shown.
  • From this list, select the required database using the “use ” command.
  • Next, use the “show collections” command to see the collections inside your database.
  • For seeing the contents of a specific collection, execute the “db..find().pretty()” command.

population

You can import this demo database from here.

With this, we are done with creating the database.

Now we move on to creating chart objects and then finally rendering the chart.

Step 1: Create a JSP page and import all the packages in a script tag.

The code below imports the com.google.gson package that enables the conversion from JSON to Java and Java to JSON. Before getting into the code, let’s first talk about the google-gson library.

The google-gson library:

  • Provides the toJson() and fromJson() methods for converting Java objects to JSON and the other way round
  • Allows conversion of the already existing unmodifiable objects to and from JSON
  • Supports Java Generics extensively
  • Allows custom representations of objects
  • Supports arbitrarily complex objects (with deep inheritance hierarchies and extensive use of generic types)

Now, here is the code to import the com.google.gson package:

Click here for more information on google-gson package.

Step 2: Establish database connectivity to fetch values from the database and place them inside a hashmap, as shown in the code snippet below.

Once the database connectivity is established, structure your data in the Fusioncharts format and convert the java objects to their JSON representation using the GSON library.

Step 3: Finally, create a constructor and pass the necessary parameters to render the chart.

Given below is the full JSP code of the example we worked on:

Finally, simply run your JSP file using MongoDB.

You output looks like as shown below:

sc1

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

Was There a Problem Rendering Charts?

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

  • The chart ID should be unique for each chart rendered on the same page. Otherwise, it will result in a JavaScript error.
  • If the chart does not show up at all, check if the fusioncharts.js and fusioncharts wrapper FusionCharts.java was loaded. Also, check if the path to fusioncharts.js and FusionCharts.java file is correct, and whether the file exists in that location.