XChart using AJAX, JSP and Servlet

We know that xchart basically displays different statistical data on different chart types such as column chart, bar chart, line chart, pie chart etc. You can have a look at the URL http://tenxer.github.io/xcharts/ for more information.

You can integrate xchart with any server side technology but here I will show you how to integrate xchart using AJAX, JSP and Servlet. This tutorial shows step by step so that we can understand how it happens. It displays the data for site visitors log in line chart. I have also put a calendar for date-picker so that you can pick a custom range of dates and get the visitor statistics in xchart. The calendar has more features like you can select Today, Yesterday, Last One week, Last One month etc. On mouse hover on the line chart you can see the visitors count on a particular date.
If you have any query please feel free to leave a comment.


JDK 1.7
Eclipse 3.6
Maven 2.x
Tomcat Server 7.x
XChart API

Final Output

XChart using AJAX, JSP and Servlet

Now we will see steps how to implement it

Step 1. Create a maven based web project in Eclipse

Step 2. Modify pom.xml file as shown below

Step 3. Modify web.xml file as shown below

Step 4. Create a POJO class for XChart data model

Step 5. Create sample static data for XChart. You will usually fetch dynamic data from your database and show your data onto XChart.

Step 6. Create a data transfer object that will represent XChart data point for actual chart representation

Step 7. Create a servlet that will handle request and response from a user

Step 8. Create a JSP file for viewing the graph

Step 9. AJAX call through jQuery and XChart API. This is part of script.js file

Step 10. Download below assets directory and put it under webapp directory


Step 11. Run the application on Tomcat server. You will get the desired output in the browser.

That’s all. Thanks for reading.


Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

2 thoughts on “XChart using AJAX, JSP and Servlet

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.