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.
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.
In this tutorial, we will be using Eclipse IDE for Java EE Developers, version Luna.
Add the necessary project dependencies in the file
pom.xml in the root
of the project:
web.xml, found in
everything about the application that the server needs to know. Configure it as
The <servlet> element declares the DispatcherServlet. When the DispatcherServlet
is initialized, the framework will try to load the application context from a file
[servlet-name]-servlet.xml located in the
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
folder and selecting New → Other. Choose XML
File and name the file
the following as its content:
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.
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
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:
The Controller is where the DispatcherServlet will delegate requests. It will retrieve
product data from the database and store it in instances of the
class. Create a new class,
ChartController in the package
with the following content:
resources folder in
src\main\webapp and in it
add two more folders -
css. Include in them all
(or only the necessary) jQWidgets files - the scripts (including
and the specific widget files) in
js and the stylesheets (
and any themes and associated images) in
css. Remember to include a
version of jQuery in
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
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.
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.