Customer Login
Sales: +1 (888) 845-1211(USA) or +44 20 7193 9444(Europe)

Home Products Technologies Download Buy Partners Support Company

ASP ASP.NET PHP JSP Adobe Flash Adobe Flex Oracle APEX Microsoft Silverlight Microsoft SharePoint Microsoft PowerPoint

Tutorial for using AnyChart with JSP

AnyChart Flash Charting Component is a flexible Adobe Flash based solution that allows you to create interactive and great looking flash charts and dashboards. It is a cross-browser and cross-platform charting solution intended for everybody who deals with creation of dashboard, reporting, analytics, statistical, financial or any other data visualization solutions.

Please see more information about AnyChart at:

A lot of technologies allow developers to use Flash based products, but there are specific issues in each case. AnyChart Team have tried to creates samples that make the start of implementation of AnyChart easier and understandable. This particular sample explains how to use AnyChart Flash Charts, Maps, Gauges and Dashboards with JSP (Java Server Pages).

If you want to use AnyChart with JSP you can start with downloading the following library:

AnyChart JSP Integration Library

You can also download JAR source code and modify/compile it according to your needs:

AnyChart JSP Integration Library Source Code

Simple Chart created using AnyChart and JSP

1. Introduction
2. Installation
3. Basic Usage
4. Charting dynamic data
- 4.1 Single series data
- 4.2 Multi series data
5. Charting data from database

5.1 Charting data from database using JSTL SQL
5.2 Charting data from database using Bean

6. Using Gauges

1. Introduction

AnyChart is a Flash based solution for charting data and it accepts data in XML format. AnyChart for JSP Integration Library is an integration kit that helps to embed AnyChart into JSP pages.

2. Installation

1. Put AnyChart.jar into WEB-INF/lib folder of web-application project.
2. In web application deployment descriptor (web.xml) file place next fragment:

<filter>
    <filter-name>AnyChart Resources</filter-name>
    <display-name>AnyChart static resources filter</display-name>
    <description>
        This servlet filter is intended for catch http request
        to static AnyChart Component resources (AnyChart.js and AnyChart.swf)
    </description>
    <filter-class>com.anychart.servlet.ResourceFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>AnyChart Resources</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

Sample of web.xml for 2.3 version:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
    <filter>
        <filter-name>AnyChart Resources</filter-name>
        <display-name>AnyChart static resources filter</display-name>
        <description>
            This servlet filter is intended for catch http request
            to static AnyChart Component resources (AnyChart.js and AnyChart.swf)
        </description>
        <filter-class>com.anychart.servlet.ResourceFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>AnyChart Resources</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

3. Basic Usage

AnyChart accepts data in XML format. To put AnyChart into JSP page you should use chart tag. You can use Expression Language (EL) in tag attributes and tag body. To add AnyChart tag library int JSP page you add the following to the top::

<%@ taglib prefix="any" uri="http://www.anychart.com" %>

3.1. <any:chart /> Tag

Attributes:

width – width of a chart on a page. Required;
height – height of a chart on a page. Required;
wmode – html embedding mode. Possible values: window, opaque, transparent;
bgColor – flash movie background color;
xmlFile – chart xml settings and data url path.

You can not only set url path in xmlFile attribute, but include XML directly in tag body in JSP page, you can omit root tag <anychart></anychart> in this case.
Sample of xmlFile - see 3.3. Basic Usage with external XML.
Sample of inline XML - see 3.4. Basic Usage with inline XML

3.2. XML Structure

As it is already said above, AnyChart accepts settings in XML. The very basic XML looks like that:

Detailed information about AnyChart XML you can find in basic AnyChart Documentation:
1. AnyChart Online XML Reference http://anychart.com/products/anychart/docs/xmlReference/index.html
2. AnyChart User's Guide http://anychart.com/products/anychart/docs/users-guide/index.html

3.3. Basic usage with external XML data

Add AnyChart.jar to the project and register AnyChart Filter in web.xml as it is shown in 1. Installation.

Create XML data.xml with data and settings for AnyChart (copy XML from 3.2. XML Structure), place it to the same folder where your JSP page is located.

Add AnyChart tag library import to you JSP page:

<%@ taglib prefix="any" uri="http://www.anychart.com" %>

In JSP body add<any:chart /> with sizes and chart XML file settings:

<any:chart width="550" height="400" xmlFile="./data.xml" />

JSP page will look like that now:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="any" uri="http://www.anychart.com" %>
<html>
    <head>
        <title>AnyChart external data sample</title>
    </head>
    <body>
        <any:chart width="550px" height="400px" xmlFile="./data.xml" />
    </body>
