Using FusionCharts with JSP > Charting Data from an Array

In this section, we'll show you how to use FusionCharts and JSP to plot charts from data contained in JSP arrays. We'll cover the following examples here:

  • Creating a single series chart from data contained in arrays
  • Creating a multi-serise chart from data contained in arrays

Before you go further with this page, we recommend you to please see the previous section "Basic Examples" as we start off from concepts explained in that page.

The code examples contained in this page are present in Download Package > Code > JSP > ArrayExample folder.

 
Creating a single series chart from data contained in arrays
The code to create a single series chart is contained in SingleSeries.jsp and can be listed as under:
<%
/*We've included ../Includes/FusionCharts.jsp, which contains functions
to help us easily create the charts that can be embedded.*/
%>
<%@ include file="../Includes/FusionCharts.jsp"%>
<HTML>
   <HEAD>
      <TITLE> FusionCharts - Array Example using Single Series Column 3D Chart</TITLE>
       <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
   </HEAD>
   <BODY>
   <%
   /*In this example, we plot a single series chart from data contained
   in an array. The array will have two columns - first one for data label
   and the next one for data values.

   Let's store the sales data for 6 products in our array. We also store
   the name of products. */
   String[][] arrData = new String[6][2];
   //Store Name of Products
   arrData[0][0] = "Product A";
   arrData[1][0] = "Product B";
   arrData[2][0] = "Product C";
   arrData[3][0] = "Product D";
   arrData[4][0] = "Product E";
   arrData[5][0] = "Product F";

   //Store sales data
   arrData[0][1] = "567500";
   arrData[1][1] = "815300";
   arrData[2][1] = "556800";
   arrData[3][1]= "734500";
   arrData[4][1] = "676800";
   arrData[5][1] = "648500";

   //Now, we need to convert this data into XML. We convert using string concatenation.
   String strXML;
   int i=0;
   //Initialize <chart> element
   strXML = "<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='0'>";
   //Convert data to XML and append
   for(i=0;i<arrData.length-1;i++){
      strXML = strXML + "<set label='" +arrData[i][0] + "'       value='" + arrData[i][1] + "' />";
   }
   //Close <chart> element
   strXML = strXML + "</chart>";    
   
   //Create the chart - Column 3D Chart with data contained in strXML
   String chartCode= createChart("../../FusionCharts/Column3D.swf",    "", strXML, "productSales", 600, 300, false, false);
   %>
   <%=chartCode%>

   </BODY>
</HTML>

In the above example, we first include FusionCharts.js file to enable us embed the chart using JavaScript. We also include FusionCharts.jsp to help us easily create the charts that can be embedded.

Thereafter, we define an JSP array arrData to store sales data for 6 different products. The array has two columns - first one for data label and the next one for data values.

We define a variable strXML to store the entire XML data. To build the XML, we iterate through the array and use string concatenation. Finally, we create the chart using createChart() method and pass strXML as dataXML and render this chart.

When you view the chart, you'll see a chart as under:

 
Creating a multi-series chart from data contained in arrays
Let us now create a multi-series chart from data contained in arrays. We create a file MultiSeries.jsp with the following code:


<%@ include file="../Includes/FusionCharts.jsp"%>

<HTML>
   <HEAD>
      <TITLE>FusionCharts - Array Example using Multi Series Column 3D
      Chart
      </TITLE>
      <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
   </HEAD>

   <BODY>
      <%
      /*In this example, we plot a multi series chart from data contained
      in an array. The array will have three columns - first one for data label       (product)
      and the next two for data values. The first data value column would store       sales information
      for current year and the second one for previous year.
      Let's store the sales data for 6 products in our array. We also store
      the name of products.
      */
      String[][] arrData = new String[6][3];
      //Store Name of Products
      arrData[0][0] = "Product A";
      arrData[1][0] = "Product B";
      arrData[2][0] = "Product C";
      arrData[3][0] = "Product D";
      arrData[4][0] = "Product E";
      arrData[5][0] = "Product F";
      //Store sales data
      arrData[0][1] = "567500";
      arrData[1][1] = "815300";
      arrData[2][1] = "556800";
      arrData[3][1]= "734500";
      arrData[4][1] = "676800";
      arrData[5][1] = "648500";

      //Store sales data for previous year
      arrData[0][2]= "547300";
      arrData[1][2] = "584500";
      arrData[2][2]= "754000";
      arrData[3][2]= "456300";
      arrData[4][2]= "754500";
      arrData[5][2]= "437600";
      String strXML = "<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='1' rotateValues='1' placeValuesInside='1'                       decimals='0' >";
      //Initialize <categories> element - necessary to generate a multi-series chart
      String strCategories = "<categories>";
      //Initiate <dataset> elements
      String strDataCurr = "<dataset seriesName='Current Year'>";
      String strDataPrev = "<dataset seriesName='Previous Year'>";
      //Iterate through the data
      for(int i=0;i<arrData.length-1;i++){
         //Append <category name='...' /> to strCategories
         strCategories = strCategories + "<category name='" + arrData[i][0]          + "' />";
         //Add <set value='...' /> to both the datasets
         strDataCurr = strDataCurr + "<set value='" + arrData[i][1]          + "' />";
         strDataPrev = strDataPrev + "<set value='" + arrData[i][2]          + "' />";
      }
      //Close <categories> element
      strCategories = strCategories + "</categories>";
      //Close <dataset> elements
      strDataCurr = strDataCurr + "</dataset>";
      strDataPrev = strDataPrev + "</dataset>";
      //Assemble the entire XML now
      strXML = strXML + strCategories + strDataCurr + strDataPrev + "</chart>";
      //Create the chart - MS Column 3D Chart with data contained in strXML
      String chartCode= createChart("../../FusionCharts/MSColumn3D.swf",       "", strXML, "productSales", 600, 300, false, false);
      %>
      <%=chartCode%> <BR>
     
   </BODY>
</HTML>

In the above example, we first include FusionCharts.js file to enable us embed the chart using JavaScript. We also include FusionCharts.jsp to help us easily create the charts that can be embedded.

Thereafter, we define an JSP array arrData to store sales data for 6 different products. The array has three columns - first one for data label (product) and the next two for data values. The first data value column would store sales information for current year and the second one for previous year.

We define a variable strXML to store the entire XML data. We also define strCategories, strDataCurr and strDataPrev variables to store XML data for categories elements, current year's dataset and previous year's dataset respectively. To build the XML, we iterate through the array and using string concatenation. We concatenate the entire XML finally in strXML.

Finally, we create the chart using createChart() method and pass strXML as dataXML and then render it.

When you view the chart, you'll see a chart as under:

In Download Package > Code > JSP > ArrayExample, we've more example codes to create Stacked and Combination Charts too, which have not been explained here, as they're similar in concept. You can directly see the code and understand them easily.