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.


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


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.


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 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 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:


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 was loaded. Also, check if the path to fusioncharts.js and file is correct, and whether the file exists in that location.

Leave a Comment