</html>

If you launch a JSP page now you should see the following:

chart screenshot

Download this sample:
zip: AnyChartJSPExternalDataSample.zip
war: AnyChartJSPExternalDataSample.war

3.4. Basic usage with inline XML

You can embed XML setting directly into JSP page. To do this:
Add AnyChart.jar to the project and register AnyChart Filter in web.xml as it is shown in 1. Installation.

Create XML with data and settings for AnyChart (copy XML from 3.2. XML Structure).

Add AnyChart tag library import to you JSP page:

<%@ taglib prefix="any" uri="http://www.anychart.com" %>

In JSP body add<any:chart /> with sizes:

<any:chart width="550" height="400"></any:chart>

Add XML as a subnode of <any:chart />.
JSP Page will look like that:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="any" uri="http://www.anychart.com" %>
<html>
    <head><title>AnyChart inline XML Sample</title></head>
<body>
    <any:chart width="550" height="400">
        <anychart>
            <charts>
                <chart>
                    <chart_settings>
                        <title>
                            <text><![CDATA[Product sales by Month]]></text>
                        </title>
                        <axes>
                            <x_axis>
                                <title>
                                    <text><![CDATA[Months]]></text>
                                </title>
                            </x_axis>
                            <y_axis>
                                <title>
                                    <text><![CDATA[Sales]]></text>
                                </title>
                            </y_axis>
                        </axes>
                    </chart_settings>
                    <data>
                        <series>
                            <point name="Jan" y="21" />
                            <point name="Feb" y="32" />
                            <point name="Mar" y="43" />
                            <point name="Apr" y="54" />
                        </series>
                    </data>
                </chart>
            </charts>
        </anychart>
    </any:chart>
</body>
</html>

As a result you should see a chart like this:

chart screenshot

Download this sample:
zip: AnyChartJSPInlineXMLSample.zip
war: AnyChartJSPInlineXMLSample.war

4. Charting dynamic data

Add AnyChart.jar to the project and register AnyChart Filter in web.xml as it is shown in 1. Installation.

To create chart that shows dynamic data we recommend you to create AnyChart XML with a separate JSP page with content-type:text/xml

4.1. Single series data

Lets chart this sample data set:

Month	Sales
Jan	21
Feb	32
Mar	44
Apr	52
May	49

4.1.1 Single series data with using Java code in JSP

We will put it into JSP into Array and convert into AnyChart XML - data.jsp

<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%
String[][] sales = new String[5][2];
//Sales data by month
//[0] = month name
//[1] = sales
sales[0][0] = "Jan";
sales[0][1] = "21";

sales[1][0] = "Feb";
sales[1][1] = "32";

sales[2][0] = "Mar";
sales[2][1] = "44";

sales[3][0] = "Apr";
sales[3][1] = "53";

sales[4][0] = "May";
sales[4][1] = "49";

String salesDataStr = "<series>";
for (String[] sale : sales) {
salesDataStr += "<point name=\"" + sale[0] + "\" y=\"" + sale[1] + "\" />";
}
salesDataStr += "</series>";
%>
<anychart>
    <charts>
    <chart>
        <chart_settings>
            <title>
                <text><![CDATA[Product sales by Month]]></text>
            </title>
            <axes>
                <x_axis>
                    <title>
                        <text><![CDATA[Months]]></text>
                    </title>
                </x_axis>
                <y_axis>
                    <title>
                        <text><![CDATA[Sales]]></text>
                    </title>
                </y_axis>
            </axes>
        </chart_settings>
        <data>
            <%=salesDataStr%>
        </data>
    </chart>
    </charts>
</anychart>

index.jsp with the chart should be created as it is described in 3.3. Basic Usage with external XML :

<%@ taglib prefix="any" uri="http://www.anychart.com" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Charting data from array</title>
    </head>
    <body>
        <any:chart width="550" height="400" xmlFile="./data.jsp" />
    </body>
</html>

As a result you should see :

chart screenshot

Download this sample:
zip: AnyChartJSPArray.zip
war: AnyChartJSPArray.war

4.1.1 Single series data with Bean and STL

Lets create a class for that outputs data, required for XML:

package com.anychart.samples;

import java.util.HashMap;

public class SingleSeriesSalesDataSample {

public HashMap<String, String> getSales() {
HashMap<String,String> sales = new HashMap<String, String>(5);
//Sales data by month
sales.put("Jan","21");
sales.put("Feb","32");
sales.put("Mar","44");
sales.put("Apr","53");
sales.put("May","49");
return sales;
}
}

