FusionCharts can effectively be used with JSP to plot dynamic data-driven charts. In this example, we'll show a few basic examples to help you get started.

We'll cover the following examples here:

1. We'll use FusionCharts in JSP with a pre-built Data.xml (which contains data to plot)
2. We'll then change the above chart into a single page chart using dataXML method.
3. Finally, we'll use FusionCharts JavaScript class to embed the chart.

Let's quickly see each of them. Before you proceed with the contents in this page, we strictly recommend you to please go through the section "How FusionCharts works?".

Let's now get to building our first example. In this example, we'll create a "Monthly Unit Sales" chart using dataURL method. For a start, we'll hard code our XML data in a physical XML document Data.xml and then utilize it in our chart contained in an JSP Page (BasicChart.jsp).

Let's first have a look at the XML Data document:

This XML is stored as Data.xml in Data Folder under BasicExample folder. It basically contains the data to create a single series chart to show "Monthly Unit Sales". We'll plot this on a Column 3D Chart. Let's see how to do that.

To plot a Chart that consumes this data, you need to include the HTML code to embed a Flash object and then provide the requisite parameters. To make things simpler for you, we've put all this functionality in an JSP function named as createChartHTML(). This function is contained in Download Package > Code > JSP > Includes > FusionCharts.jsp file. So, whenever you need to work with FusionCharts in JSP, just include this file in your page and then you can work with FusionCharts very easily.

The same functionality is also present in org.infosoftglobal.fusioncharts.FusionChartsCreator.java and it can be imported and used. We will see how to do this later.

Let's see it in example. BasicChart.jsp contains the following code to render the chart:

As you can see above, we've first included FusionCharts.jsp to help us easily create charts. After that, we've simply invoked the createChartHTML function to render the chart. To this function, you need to pass the following parameters (in same order):

When you now run this page, you'll see a chart like the one below.

If you do not see a chart like the one below, please follow the steps listed in Debugging your Charts > Basic Troubleshooting section of this documentation.

Next, we will see how to use FusionChartsCreator.java class instead of functions from FusionCharts.jsp. Using this Java Class is a better better way of creating charts in your applications. However, for the sake for simplicity, in our examples, we'll stick to include function.

BasicChartUsingFusionChartsClass.jsp contains the following code to render the chart:

So, you just saw how simple it is to create a chart using JSP and FusionCharts. For further information about the
FusionChartsCreator class refer to the java documentation of the class (present in Download Package > JSP > JavaDocs)

Let's now convert the above chart to use dataXML method.

As you can see above, we:

1. Include FusionCharts.jsp file to create charts easily
2. Create the XML data document in an JSP variable strXML using string concatenation. Here, we're hard-coding the data. In your applications, you can build this data dynamically after interacting with databases or external sources of data.
3. Finally, create the chart and set the dataXML parameter as strXML. We leave dataURL parameter blank.

When you see this chart, you'll get the same results as before.

Internet Explorer asks you to "Click and activate..." to use the chart. This is happening because of a technical issue on behalf of Microsoft. As such, all Flash movies need to be clicked once before you can start interacting with them.

However, the good news is that there's a solution to it. This thing happens only when you directly embed the HTML code of the chart. It would NOT happen when you use JavaScript to embed the chart. To see how to embed using JavaScript at code level, please see Creating Your First Chart > JavaScript Embedding Section.

Again, to make things simpler for you, we've provided an JSP function called createChart() which helps you wrap this JavaScript function, so that you don't have to get your hands dirty with JavaScript, Flash and HTML. This function is contained in the previously used FusionCharts.jsp or FusionChartsCreator.java file.

Let's now quickly put up a sample to show the use of this function. We create another JSP page SimpleChart.jsp to use this function to plot a chart from data contained in our previously created Data.xml file. It contains the following code:

As you can see above, we've:

1. Included FusionCharts.js file, which is required when using the JavaScript method.
2. Included FusionCharts.jsp file.
3. Created the chart using createChart() method.

The createChart() method takes in the following parameters: