{"id":15650,"date":"2017-01-18T16:39:34","date_gmt":"2017-01-18T11:09:34","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=15650"},"modified":"2026-01-20T14:41:14","modified_gmt":"2026-01-20T09:11:14","slug":"creating-charts-using-jsp-mongodb","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/","title":{"rendered":"Create JSP and MongoDB Charts with FusionCharts Tutorial 2026"},"content":{"rendered":"<p>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.<\/p>\r\n\r\n<p>JSP is one of the most widely used technologies that help software developers create dynamically generated web pages. While we already have <a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/java\/your-first-chart-using-java\" target=\"_blank\" rel=\"noopener noreferrer\">detailed documentation<\/a> on how JSP can be easily integrated with FusionCharts using the FusionCharts-JSP wrapper, <b>this article talks about how you can use the MongoDB database along with FusionCharts and JSP for rendering charts.<\/b><\/p>\r\n\r\n<p>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.<\/p>\r\n\r\n<p>In this article, we&#8217;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.<\/p>\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#What_are_MongoDB_charts\" title=\"What are MongoDB charts?\">What are MongoDB charts?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Advantages_of_MongoDB_Charts\" title=\"Advantages of MongoDB Charts\">Advantages of MongoDB Charts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Disadvantages_of_MongoDB_Charts\" title=\"Disadvantages of MongoDB Charts\">Disadvantages of MongoDB Charts<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Creating_Charts_with_JSP_and_MongoDB_A_Step-by-Step_Guide\" title=\"Creating Charts with JSP and MongoDB: A Step-by-Step Guide\">Creating Charts with JSP and MongoDB: A Step-by-Step Guide<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Quick_MongoDB_Setup_3_Easy_Steps\" title=\"Quick MongoDB Setup: 3 Easy Steps\">Quick MongoDB Setup: 3 Easy Steps<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Step_1_Database_Source_Data_in_JSON\" title=\"Step 1: Database Source Data in JSON\">Step 1: Database Source Data in JSON<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Step_2_Importing_Step_1_json_File\" title=\"Step 2: Importing Step 1 .json File\">Step 2: Importing Step 1 .json File<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Step_3_Run_%E2%80%98Mongo_in_a_New_Shell\" title=\"Step 3: Run &#8216;Mongo&#8217; in a New Shell\">Step 3: Run &#8216;Mongo&#8217; in a New Shell<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Step_4_Verifying_Your_Data\" title=\"Step 4: Verifying Your Data\">Step 4: Verifying Your Data<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#How_to_Create_and_Render_Charts\" title=\"How to Create and Render Charts\">How to Create and Render Charts<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Step_1_JSP_Page_with_Google_Gson_Library\" title=\"Step 1: JSP Page with Google Gson Library\">Step 1: JSP Page with Google Gson Library<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Step_2_Database_Connection\" title=\"Step 2: Database Connection\">Step 2: Database Connection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Step_3_Construct_Chart_with_Parameters\" title=\"Step 3: Construct Chart with Parameters\">Step 3: Construct Chart with Parameters<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Was_There_a_Problem_Rendering_Charts\" title=\"Was There a Problem Rendering Charts?\">Was There a Problem Rendering Charts?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#Visualize_Data_Seamlessly_with_MongoDB_Charts_JSP\" title=\"Visualize Data Seamlessly with MongoDB Charts &amp; JSP\">Visualize Data Seamlessly with MongoDB Charts &amp; JSP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#FAQs\" title=\"FAQs\">FAQs<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#How_to_create_a_chart_in_MongoDB\" title=\"How to create a chart in MongoDB?\">How to create a chart in MongoDB?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#How_to_connect_JSP_with_MongoDB\" title=\"How to connect JSP with MongoDB?\">How to connect JSP with MongoDB?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#How_can_data_be_visualized_from_MongoDB\" title=\"How can data be visualized from MongoDB?\">How can data be visualized from MongoDB?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#What_is_a_chart_user_in_MongoDB\" title=\"What is a chart user in MongoDB?\">What is a chart user in MongoDB?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_are_MongoDB_charts\"><\/span>What are MongoDB charts?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nMongoDB 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.\r\n<h3><span class=\"ez-toc-section\" id=\"Advantages_of_MongoDB_Charts\"><\/span>Advantages of MongoDB Charts<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nMongoDB Charts provides numerous advantages compared to traditional relational databases:\r\n<ul>\r\n \t<li>Comprehensive cloud-based developer data platform.<\/li>\r\n \t<li>Flexible document schemas for versatile data structures.<\/li>\r\n \t<li>Widely supported with code-native data access for easy integration.<\/li>\r\n \t<li>Change-friendly design accommodating dynamic data.<\/li>\r\n \t<li>Powerful querying and analytics capabilities.<\/li>\r\n<\/ul>\r\n<h3><span class=\"ez-toc-section\" id=\"Disadvantages_of_MongoDB_Charts\"><\/span>Disadvantages of MongoDB Charts<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nHere are several disadvantages of MongoDB Charts:\r\n<ul>\r\n \t<li>Transactions are limited to each document, which can be problematic for applications.<\/li>\r\n \t<li>MongoDB imposes a maximum document size limit of 16 MB<\/li>\r\n \t<li>MongoDB doesn&#8217;t support joins in the same way as relational databases<\/li>\r\n<\/ul>\r\n<h4>Now, as we have covered the basics sufficiently, let&#8217;s get started with the steps to create charts using JSP and MongoDB&#8230;<\/h4>\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_Charts_with_JSP_and_MongoDB_A_Step-by-Step_Guide\"><\/span>Creating Charts with JSP and MongoDB: A Step-by-Step Guide<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo get the code (for creating charts) in this blog working, we need to first install the following components:\r\n<ul>\r\n \t<li>MongoDB [<a href=\"https:\/\/www.mongodb.com\/download-center#community\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\r\n \t<li>MongoDB Driver for Java [<a href=\"https:\/\/mongodb.github.io\/mongo-java-driver\/\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\r\n \t<li>FusionCharts Suite XT [<a href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\r\n \t<li>FusionCharts JSP Wrapper [<a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/java\/your-first-chart-using-java\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\r\n<\/ul>\r\nMake sure that all the above mentioned components have been downloaded in your system.\r\n\r\nTo setup MongoDB on your operating system, please refer to the documentation <a href=\"https:\/\/docs.mongodb.com\/manual\/installation\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.\r\n\r\n<b>Next, we move on to how you can configure MongoDB and create a database<\/b>\r\n\r\n<b>Only three steps and we will be done with the database part!<\/b>\r\n\r\nTo know how you can set up MongoDb on your OS, refer to the documentation <a href=\"https:\/\/docs.mongodb.com\/manual\/installation\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.\r\n<h2><span class=\"ez-toc-section\" id=\"Quick_MongoDB_Setup_3_Easy_Steps\"><\/span>Quick MongoDB Setup: 3 Easy Steps<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nSetting up MongoDB is a straightforward process that can be completed in just a few steps.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Database_Source_Data_in_JSON\"><\/span><strong>Step 1: <\/strong>Database Source Data in JSON<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nCreate a json file that contains the data that goes into the database and will be used as the source data for the chart. We\u2019ll name this file as <b>country.json<\/b>.\r\n<pre class=\"lang:javascript\">[{\r\n\t\"label\": \"China\",\r\n\t\"value\": 8800.0\r\n}, {\r\n\t\"label\": \"India\",\r\n\t\"value\": 5800.0\r\n}, {\r\n\t\"label\": \"United States\",\r\n\t\"value\": 4200.0\r\n}, {\r\n\t\"label\": \"Indonesia\",\r\n\t\"value\": 6200.0\r\n}, {\r\n\t\"label\": \"Australia\",\r\n\t\"value\": 7900\r\n}, {\r\n\t\"label\": \"Brazil\",\r\n\t\"value\": 4400.0\r\n}]\r\n<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Importing_Step_1_json_File\"><\/span>Step 2: Importing Step 1 .json File<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<p>Import the <b>.json<\/b> file created in Step 1 into mongodb using the <b>\u201cmongoimport\u201d<\/b> command as shown below.<\/p>\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/import.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15663\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/import.png\" alt=\"import\" width=\"620\" height=\"153\" srcset=\"\/blog\/wp-content\/uploads\/2017\/01\/import.png 620w, \/blog\/wp-content\/uploads\/2017\/01\/import-150x37.png 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Run_%E2%80%98Mongo_in_a_New_Shell\"><\/span>Step 3: Run &#8216;Mongo&#8217; in a New Shell<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nNext, open another shell to run the <b>\u201cmongo\u201d<\/b> command.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/mongo1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15664\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/mongo1.png\" alt=\"mongo\" width=\"620\" height=\"289\" srcset=\"\/blog\/wp-content\/uploads\/2017\/01\/mongo1.png 620w, \/blog\/wp-content\/uploads\/2017\/01\/mongo1-150x70.png 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Verifying_Your_Data\"><\/span><b>Step 4: Verifying Your Data<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nNow 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:\r\n<ul>\r\n \t<li>Use the <b>\u201cshow dbs\u201d<\/b> command to see your database. A list of the databases present is shown.<\/li>\r\n \t<li>From this list, select the required database using the <b>\u201cuse \u201d<\/b> command.<\/li>\r\n \t<li>Next, use the <b>\u201cshow collections\u201d<\/b> command to see the collections inside your database.<\/li>\r\n \t<li>For seeing the contents of a specific collection, execute the <b>\u201cdb..find().pretty()\u201d<\/b> command.<\/li>\r\n<\/ul>\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/population.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15658\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/population.png\" alt=\"population\" width=\"620\" height=\"514\" srcset=\"\/blog\/wp-content\/uploads\/2017\/01\/population.png 620w, \/blog\/wp-content\/uploads\/2017\/01\/population-150x124.png 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a>\r\n\r\n<p>You can import this demo database from <a href=\"https:\/\/www.dropbox.com\/s\/ypd277in4qe4amp\/simpledata.json?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.\r\n\r\nWith this, we are done with creating the database.\r\n\r\n<strong>Now we move on to creating chart objects and then finally rendering the MongoDB charts.<\/strong><\/p>\r\n<h2><span class=\"ez-toc-section\" id=\"How_to_Create_and_Render_Charts\"><\/span><strong>How to Create and Render Charts<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn this section, you\u2019ll learn to create and render charts:\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1_JSP_Page_with_Google_Gson_Library\"><\/span>Step 1: JSP Page with Google Gson Library<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nCreate a JSP page and import all the packages in a script tag.\u00a0The code below imports the <b>com.google.gson<\/b> package that enables the conversion from JSON to Java and Java to JSON. Before getting into the code, let\u2019s first talk about the google-gson library.\r\n\r\n<b>The google-gson library:<\/b>\r\n<ul>\r\n \t<li>Provides the toJson() and fromJson() methods for converting Java objects to JSON and the other way round<\/li>\r\n \t<li>Allows conversion of the already existing unmodifiable objects to and from JSON<\/li>\r\n \t<li>Supports Java Generics extensively<\/li>\r\n \t<li>Allows custom representations of objects<\/li>\r\n \t<li>Supports arbitrarily complex objects (with deep inheritance hierarchies and extensive use of generic types)<\/li>\r\n<\/ul>\r\nNow, here is the code to import the com.google.gson package:\r\n<pre class=\"lang:java\">&lt;%@page contentType=\"text\/html\" pageEncoding=\"UTF-8\"%&gt;\r\n&lt;%@page import=\"com.mongodb.*\" %&gt;\r\n&lt;%@page import=\"java.util.*\" %&gt;\r\n&lt;%@page import=\"com.google.gson.*\" %&gt;\r\n&lt;%@page import=\"fusioncharts.FusionCharts\" %&gt;<\/pre>\r\nClick <a href=\"https:\/\/github.com\/google\/gson\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> for more information on google-gson package.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Database_Connection\"><\/span>Step 2: Database Connection<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nEstablish database connectivity to fetch values from the database and place them inside a hashmap, as shown in the code snippet below.\r\n<pre class=\"lang:java\">&lt;%\r\n\r\n\/\/Make sure you have included MongoDB jar files in order to use the MongoDB java driver classes\r\n\r\n         Mongo mongoClient = new Mongo(\"localhost\" , 27017 );\r\n\t\t\t\r\n         \/\/connecting to the database\r\n         DB db = mongoClient.getDB( \"fusioncharts\" );\r\n         System.out.println(\"Connected to database successfully\");\r\n         \r\n         \/\/Hashmap is created to store the values from the database\r\n         HashMap&lt;String,Integer&gt; labelValue = new HashMap&lt;String,Integer&gt;();\r\n         \r\n         \/\/fetching the collection from the database\r\n        DBCollection collection = db.getCollection(\"simpledata\");\r\n        \r\n        \/\/Selects the documents in a collection and returns a cursor to the selected        documents\r\n         DBCursor cursor = collection.find();\r\n         \r\n         while(cursor.hasNext()) {\r\n           \r\n             DBObject o = cursor.next();\r\n             \r\n                String label = (String) o.get(\"label\") ; \r\n                int value = ((Number) o.get(\"value\")).intValue();\r\n              labelValue.put(label, value);\r\n            \r\n                }\r\n  %&gt;<\/pre>\r\nOnce the database connectivity is established, structure your data in the Fusioncharts format and convert the java objects to their JSON representation using the <b>GSON<\/b> library.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Construct_Chart_with_Parameters\"><\/span>Step 3: Construct Chart with Parameters<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nFinally, create a constructor and pass the necessary parameters to render the chart.\r\n<pre class=\"lang:java\">&lt;%\r\n    \r\n            Gson gson = new Gson();\r\n            \r\n            \/\/ The 'chartobj' map object holds the chart attributes and data.\r\n            chartobj.put(\"caption\", \"Split of Visitors by Age Group\");\r\n            chartobj.put(\"subCaption\" , \"Last year\");\r\n            chartobj.put(\"paletteColors\" , \"#0075c2\");\r\n            chartobj.put(\"bgColor\" , \"#ffffff\");\r\n            chartobj.put(\"showBorder\" , \"0\");\r\n            chartobj.put(\"theme\",\"fint\");\r\n            chartobj.put(\"showPercentValues\" , \"1\");\r\n            chartobj.put(\"decimals\" , \"1\");\r\n            chartobj.put(\"captionFontSize\" , \"14\");\r\n            chartobj.put(\"subcaptionFontSize\" , \"14\");\r\n            chartobj.put(\"subcaptionFontBold\" , \"0\");\r\n            chartobj.put(\"toolTipColor\" , \"#ffffff\");\r\n            chartobj.put( \"toolTipBorderThickness\" , \"0\");\r\n            chartobj.put(\"toolTipBgColor\" , \"#000000\");\r\n            chartobj.put(\"toolTipBgAlpha\" , \"80\");\r\n            chartobj.put(\"toolTipBorderRadius\" , \"2\");\r\n            chartobj.put(\"toolTipPadding\" , \"5\");\r\n            chartobj.put(\"showHoverEffect\" , \"1\");\r\n \r\n          \/\/ to store the entire data object\r\n            ArrayList arrData = new ArrayList();\r\n            for(Map.Entry m:labelValue.entrySet()) \r\n            {\r\n                \/\/ to store the key value pairs of label and value object of the data object\r\n                Map&lt;String, String&gt; lv = new HashMap&lt;String, String&gt;();\r\n                lv.put(\"label\", m.getKey().toString() );\r\n                lv.put(\"value\", m.getValue().toString());\r\n                arrData.add(lv);             \r\n            }\r\n            \/\/close the connection.\r\n            cursor.close();\r\n \r\n            \/\/create 'dataMap' map object to make a complete FC datasource.\r\n             Map&lt;String, String&gt; dataMap = new LinkedHashMap&lt;String, String&gt;();  \r\n        \/*\r\n            gson.toJson() the data to retrieve the string containing the\r\n            JSON representation of the data in the array.\r\n        *\/\r\n         dataMap.put(\"chart\", gson.toJson(chartobj));\r\n         dataMap.put(\"data\", gson.toJson(arrData));\r\n\r\n            FusionCharts columnChart= new FusionCharts(\r\n            \"column2d\",\/\/ chartType\r\n                        \"chart1\",\/\/ chartId\r\n                        \"600\",\"400\",\/\/ chartWidth, chartHeight\r\n                        \"chart\",\/\/ chartContainer\r\n                        \"json\",\/\/ dataFormat\r\n                        gson.toJson(dataMap) \/\/dataSource\r\n                    );\r\n            %&gt;\r\n                            \r\n            &lt;%=columnChart.render()%&gt;<\/pre>\r\n<b>Given below is the full JSP code of the example we worked on:<\/b>\r\n<pre class=\"lang:java\">&lt;%-- \r\n    Document   : singleseries-mongodb-example\r\n    Author     : fusioncharts\r\n--%&gt;\r\n\r\n&lt;%@page contentType=\"text\/html\" pageEncoding=\"UTF-8\"%&gt;\r\n&lt;%@page import=\"com.mongodb.*\" %&gt;\r\n&lt;%@page import=\"java.util.*\" %&gt;\r\n&lt;%@page import=\"com.google.gson.*\" %&gt;\r\n&lt;%@page import=\"fusioncharts.FusionCharts\" %&gt;\r\n\r\n&lt;%\r\n\r\n         Mongo mongoClient = new Mongo(\"localhost\" , 27017 );\r\n\t\t\t\r\n         \/\/connecting to the database\r\n         DB db = mongoClient.getDB( \"fusioncharts\" );\r\n         System.out.println(\"Connected to database successfully\");\r\n         \r\n         \/\/Hashmap is created to store the values from the database\r\n         HashMap&lt;String,Integer&gt; labelValue = new HashMap&lt;String,Integer&gt;();\r\n         \r\n         \/\/fetching the collection from the database\r\n        DBCollection collection = db.getCollection(\"simpledata\");\r\n        \r\n        \/\/Selects the documents in a collection and returns a cursor to the selected documents\r\n         DBCursor cursor = collection.find();\r\n\r\n         while(cursor.hasNext()) {\r\n           \r\n             DBObject o = cursor.next();\r\n             \r\n                String label = (String) o.get(\"label\") ; \r\n                int value = ((Number) o.get(\"value\")).intValue();\r\n              labelValue.put(label, value);\r\n            \r\n                }\r\n  %&gt;\r\n\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n    &lt;head&gt;\r\n        &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"&gt;\r\n        &lt;title&gt;Creating Charts with Data from a Database - fusioncharts.com&lt;\/title&gt;\r\n\r\n \r\n        &lt;script src=\"fusioncharts.js\"&gt;&lt;\/script&gt;\r\n        &lt;script src=\"fusioncharts.theme.fint.js\"&gt;&lt;\/script&gt;\r\n        &lt;script src=\"fusioncharts.charts.js\"&gt;&lt;\/script&gt;\r\n\r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n         &lt;div id=\"chart\"&gt;&lt;\/div&gt;\r\n\r\n        &lt;%\r\n         \r\n            Gson gson = new Gson();\r\n            \r\n            \/\/ The 'chartobj' map object holds the chart attributes and data.\r\n            chartobj.put(\"caption\", \"Split of Visitors by Age Group\");\r\n            chartobj.put(\"subCaption\" , \"Last year\");\r\n            chartobj.put(\"paletteColors\" , \"#0075c2\");\r\n            chartobj.put(\"bgColor\" , \"#ffffff\");\r\n            chartobj.put(\"showBorder\" , \"0\");\r\n            chartobj.put(\"theme\",\"fint\");\r\n            chartobj.put(\"showPercentValues\" , \"1\");\r\n            chartobj.put(\"decimals\" , \"1\");\r\n            chartobj.put(\"captionFontSize\" , \"14\");\r\n            chartobj.put(\"subcaptionFontSize\" , \"14\");\r\n            chartobj.put(\"subcaptionFontBold\" , \"0\");\r\n            chartobj.put(\"toolTipColor\" , \"#ffffff\");\r\n            chartobj.put( \"toolTipBorderThickness\" , \"0\");\r\n            chartobj.put(\"toolTipBgColor\" , \"#000000\");\r\n            chartobj.put(\"toolTipBgAlpha\" , \"80\");\r\n            chartobj.put(\"toolTipBorderRadius\" , \"2\");\r\n            chartobj.put(\"toolTipPadding\" , \"5\");\r\n            chartobj.put(\"showHoverEffect\" , \"1\");\r\n         \r\n           \/\/ to store the entire data object\r\n            ArrayList arrData = new ArrayList();\r\n            for(Map.Entry m:labelValue.entrySet()) \r\n            {\r\n                \/\/ to store the key value pairs of label and value object of the data object\r\n                Map&lt;String, String&gt; lv = new HashMap&lt;String, String&gt;();\r\n                lv.put(\"label\", m.getKey().toString() );\r\n                lv.put(\"value\", m.getValue().toString());\r\n                arrData.add(lv);             \r\n            }\r\n            \/\/close the connection.\r\n            cursor.close();\r\n \r\n            \/\/create 'dataMap' map object to make a complete FC datasource.\r\n             Map&lt;String, String&gt; dataMap = new LinkedHashMap&lt;String, String&gt;();  \r\n        \/*\r\n            gson.toJson() the data to retrieve the string containing the\r\n            JSON representation of the data in the array.\r\n        *\/\r\n         dataMap.put(\"chart\", gson.toJson(chartobj));\r\n         dataMap.put(\"data\", gson.toJson(arrData));\r\n\r\n            FusionCharts columnChart= new FusionCharts(\r\n            \"column2d\",\/\/ chartType\r\n                        \"chart1\",\/\/ chartId\r\n                        \"600\",\"400\",\/\/ chartWidth, chartHeight\r\n                        \"chart\",\/\/ chartContainer\r\n                        \"json\",\/\/ dataFormat\r\n                        gson.toJson(dataMap) \/\/dataSource\r\n                    );\r\n            %&gt;\r\n            \r\n&lt;!--    Step 5: Render the chart    --&gt;                \r\n            &lt;%=columnChart.render()%&gt;\r\n        \r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\r\nFinally, simply run your JSP file using MongoDB.\r\n\r\nYou output looks like as shown below:\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/sc1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15659\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/sc1.png\" alt=\"sc1\" width=\"620\" height=\"485\" srcset=\"\/blog\/wp-content\/uploads\/2017\/01\/sc1.png 620w, \/blog\/wp-content\/uploads\/2017\/01\/sc1-150x117.png 150w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a>\r\n\r\nIf you see any errors in your code, click <a href=\"https:\/\/www.dropbox.com\/s\/b54donyl2i4ta91\/fcmongodb.zip?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to download the complete source code of the sample project we have created for this tutorial.\r\n<h2><span class=\"ez-toc-section\" id=\"Was_There_a_Problem_Rendering_Charts\"><\/span>Was There a Problem Rendering Charts?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn case something went wrong and you are unable to see the chart, check for the following:\r\n<ul>\r\n \t<li>The chart ID should be unique for each chart rendered on the same page. Otherwise, it will result in a JavaScript error.<\/li>\r\n \t<li>If the chart does not show up at all, check if the <b>fusioncharts.js<\/b> and fusioncharts wrapper <b>FusionCharts.java<\/b> was loaded. Also, check if the path to fusioncharts.js and FusionCharts.java file is correct, and whether the file exists in that location.<\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn 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.\r\n<h2><span class=\"ez-toc-section\" id=\"Visualize_Data_Seamlessly_with_MongoDB_Charts_JSP\"><\/span>Visualize Data Seamlessly with MongoDB Charts &amp; JSP<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nReady to create dynamic charts with MongoDB and JSP? <a href=\"https:\/\/www.fusioncharts.com\/download\/fusioncharts-suite-xt?framework=js\">Start visualizing your data today and elevate your web applications with FusionCharts<\/a>. Dive into the integration process now!\r\n<h2><span class=\"ez-toc-section\" id=\"FAQs\"><\/span>FAQs<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<h3><span class=\"ez-toc-section\" id=\"How_to_create_a_chart_in_MongoDB\"><\/span>How to create a chart in MongoDB?<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nUse 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.\r\n<h3><span class=\"ez-toc-section\" id=\"How_to_connect_JSP_with_MongoDB\"><\/span>How to connect JSP with MongoDB?<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nConnect 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.\r\n<h3><span class=\"ez-toc-section\" id=\"How_can_data_be_visualized_from_MongoDB\"><\/span>How can data be visualized from MongoDB?<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nVisualize 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.\r\n<h3><span class=\"ez-toc-section\" id=\"What_is_a_chart_user_in_MongoDB\"><\/span>What is a chart user in MongoDB?<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nA 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 &#8220;Viewer&#8221; role can view charts but not create or edit them, while a user with the &#8220;Editor&#8221; role can create and edit charts.","protected":false},"excerpt":{"rendered":"<p>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. [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[613,616,615,614,250],"coauthors":[647,648],"class_list":["post-15650","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-creating-charts-using-jsp-and-mongodb","tag-document-oriented-database","tag-fusioncharts-with-jsp-and-mongodb","tag-jsp","tag-mongodb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create JSP and MongoDB Charts with FusionCharts Tutorial<\/title>\n<meta name=\"description\" content=\"Master JSP and MongoDB charts with our 2026 guide. Create dynamic visualizations that enhance your professional data presentation. Follow tutorials now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create JSP and MongoDB Charts with FusionCharts Tutorial\" \/>\n<meta property=\"og:description\" content=\"Master JSP and MongoDB charts with our 2026 guide. Create dynamic visualizations that enhance your professional data presentation. Follow tutorials now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-18T11:09:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/01\/import.png\" \/>\n\t<meta property=\"og:image:width\" content=\"620\" \/>\n\t<meta property=\"og:image:height\" content=\"153\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dishank Tiwari, Ayan Bhadury\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dishank Tiwari, Ayan Bhadury\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Dishank Tiwari\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad\"\n\t            },\n\t            \"headline\": \"Create JSP and MongoDB Charts with FusionCharts Tutorial 2026\",\n\t            \"datePublished\": \"2017-01-18T11:09:34+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:14+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/\"\n\t            },\n\t            \"wordCount\": 1347,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/import.png\",\n\t            \"keywords\": [\n\t                \"Creating Charts using JSP and MongoDB\",\n\t                \"document oriented database\",\n\t                \"Fusioncharts with jsp and mongodb\",\n\t                \"jsp\",\n\t                \"MongoDB\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/\",\n\t            \"name\": \"Create JSP and MongoDB Charts with FusionCharts Tutorial\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/import.png\",\n\t            \"datePublished\": \"2017-01-18T11:09:34+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:14+00:00\",\n\t            \"description\": \"Master JSP and MongoDB charts with our 2026 guide. Create dynamic visualizations that enhance your professional data presentation. Follow tutorials now.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#primaryimage\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/import.png\",\n\t            \"contentUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/import.png\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Create JSP and MongoDB Charts with FusionCharts Tutorial 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad\",\n\t            \"name\": \"Dishank Tiwari\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/edab16f3ae97d48c528d1820c0597954\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg\",\n\t                \"caption\": \"Dishank Tiwari\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/dishank-tiwari\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create JSP and MongoDB Charts with FusionCharts Tutorial","description":"Master JSP and MongoDB charts with our 2026 guide. Create dynamic visualizations that enhance your professional data presentation. Follow tutorials now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/","og_locale":"en_US","og_type":"article","og_title":"Create JSP and MongoDB Charts with FusionCharts Tutorial","og_description":"Master JSP and MongoDB charts with our 2026 guide. Create dynamic visualizations that enhance your professional data presentation. Follow tutorials now.","og_url":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-01-18T11:09:34+00:00","article_modified_time":"2026-01-20T09:11:14+00:00","og_image":[{"width":620,"height":153,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/01\/import.png","type":"image\/png"}],"author":"Dishank Tiwari, Ayan Bhadury","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dishank Tiwari, Ayan Bhadury","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/"},"author":{"name":"Dishank Tiwari","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad"},"headline":"Create JSP and MongoDB Charts with FusionCharts Tutorial 2026","datePublished":"2017-01-18T11:09:34+00:00","dateModified":"2026-01-20T09:11:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/"},"wordCount":1347,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/import.png","keywords":["Creating Charts using JSP and MongoDB","document oriented database","Fusioncharts with jsp and mongodb","jsp","MongoDB"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/","url":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/","name":"Create JSP and MongoDB Charts with FusionCharts Tutorial","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/import.png","datePublished":"2017-01-18T11:09:34+00:00","dateModified":"2026-01-20T09:11:14+00:00","description":"Master JSP and MongoDB charts with our 2026 guide. Create dynamic visualizations that enhance your professional data presentation. Follow tutorials now.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#primaryimage","url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/import.png","contentUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/import.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-jsp-mongodb\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create JSP and MongoDB Charts with FusionCharts Tutorial 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad","name":"Dishank Tiwari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/edab16f3ae97d48c528d1820c0597954","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg","caption":"Dishank Tiwari"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/dishank-tiwari\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=15650"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15650\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=15650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=15650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=15650"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=15650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}