Table of Contents
Set Up The Requirements
To get the code (for creating charts) in this blog working, we need to first download the following components on our local machine:- FusionCharts Suite XT [Download Link]
- FusionCharts JSP Wrapper [Download Link]
Creating a Basic Chart
By following the steps in this article, we will create an area chart which will showcase the sales of liquor in a store for each day of a week. The sales figures will be plotted along the y-axis and the days will be plotted along the x-axis. To create a basic chart, we first need to create a chart object. Follow the steps mentioned below and you’ll be done with the creation of chart object. Step 1: Create a Java class in your project. The created class will return the entire FusionCharts structure that gets rendered in an xhtml page. Note: Include the FusionCharts.java file in the same folder where you have created the above java class. If you have placed the FusionCharts java wrapper inside a different package, import it into the Java class.package fusioncharts; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean(name = "fusioncharts") @RequestScoped public class bean{ public static String createfusioncharts(){ FusionCharts area2dChart = new FusionCharts( "area2d",// chartType "myFirstChart",// chartId "600","400",// chartWidth, chartHeight "chart",// chartContainer "json",// dataFormat "{\"chart\": {\"caption\": \"Sales of Liquor\",\"subCaption\": \"Last week\", \"xAxisName\": \"Day\", \"yAxisName\": \"Sales (In USD)\",\"numberPrefix\": \"$\",\"paletteColors\": \"#0075c2\", \"bgColor\": \"#ffffff\",\"showBorder\": \"0\",\"showCanvasBorder\": \"0\",\"plotBorderAlpha\": \"10\",\"usePlotGradientColor\": \"0\",\"plotFillAlpha\": \"50\",\"showXAxisLine\": \"1\",\"axisLineAlpha\": \"25\",\"divLineAlpha\": \"10\", \"showValues\": \"1\",\"showAlternateHGridColor\": \"0\", \"captionFontSize\": \" 14\", \"subcaptionFontSize\": \"14\", \"subcaptionFontBold\": \"0\", \"toolTipColor\": \"#ffffff\", \"toolTipBorderThickness\": \"0\", \"toolTipBgColor\": \"#000000\", \" toolTipBgAlpha\": \"80\", \"toolTipBorderRadius\": \"2\", \"toolTipPadding\": \"5\" },\"data\":[{\"label\":\"Mon\",\"value\":\"5123\"},{\"label\": \"Tue\",\"value\": \"4633\"}, {\"label\": \"Wed\",\"value\": \"5507\" }, {\"label\": \"Thu\",\"value\": \"4910\"}, {\"label\": \"Fri\",\"value\": \"5529\"}, {\"label\": \"Sat\",\"value\": \"5803\"}, {\"label\": \"Sun\",\"value\": \"6202\" }]}" ); String data = area2dChart.render(); return data; } }Step 2: Create an xhtml page that will render the required chart in the browser.
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:jsf="http://xmlns.jcp.org/jsf" > <h:head> <title>Loading Data from a Static JSON String - fusioncharts.com</title> <h:outputScript name="fusioncharts.js" library="js"/> <h:outputScript name="fusioncharts.charts.js" library="js"/> </h:head> <h:body> <div id="chart"></div> <h:outputText value="#{fusioncharts.createfusioncharts()}" escape="false"/> </h:body> </html>Finally, include the library files. Create a folder, resources under root folder of your local machine. Within the resources folder, create another folder, js. Include the JavaScript files inside the js folder. The folder structure looks as shown below:
Viewing the Chart
Now, as you are done with all the steps needed to render a chart, simply run the .xhtml file to render the chart. The output looks as shown below:Was There a Problem Rendering Charts?
In case something went wrong and you are unable to see the chart, check for the following:- The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.
- If the chart does not show up at all, check if the fusioncharts.js and fusioncharts wrapper FusionCharts.java was loaded. Also, check if the path to fusioncharts.js and FusionCharts.java file is correct, and whether the file exists in that location.