Bind jqxChart to MySQL Database Using Spring MVC

In this help topic you will learn how to bind a jqxChart to a MySQL database using the Spring Web MVC framework, which provides model-view-controller architecture and ready components that can be used to develop flexible and loosely coupled web applications. The MVC pattern results in separating the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements.

1. Set Up a Database

Our goal is to populate a jqxChart from a MySQL database. In the example presented here, we will be using the Northwind database. To learn how to set it up, please follow Step 1 from the help topic Configure MySQL, Eclipse and Tomcat for Use with jQWidgets.

2. Create a New Project in Eclipse

In this tutorial, we will be using Eclipse IDE for Java EE Developers, version Luna.

  1. Go to File → New → Maven Project.
  2. In the New Maven Project window, make sure Create a simple project (skip archetype selection) is unchecked and click Next.
  3. In the next window, click Add Archetype... and set Archetype Group Id to org.apache.maven.archetypes, Archetype Artifact Id to maven-archetype-webapp and Archetype Version to 1.0. Then click OK.
  4. Select the newly added archetype and click Next.
  5. In the final window of the new project setup, set the Group Id to com.jqwidgets, the Artifact Id to jqwidgets-spring and the Package to war. Finally, click Finish.

3. Configure the Project

Add the necessary project dependencies in the file pom.xml in the root of the project:

The file web.xml, found in src\main\webapp\WEB-INF, defines everything about the application that the server needs to know. Configure it as follows:

The <servlet> element declares the DispatcherServlet. When the DispatcherServlet is initialized, the framework will try to load the application context from a file named [servlet-name]-servlet.xml located in the WEB-INF directory. The <servlet-mapping> element specifies what URLs will be handled by the DispatcherServlet.

The DispatcherServlet has to be created. Do so by right-clicking the WEB-INF folder and selecting New → Other. Choose XML File and name the file mvc-dispatcher-servlet.xml. Add the following as its content:

4. Create the Model

We are going to populate a jqxChart with information about products from the products table in the Northwind database. That is why we need a Model class which describes a product and its properties.

First, right-click Java Resources and create a new Source Folder. Set jqwidgets-spring as its Project name and src/main/java as its Folder name. Next, create a new package in the folder named com.jqwidgets:

In the new package, create our Model class, Product. This class describes a product with its name and units in stock with the following code:

5. Create the Controller

The Controller is where the DispatcherServlet will delegate requests. It will retrieve product data from the database and store it in instances of the Product class. Create a new class, ChartController in the package com.jqwidgets with the following content:

6. Add the Necessary jQWidgets Scripts and Stylesheets to the Project

Create a resources folder in src\main\webapp and in it add two more folders - js and css. Include in them all (or only the necessary) jQWidgets files - the scripts (including jqxcore.js and the specific widget files) in js and the stylesheets (jqx.base.css and any themes and associated images) in css. Remember to include a version of jQuery in js, too.

7. Create the View (JSP)

The View is where the jqxChart with the product data will be displayed. Create a new JSP File in src\main\webapp\WEB-INF and name it chart.jsp. This page will serve as the View. Here is its content:

You will need to add the JSP Standard Tag Library to the project. Create a folder named lib in src\main\webapp\WEB-INF and place the library's JAR there. You can get it from this location: http://www.java2s.com/Code/Jar/j/Downloadjstl12jar.htm.

8. Run the Chart Page

Before running the View, please make sure you have the Apache Tomcat server installed and configured as explained in Steps 5 and 6 from the tutorial Configure MySQL, Eclipse and Tomcat for Use with jQWidgets.

Right-click the project and select Run As → Run on Server. In the window that appears, select Tomcat v8.0 Server at localhost and click Finish.

Go to http://localhost:8080/jqwidgets-spring/chart to view the chart page:

You can download the project as a WAR file from here: jqwidgets-spring.zip.