Lets create data.jsp that creates XML:

<%@ page contentType="text/xml;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:useBean id="salesBean" class="com.anychart.samples.SingleSeriesSalesDataSample" />
<anychart>
    <charts>
    <chart>
        <chart_settings>
            <title>
                <text><![CDATA[Product sales by Month]]></text>
            </title>
            <axes>
                <x_axis>
                    <title>
                        <text><![CDATA[Months]]></text>
                    </title>
                </x_axis>
                <y_axis>
                    <title>
                        <text><![CDATA[Sales]]></text>
                    </title>
                </y_axis>
            </axes>
        </chart_settings>
        <data>
     <series name="Products Report">
         <c:forEach var="item" items="${salesBean.sales}">
             <point name="${item.key}" y="${item.value}" />
         </c:forEach>
     </series>
     </data>
    </chart>
    </charts>
</anychart>

index.jsp with the chart should be created as it is described in 3.3. Basic Usage with external XML :

As a result you should see :

chart screenshot

Download this sample:
zip: AnyChartJSPArrayWithBeans.zip
war: AnyChartJSPArrayWithBeans.war

4.2. Multi series data

Add AnyChart.jar to the project and register AnyChart Filter in web.xml as it is shown in 1. Installation.

Lets now chart multi-series data like shown below:

Month	Product A	Product B
Jan	21	32
Feb	32	41
Mar	44	21
Apr	52	23
May	49	33

We will put it into Array and convert into AnyChart XML:

<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%
    String[][] sales = new String[5][3];
    //Sales data by month
    //[0] = Month name
    //[1] = Produc A sales
    //[2] = Product B sales
    sales[0][0] = "Jan";
    sales[0][1] = "21";
    sales[0][2] = "32";

    sales[1][0] = "Feb";
    sales[1][1] = "32";
    sales[1][2] = "41";

    sales[2][0] = "Mar";
    sales[2][1] = "44";
    sales[2][2] = "21";

    sales[3][0] = "Apr";
    sales[3][1] = "53";
    sales[3][2] = "23";

    sales[4][0] = "May";
    sales[4][1] = "49";
    sales[4][2] = "33";

String productASeries = "<series name=\"Product A\">";
String productBSeries = "<series name=\"Product B\">";

    for (String[] sale : sales) {
        productASeries += "<point name=\"" + sale[0] + "\" y=\"" + sale[1] + "\" />";
        productBSeries += "<point name=\"" + sale[0] + "\" y=\"" + sale[2] + "\" />";
    }
    productASeries += "</series>";
    productBSeries += "</series>";

    String salesDataStr = productASeries + productBSeries;
%>
<anychart>
    <charts>
        <chart>
            <chart_settings>
                <title>
                    <text><![CDATA[Product A and Product B sales by Month]]></text>
                </title>
                <axes>
                    <x_axis>
                        <title>
                            <text><![CDATA[Months]]></text>
                        </title>
                    </x_axis>
                    <y_axis>
                        <title>
                            <text><![CDATA[Sales]]></text>
                        </title>
                    </y_axis>
                </axes>
                <legend enabled="true"/>
            </chart_settings>
            <data>
                <%=salesDataStr%>
            </data>
        </chart>
    </charts>
</anychart>

index.jsp with the chart should be created as it is described in 3.3. Basic Usage with external XML :

As a result you should see this chart:

chart screenshot

Download this sample:
zip: AnyChartJSPMultiSeriesArray.zip
war: AnyChartJSPMultiSeriesArray.war

5. Charting data from database

Lets assume we have two tables in our database:

1. anychart_sample_products

id	name
1	Product A
2	Product B

2. anychart_sample_orders

id	product_id	date	volume
1	1	2007-01-01	120
2	1	2007-02-01	230
3	1	2007-03-01	160
4	1	2007-04-01	540
5	1	2007-05-01	110
6	2	2007-02-01	130
7	2	2007-03-01	250
8	2	2007-04-01	320
9	2	2007-05-01	420

The task is to show summary sales volume per product to compare them.

5.1 Charting data from database using JSTL SQL

data.jsp code will look as follows (replace localhost with your server if needed):

<%@ page contentType="text/xml; charset=UTF-8" isELIgnored ="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<sql:setDataSource driver="com.mysql.jdbc.Driver"
  url="jdbc:mysql://localhost/anychart_sample_database?useUnicode=true&characterEncoding=utf8"
  user="root" password="1"/>
