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 Charts, a feature of MongoDB, allows for easy visualization of data stored in MongoDB databases. 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.

What are MongoDB charts?

MongoDB Charts is a data visualization tool built for MongoDB. It enables users to generate, distribute, and integrate visual representations of their data. Its standout feature is its smooth integration with MongoDB, guaranteeing real-time data visualization as your databases evolve.

Advantages of MongoDB Charts

MongoDB Charts provides numerous advantages compared to traditional relational databases:

• Comprehensive cloud-based developer data platform.
• Flexible document schemas for versatile data structures.
• Widely supported with code-native data access for easy integration.
• Change-friendly design accommodating dynamic data.
• Powerful querying and analytics capabilities.

Disadvantages of MongoDB Charts

Here are several disadvantages of MongoDB Charts:

• Transactions are limited to each document, which can be problematic for applications.
• MongoDB imposes a maximum document size limit of 16 MB
• MongoDB doesn’t support joins in the same way as relational databases

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

Creating Charts with JSP and MongoDB: A Step-by-Step Guide

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

• MongoDB [Download Link]
• MongoDB Driver for Java [Download Link]
• FusionCharts Suite XT [Download Link]
• FusionCharts JSP Wrapper [Download Link]

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.

Quick MongoDB Setup: 3 Easy Steps

Setting up MongoDB is a straightforward process that can be completed in just a few steps.

Step 1: Database Source Data in JSON

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.

[{
 "label": "China",
 "value": 8800.0
}, {
 "label": "India",
 "value": 5800.0
}, {
 "label": "United States",
 "value": 4200.0
}, {
 "label": "Indonesia",
 "value": 6200.0
}, {
 "label": "Australia",
 "value": 7900
}, {
 "label": "Brazil",
 "value": 4400.0
}]

Step 2: Importing Step 1 .json File

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

Step 3: Run ‘Mongo’ in a New Shell

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

Step 4: Verifying Your Data

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 MongoDB charts.

How to Create and Render Charts

In this section, you’ll learn to create and render charts:

Step 1: JSP Page with Google Gson Library

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:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="com.mongodb.*" %>
<%@page import="java.util.*" %>
<%@page import="com.google.gson.*" %>
<%@page import="fusioncharts.FusionCharts" %>

Click here for more information on google-gson package.

Step 2: Database Connection

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

<%

//Make sure you have included MongoDB jar files in order to use the MongoDB java driver classes

         Mongo mongoClient = new Mongo("localhost" , 27017 );
   
         //connecting to the database
         DB db = mongoClient.getDB( "fusioncharts" );
         System.out.println("Connected to database successfully");
         
         //Hashmap is created to store the values from the database
         HashMap<String,Integer> labelValue = new HashMap<String,Integer>();
         
         //fetching the collection from the database
        DBCollection collection = db.getCollection("simpledata");
        
        //Selects the documents in a collection and returns a cursor to the selected        documents
         DBCursor cursor = collection.find();
         
         while(cursor.hasNext()) {
           
             DBObject o = cursor.next();
             
                String label = (String) o.get("label") ; 
                int value = ((Number) o.get("value")).intValue();
              labelValue.put(label, value);
            
                }
  %>

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: Construct Chart with Parameters

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

<%
    
            Gson gson = new Gson();
            
            // The 'chartobj' map object holds the chart attributes and data.
            chartobj.put("caption", "Split of Visitors by Age Group");
            chartobj.put("subCaption" , "Last year");
            chartobj.put("paletteColors" , "#0075c2");
            chartobj.put("bgColor" , "#ffffff");
            chartobj.put("showBorder" , "0");
            chartobj.put("theme","fint");
            chartobj.put("showPercentValues" , "1");
            chartobj.put("decimals" , "1");
            chartobj.put("captionFontSize" , "14");
            chartobj.put("subcaptionFontSize" , "14");
            chartobj.put("subcaptionFontBold" , "0");
            chartobj.put("toolTipColor" , "#ffffff");
            chartobj.put( "toolTipBorderThickness" , "0");
            chartobj.put("toolTipBgColor" , "#000000");
            chartobj.put("toolTipBgAlpha" , "80");
            chartobj.put("toolTipBorderRadius" , "2");
            chartobj.put("toolTipPadding" , "5");
            chartobj.put("showHoverEffect" , "1");
 
          // to store the entire data object
            ArrayList arrData = new ArrayList();
            for(Map.Entry m:labelValue.entrySet()) 
            {
                // to store the key value pairs of label and value object of the data object
                Map<String, String> lv = new HashMap<String, String>();
                lv.put("label", m.getKey().toString() );
                lv.put("value", m.getValue().toString());
                arrData.add(lv);             
            }
            //close the connection.
            cursor.close();
 
            //create 'dataMap' map object to make a complete FC datasource.
             Map<String, String> dataMap = new LinkedHashMap<String, String>();  
        /*
            gson.toJson() the data to retrieve the string containing the
            JSON representation of the data in the array.
        */         dataMap.put("chart", gson.toJson(chartobj));
         dataMap.put("data", gson.toJson(arrData));

            FusionCharts columnChart= new FusionCharts(
            "column2d",// chartType
                        "chart1",// chartId
                        "600","400",// chartWidth, chartHeight
                        "chart",// chartContainer
                        "json",// dataFormat
                        gson.toJson(dataMap) //dataSource
                    );
            %>
                            
            <%=columnChart.render()%>

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

