Table of Contents
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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://xmlns.jcp.org/jsf/html" xmlns:jsf="https://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:
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…