<anychart>
  <charts>
    <chart>
      <chart_settings>
        <title>
        <text>Products Sales Volume by Products</text>
        </title>
        <axes>
          <x_axis>
            <title>
              <text>Product Name</text>
            </title>
          </x_axis>
          <y_axis>
            <title>
              <text>Volume</text>
            </title>
            <labels>
              <format>{%Value} $</format>
            </labels>
          </y_axis>
        </axes>
      </chart_settings>
      <data_plot_settings>
        <bar_series>
          <tooltip_settings enabled="true">
            <format><![CDATA[{%Name}{enabled:false} Volume: {%YValue}$]]> </format>
          </tooltip_settings>
        </bar_series>
      </data_plot_settings>

      <data>
        <series name="Products Report">
          <sql:query var="q">
            select p.name as name, sum(o.volume) as value
              from anychart_sample_products p,
                  anychart_sample_orders o
              where p.id = o.product_id
              group by p.name
          </sql:query>
          <c:forEach var="item" items="${q.rows}">
            <point name="${item.name}" y="${item.value}" />
          </c:forEach>
        </series>
      </data>

    </chart>
  </charts>
</anychart>

index.jsp with the chart should be created as it is described in 3.3. Basic Usage with external XML :

Download this sample:
zip: AnyChartJSPJSTLSQL.zip (including dump.sql with database dump)
war: AnyChartJSPJSTLSQL.war

5.2 Charting data from database using Bean

Lets create Bean for getting records from database:

package com.anychart.samples;

import java.sql.*;
import java.util.*;

/**
* Example bean for getting data from MySQL database
*/
public class ProductReportsBean {

/**
* Class for store one result from query
*/
public static class Report {

private String name;
private int value;

/**
* @return the name
*/
public String getName() {
return name;
}

/**
* @return the value
*/
public int getValue() {
return value;
}

}

private static final String url =
"jdbc:mysql://localhost/anychart_sample_database?useUnicode=true&characterEncoding=utf8";
private static final String dbUser = "root";
private static final String dbPass = "1";
private static final String sqlquery =
"select p.name as name, sum(o.volume) as value " +
"from anychart_sample_products p, anychart_sample_orders o " +
"where p.id = o.product_id group by p.name";

public List getReportsList() throws Exception {
Connection conn = null;
Statement st = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url, dbUser, dbPass);
st = conn.createStatement();
rs = st.executeQuery(sqlquery);
List res = new ArrayList();
while (rs.next()) {
Report r = new Report();
r.name = rs.getString("name");
r.value = rs.getInt("value");
res.add(r);
}
return res;
} finally {
try {
if (rs != null) {
rs.close();
}
if (st != null) {
st.close();
}
} finally {
if (conn != null) {
conn.close();
}
}
}
}
}

data.jsp will look as follows:

<%@ page contentType="text/xml; charset=UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:useBean id="bean" class="com.anychart.samples.ProductReportsBean" />
<anychart>
  <charts>
    <chart>
      <chart_settings>
        <title>
        <text>Products Sales Volume by Products</text>
        </title>
        <axes>
          <x_axis>
            <title>
              <text>Product Name</text>
            </title>
          </x_axis>
          <y_axis>
            <title>
              <text>Volume</text>
            </title>
            <labels>
              <format>{%Value} $</format>
            </labels>
          </y_axis>
        </axes>
      </chart_settings>
      <data_plot_settings>
        <bar_series>
          <tooltip_settings enabled="true">
            <format><![CDATA[{%Name}{enabled:false} Volume: {%YValue}$]]> </format>
          </tooltip_settings>
        </bar_series>
      </data_plot_settings>

      <data>
        <series name="Products Report">
          <c:forEach var="item" items="${bean.reportsList}">
            <point name="${item.name}" y="${item.value}" />
          </c:forEach>
        </series>
      </data>

    </chart>
  </charts>
</anychart>

index.jsp with the chart should be created as it is described in 3.3. Basic Usage with external XML :

Download this sample:
zip: AnyChartJSPSQL.zip (including dump.sql with database dump)
war: AnyChartJSPSQL.war

6. Using Gauges

Add Gauge XML as a subnode of <any:gauge />.
JSP Page will look like that:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="any" uri="http://www.anychart.com" %>
<html>
    <head><title>AnyChart Gauge inline XML Sample</title></head>
<body>
    <any:chart width="550" height="400">
        <gauges>
            <gauge>
                <circular>
                    <pointers>
                        <pointer value="21" />
                    </pointers>
                </circular>
            </gauge>
        </gauges>
    </any:chart>
</body>
</html>

To learn more about AnyChart, get User's Guide and XML Reference:
Download Full AnyChart Evaluation Package or View documentation online

Download Trial

Buy Now