How To Create Charts In Hibernate Framework

Creating charts in hibernate framework

Hibernate Framework is an Object/Relational Mapping (ORM) solution for Java environments. The framework simplifies the mapping of data between an object model representation and a relational data model representation.

Hibernate maps Java classes to corresponding database tables by providing common data persistence-related programming tasks. This helps to simplify the code needed to establish connectivity.

Structural details of the Hibernate Framework

The basic structure of the Hibernate Framework is made up of the following categories of files:

    The persistent class: Includes a class that corresponds to an entity table in a database. Instances of this class will be used to represent the entries in that table. The class should, therefore, be created with the corresponding getter() and setter() methods so that it can carry the data.

    The mapping file: Includes details about the mapping between 1: classes and tables 2: instance variables and columns of the table.

    The configurations file: Includes details that give Hibernate relevant information about the database and how connections with the database can be managed. This information can be provided via an XML file, a properties file, or even programmatically. In our sample here, we will be using an XML file to provide this information.

    The testing class: Uses class details from the persistent class file, the mapping details from the mapping file, and the connectivity details from the configurations file for storing and retrieving data from the database.

FusionCharts JSP Wrapper

In addition to several other features, FusionCharts Suite XT comes with the FusionCharts JSP wrapper that lets you create interactive, data-driven charts without writing any JavaScript code. The server-side wrapper generates the required JavaScript and HTML code as a string, which is used to render charts in a browser.

In this blog sample, we will be using the FusionCharts JSP Wrapper within our JSP page to configure the chart and render it using JAVA code in the scriptlet tags.

Click here to know more about the FusionCharts JSP wrapper.

Requirements:

Before we start talking about the procedure for rendering a chart using the Hibernate Framework, ensure that you:

    Download the Hibernate Jars.
    Download FusionCharts Suite XT.
    Download the FusionCharts JSP wrapper.

Steps for rendering a chart using Hibernate Framework by fetching data from the database

Step 1

To create a web project, from the File menu, click New, and select Dynamic Web Project. The New Dynamic Web Project dialog box opens.

Step 2

  • Enter the relevant project details in the New Dynamic Web Project dialog box.
  • From the Target runtime drop-down, select a preconfigured local web server. For the sample created in this article, we will be using Apache Tomcat 8.
  • After filling all details, click Finish.

A new project, named FCHibernateProject is created.

Step 3

To include the required external Hibernate Jars in your project:

  • Right click the FCHibernateProject in the Project Explorer.
  • From the menu rendered, select Properties.
  • The Properties for FCHibernateProject dialog box opens.
  • From the Properties for FCHibernateProject dialog box, select the Java Build Path filter.
  • Open the Libraries tab.
  • Click Add External Jars and add the path for the downloaded Hibernate Jars.

External Jars for the Hibernate Framework are added to the Eclipse project.

Step 4

To enable database connectivity, you need to add connector jars corresponding to the database you are using. The sample created in this article uses the MySql database, so  mysql-connector.jar has to be included in the project.

You also need to include the GSON.jar in order to retrieve the string containing the JSON representation of the data in an array.

GSON is a Java library that is used to convert:

  • Java objects into their corresponding JSON representation
  • JSON strings into their corresponding Java objects

The GSON and the  mysql-connector.jar files are available in the includeJarFiles folder of the downloaded package for the FusionCharts JSP wrapper.

To access the includeJarFiles folder, follow the steps outlined in Step 3.

Step 5

  • From the Project Explorer, in the FCHibernateProject folder, right click the src subfolder.
  • From the menu rendered, click NewPackage
  • The New Java Package dialog box opens.
  • Create a package named  fusioncharts to save the FusionCharts.java wrapper file.
  • Click Finish.
  • Save the FusionCharts JSP Wrapper in the created package.

Step 6

Copy the FusionCharts JavaScript files from the downloaded FusionCharts Suite XT package and paste them in the WebContent folder of the FCHibernateProject.

Step 7

Create a database in MySQL with the data for rendering a single-series column chart.

A reference image for the required table structure is given below:

The values entered in the database table will be fetched and provided to the FusionCharts constructor for rendering the chart.

Step 8

Next, you need to create a persistent class to have a class that corresponds to each entity table in the database. Instances of this class will be used to represent the entries in each table of the database.

The persistent class, named FusionData.java in this sample, contains the corresponding instance variables for the fields of the database table, along with the setter() and getter() methods for the respective variables.

To create the persistent class:
Create a .java file, FusionData.java, and save it in the  fetchdata package.

Copy the following code and paste it in the FusionData.java file:

Step 9

You also need to create a Java class that creates a session, runs a query, and returns a record-set as a list via a function call. This class will be used in the JSP page to fetch data for rendering the chart.

To create this Java class:
Create a .java file, SimpleChart.java, and save it in the fetchdata package

Copy the following code and paste it in the SimpleChart.java file:

The records returned by the Java class are stored in the FusionData list.

Step 10

You now need a mapping file to map the data in the FusionData list with the data in the singleseriestable database table.

To do this:

  • From the Project Explorer, in the FCHibernateProject folder, right click the src subfolder.
  • From the menu rendered, select NewOthers.
  • The New dialog box opens.
  • In the New dialog box, select XML File to set the type of the file to be created.
  • Click Next. The New XML File dialog box opens.
  • In the New XML File dialog box, set the path of the folder in which the file will be saved in the Enter or select the parent folder field. For our sample, we will set it to FCHibernate/src. In the File name field, enter the filename. For our sample, we’ll name the file FusionData.hbm.xml.
  • Click Finish.

The modified directory structure, after the  FusionData.hbm.xml file is created.

Copy the following code and paste it in the  FusionData.hbm.xml file:

Step 11

Follow the steps in Step 10 to create the  hibernate.cfg.xml file for the Hibernate configurations. This file includes database-related information like the connection URL, the connection username and password, the connection driver, and the mapping resource. The modified directory structure, after this file is created, looks as shown in the image below:

Copy the following code and paste it in the  hibernate.cfg.xml file:

Note:
In the above code, replace the jdbc_URL, jdbc_Username, and jdbc_Password variables with their appropriate values.

Step 12

Finally, you need a JSP file that contains the chart container to render the chart. This file will also include the JSP tags along with the scripts and the Java code needed to import the JS files and Java classes for fetching data from the database.

To do this:
Create a .jsp fle, TryChart.jsp, and save it in the WebContent folder.

Copy the following code and paste it in the TryChart.jsp file:

After execution, your output should look as shown in the image below:

If you have trouble executing, you can download this sample from here.

Leave a Comment