<%-- 
    Document   : singleseries-mongodb-example
    Author     : fusioncharts
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="com.mongodb.*" %>
<%@page import="java.util.*" %>
<%@page import="com.google.gson.*" %>
<%@page import="fusioncharts.FusionCharts" %>

<%

         Mongo mongoClient = new Mongo("localhost" , 27017 );
   
         //connecting to the database
         DB db = mongoClient.getDB( "fusioncharts" );
         System.out.println("Connected to database successfully");
         
         //Hashmap is created to store the values from the database
         HashMap<String,Integer> labelValue = new HashMap<String,Integer>();
         
         //fetching the collection from the database
        DBCollection collection = db.getCollection("simpledata");
        
        //Selects the documents in a collection and returns a cursor to the selected documents
         DBCursor cursor = collection.find();

         while(cursor.hasNext()) {
           
             DBObject o = cursor.next();
             
                String label = (String) o.get("label") ; 
                int value = ((Number) o.get("value")).intValue();
              labelValue.put(label, value);
            
                }
  %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Creating Charts with Data from a Database - fusioncharts.com</title>

 
        <script src="fusioncharts.js"></script>
        <script src="fusioncharts.theme.fint.js"></script>
        <script src="fusioncharts.charts.js"></script>

    </head>
    <body>
         <div id="chart"></div>

        <%
         
            Gson gson = new Gson();
            
            // The 'chartobj' map object holds the chart attributes and data.
            chartobj.put("caption", "Split of Visitors by Age Group");
            chartobj.put("subCaption" , "Last year");
            chartobj.put("paletteColors" , "#0075c2");
            chartobj.put("bgColor" , "#ffffff");
            chartobj.put("showBorder" , "0");
            chartobj.put("theme","fint");
            chartobj.put("showPercentValues" , "1");
            chartobj.put("decimals" , "1");
            chartobj.put("captionFontSize" , "14");
            chartobj.put("subcaptionFontSize" , "14");
            chartobj.put("subcaptionFontBold" , "0");
            chartobj.put("toolTipColor" , "#ffffff");
            chartobj.put( "toolTipBorderThickness" , "0");
            chartobj.put("toolTipBgColor" , "#000000");
            chartobj.put("toolTipBgAlpha" , "80");
            chartobj.put("toolTipBorderRadius" , "2");
            chartobj.put("toolTipPadding" , "5");
            chartobj.put("showHoverEffect" , "1");
         
           // to store the entire data object
            ArrayList arrData = new ArrayList();
            for(Map.Entry m:labelValue.entrySet()) 
            {
                // to store the key value pairs of label and value object of the data object
                Map<String, String> lv = new HashMap<String, String>();
                lv.put("label", m.getKey().toString() );
                lv.put("value", m.getValue().toString());
                arrData.add(lv);             
            }
            //close the connection.
            cursor.close();
 
            //create 'dataMap' map object to make a complete FC datasource.
             Map<String, String> dataMap = new LinkedHashMap<String, String>();  
        /*
            gson.toJson() the data to retrieve the string containing the
            JSON representation of the data in the array.
        */         dataMap.put("chart", gson.toJson(chartobj));
         dataMap.put("data", gson.toJson(arrData));

            FusionCharts columnChart= new FusionCharts(
            "column2d",// chartType
                        "chart1",// chartId
                        "600","400",// chartWidth, chartHeight
                        "chart",// chartContainer
                        "json",// dataFormat
                        gson.toJson(dataMap) //dataSource
                    );
            %>
            
<!--    Step 5: Render the chart    -->                
            <%=columnChart.render()%>
        
    </body>
</html>

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

Conclusion

In conclusion, creating charts using JSP and MongoDB offers a powerful way to visualize data stored in MongoDB databases. By integrating FusionCharts with JSP and MongoDB, developers can easily render a variety of interactive charts for their web applications. MongoDB Charts, specifically designed for MongoDB, enhances the visualization experience by providing real-time data representation as databases evolve. This integration, leveraging the simplicity and scalability of MongoDB, along with the flexibility of FusionCharts, opens a world of possibilities for dynamic and engaging data visualization on the web.

Visualize Data Seamlessly with MongoDB Charts & JSP

Ready to create dynamic charts with MongoDB and JSP? Start visualizing your data today and elevate your web applications with FusionCharts. Dive into the integration process now!

FAQs

How to create a chart in MongoDB?

Use MongoDB Charts, a tool for visualizing data in MongoDB. It lets you make various types of charts (like bar, line, and pie charts) to visualize your MongoDB data.

How to connect JSP with MongoDB?

Connect JSP with MongoDB using the MongoDB Java driver. Download and include the driver in your JSP project. Use the MongoClient class to establish a connection to your MongoDB database. Use the MongoDB Java driver to perform operations like inserting, updating, and querying data.

How can data be visualized from MongoDB?

Visualize MongoDB data using MongoDB Charts. This tool is built for MongoDB and allows you to create different types of charts to visualize data stored in MongoDB databases.

What is a chart user in MongoDB?

A chart user can access MongoDB Charts and create, edit, and view charts. Chart users have different levels of access based on their roles and permissions. For instance, a user with the “Viewer” role can view charts but not create or edit them, while a user with the “Editor” role can create and edit charts.