{"id":15682,"date":"2017-01-20T16:15:02","date_gmt":"2017-01-20T10:45:02","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=15682"},"modified":"2026-01-20T14:40:22","modified_gmt":"2026-01-20T09:10:22","slug":"creating-charts-using-fusioncharts-javaserver-faces","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/","title":{"rendered":"Creating Charts Using FusionCharts and JavaServer Faces 2026"},"content":{"rendered":"<p>FusionCharts Suite XT includes a wide plethora of charts that ease the process of data visualization tremendously. Another plus with this suite is that the JavaScript-based charts use the simple XML and JSON  data formats for feeding data. <\/p>\n<p>FusionCharts Suite XT can be also used with a number of server-side and client-side technologies, allowing developers to work with the technology of their choice.<\/p>\n<p>This article introduces another new dimension to using the suite\u2014creating charts from the FusionCharts library using JavaServer Faces.<\/p>\n<p>JavaServer Faces is a Java specification or a framework for building component-based user interfaces for web applications. The Javaserver Faces API is designed to simplify the development of the user interface for a web application. FusionCharts Suite XT can also be rendered in a JSF page using the Java Wrapper.<\/p>\n<p>Let&#8217;s now get started with the requirements and the steps for using FusionCharts using JavaServer Faces.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#Set_Up_The_Requirements\" title=\"Set Up The Requirements\">Set Up The Requirements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#Creating_a_Basic_Chart\" title=\"Creating a Basic Chart\">Creating a Basic Chart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#Viewing_the_Chart\" title=\"Viewing the Chart\">Viewing the Chart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#Was_There_a_Problem_Rendering_Charts\" title=\"Was There a Problem Rendering Charts?\">Was There a Problem Rendering Charts?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Set_Up_The_Requirements\"><\/span>Set Up The Requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To get the code (for creating charts) in this blog working, we need to first download the following components on our local machine:<\/p>\n<ul>\n<li>FusionCharts Suite XT [<a href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\n<li>FusionCharts JSP Wrapper [<a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/java\/your-first-chart-using-java\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Creating_a_Basic_Chart\"><\/span>Creating a Basic Chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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.<\/p>\n<p>To create a basic chart, we first need to create a chart object. Follow the steps mentioned below and you&#8217;ll be done with the creation of chart object.<\/p>\n<p><b>Step 1:<\/b> Create a Java class in your project. The created class will return the entire FusionCharts structure that gets rendered in an xhtml page.<\/p>\n<p><b>Note:<\/b> 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.<\/p>\n<pre class=\"lang:javascript\">package fusioncharts;\r\n\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.RequestScoped;\r\n\r\n@ManagedBean(name = &#x22;fusioncharts&#x22;)\r\n@RequestScoped\r\npublic class bean{\r\n   \r\n    public static String createfusioncharts(){\r\n     FusionCharts area2dChart = new FusionCharts(\r\n                    &#x22;area2d&#x22;,\/\/ chartType\r\n                    &#x22;myFirstChart&#x22;,\/\/ chartId\r\n                    &#x22;600&#x22;,&#x22;400&#x22;,\/\/ chartWidth, chartHeight\r\n                    &#x22;chart&#x22;,\/\/ chartContainer\r\n                    &#x22;json&#x22;,\/\/ dataFormat\r\n                    &#x22;{\\&#x22;chart\\&#x22;: {\\&#x22;caption\\&#x22;: \\&#x22;Sales of Liquor\\&#x22;,\\&#x22;subCaption\\&#x22;: \\&#x22;Last week\\&#x22;, \\&#x22;xAxisName\\&#x22;: \\&#x22;Day\\&#x22;,  \\&#x22;yAxisName\\&#x22;: \\&#x22;Sales (In USD)\\&#x22;,\\&#x22;numberPrefix\\&#x22;: \\&#x22;$\\&#x22;,\\&#x22;paletteColors\\&#x22;: \\&#x22;#0075c2\\&#x22;,  \\&#x22;bgColor\\&#x22;: \\&#x22;#ffffff\\&#x22;,\\&#x22;showBorder\\&#x22;: \\&#x22;0\\&#x22;,\\&#x22;showCanvasBorder\\&#x22;: \\&#x22;0\\&#x22;,\\&#x22;plotBorderAlpha\\&#x22;: \\&#x22;10\\&#x22;,\\&#x22;usePlotGradientColor\\&#x22;: \\&#x22;0\\&#x22;,\\&#x22;plotFillAlpha\\&#x22;: \\&#x22;50\\&#x22;,\\&#x22;showXAxisLine\\&#x22;: \\&#x22;1\\&#x22;,\\&#x22;axisLineAlpha\\&#x22;: \\&#x22;25\\&#x22;,\\&#x22;divLineAlpha\\&#x22;: \\&#x22;10\\&#x22;, \\&#x22;showValues\\&#x22;: \\&#x22;1\\&#x22;,\\&#x22;showAlternateHGridColor\\&#x22;: \\&#x22;0\\&#x22;,    \\&#x22;captionFontSize\\&#x22;: \\&#x22; 14\\&#x22;,    \\&#x22;subcaptionFontSize\\&#x22;: \\&#x22;14\\&#x22;,    \\&#x22;subcaptionFontBold\\&#x22;: \\&#x22;0\\&#x22;,    \\&#x22;toolTipColor\\&#x22;: \\&#x22;#ffffff\\&#x22;,    \\&#x22;toolTipBorderThickness\\&#x22;: \\&#x22;0\\&#x22;,    \\&#x22;toolTipBgColor\\&#x22;: \\&#x22;#000000\\&#x22;,    \\&#x22; toolTipBgAlpha\\&#x22;: \\&#x22;80\\&#x22;,    \\&#x22;toolTipBorderRadius\\&#x22;: \\&#x22;2\\&#x22;,    \\&#x22;toolTipPadding\\&#x22;: \\&#x22;5\\&#x22; },\\&#x22;data\\&#x22;:[{\\&#x22;label\\&#x22;:\\&#x22;Mon\\&#x22;,\\&#x22;value\\&#x22;:\\&#x22;5123\\&#x22;},{\\&#x22;label\\&#x22;: \\&#x22;Tue\\&#x22;,\\&#x22;value\\&#x22;: \\&#x22;4633\\&#x22;}, {\\&#x22;label\\&#x22;: \\&#x22;Wed\\&#x22;,\\&#x22;value\\&#x22;: \\&#x22;5507\\&#x22; }, {\\&#x22;label\\&#x22;: \\&#x22;Thu\\&#x22;,\\&#x22;value\\&#x22;: \\&#x22;4910\\&#x22;}, {\\&#x22;label\\&#x22;: \\&#x22;Fri\\&#x22;,\\&#x22;value\\&#x22;: \\&#x22;5529\\&#x22;}, {\\&#x22;label\\&#x22;: \\&#x22;Sat\\&#x22;,\\&#x22;value\\&#x22;: \\&#x22;5803\\&#x22;}, {\\&#x22;label\\&#x22;: \\&#x22;Sun\\&#x22;,\\&#x22;value\\&#x22;: \\&#x22;6202\\&#x22; }]}&#x22;\r\n                );\r\n     \r\n     String data = area2dChart.render();\r\n       return data;      \r\n    }\r\n}<\/pre>\n<p><b>Step 2:<\/b> Create an xhtml page that will render the required chart in the browser.<\/p>\n<pre class=\"lang:markup\">&#x3C;?xml version=&#x27;1.0&#x27; encoding=&#x27;UTF-8&#x27; ?&#x3E;\r\n&#x3C;!DOCTYPE html PUBLIC &#x22;-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN&#x22; &#x22;https:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd&#x22;&#x3E;\r\n \r\n&#x3C;html xmlns=&#x22;https:\/\/www.w3.org\/1999\/xhtml&#x22;\r\n      xmlns:h=&#x22;https:\/\/xmlns.jcp.org\/jsf\/html&#x22;\r\n      xmlns:jsf=&#x22;https:\/\/xmlns.jcp.org\/jsf&#x22;\r\n     &#x3E;\r\n    &#x3C;h:head&#x3E;\r\n         &#x3C;title&#x3E;Loading Data from a Static JSON String - fusioncharts.com&#x3C;\/title&#x3E;\r\n \r\n &#x3C;h:outputScript name=&#x22;fusioncharts.js&#x22; library=&#x22;js&#x22;\/&#x3E;\r\n  &#x3C;h:outputScript name=&#x22;fusioncharts.charts.js&#x22; library=&#x22;js&#x22;\/&#x3E;\r\n    &#x3C;\/h:head&#x3E;\r\n    &#x3C;h:body&#x3E;\r\n    &#x3C;div id=&#x22;chart&#x22;&#x3E;&#x3C;\/div&#x3E;\r\n    \r\n&#x3C;h:outputText value=&#x22;#{fusioncharts.createfusioncharts()}&#x22; escape=&#x22;false&#x22;\/&#x3E;\r\n \r\n    &#x3C;\/h:body&#x3E;\r\n&#x3C;\/html&#x3E;<\/pre>\n<p>Finally, include the library files. Create a folder, <b>resources<\/b> under root folder of your local machine. Within the resources folder, create another folder, <b>js<\/b>. Include the JavaScript files inside the js folder.<\/p>\n<p>The folder structure looks as shown below:<\/p>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/folder-structure.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/folder-structure.png\" alt=\"folder structure\" align=\"middle\" width=\"320\" height=\"174\" class=\"alignnone size-full wp-image-15686\" srcset=\"\/blog\/wp-content\/uploads\/2017\/01\/folder-structure.png 320w, \/blog\/wp-content\/uploads\/2017\/01\/folder-structure-150x82.png 150w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Viewing_the_Chart\"><\/span>Viewing the Chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now, as you are done with all the steps needed to render a chart, simply run the <b>.xhtml<\/b> file to render the chart.<\/p>\n<p>The output looks as shown below:<\/p>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/sc6.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/sc6.png\" alt=\"sc6\" width=\"620\" height=\"450\" class=\"alignnone size-full wp-image-15687\" \/><\/a><\/p>\n<p>If you find any difficulty in rendering the chart or you see any error in your code, click <a href=\"https:\/\/www.dropbox.com\/s\/qb9nqlxz95euplz\/fusioncharts_in_jsf.zip?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to download the complete source code of the sample project we have created for this tutorial.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Was_There_a_Problem_Rendering_Charts\"><\/span>Was There a Problem Rendering Charts?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In case something went wrong and you are unable to see the chart, check for the following:<\/p>\n<ul>\n<li>The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.<\/li>\n<li>If the chart does not show up at all, check if the <b>fusioncharts.js<\/b> and fusioncharts wrapper <b>FusionCharts.java<\/b> was loaded. Also, check if the path to fusioncharts.js and FusionCharts.java file is correct, and whether the file exists in that location.<\/li>\n<\/ul>\n<ul>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>FusionCharts Suite XT includes a wide plethora of charts that ease the process of data visualization tremendously. Another plus with this suite is that the JavaScript-based charts use the simple XML and JSON data formats for feeding data. FusionCharts Suite XT can be also used with a number of server-side and client-side technologies, allowing developers [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[621,617,537,152,618,213,620,619],"coauthors":[647,648],"class_list":["post-15682","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-component-based-user-interfaces","tag-creating-charts-using-fusioncharts-and-javaserver-faces","tag-framework","tag-fusioncharts","tag-fusioncharts-and-javascerver-faces","tag-javaserver-faces","tag-web-applications","tag-xhtml"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating Charts Using FusionCharts and JavaServer Faces<\/title>\n<meta name=\"description\" content=\"Render interactive FusionCharts in JavaServer Faces using the Java wrapper. Step-by-step guide covering JSF component setup, data binding &amp; chart rendering.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Charts Using FusionCharts and JavaServer Faces\" \/>\n<meta property=\"og:description\" content=\"Render interactive FusionCharts in JavaServer Faces using the Java wrapper. Step-by-step guide covering JSF component setup, data binding &amp; chart rendering.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-20T10:45:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:10:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/01\/folder-structure.png\" \/>\n\t<meta property=\"og:image:width\" content=\"320\" \/>\n\t<meta property=\"og:image:height\" content=\"174\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dishank Tiwari, Ayan Bhadury\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dishank Tiwari, Ayan Bhadury\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Dishank Tiwari\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad\"\n\t            },\n\t            \"headline\": \"Creating Charts Using FusionCharts and JavaServer Faces 2026\",\n\t            \"datePublished\": \"2017-01-20T10:45:02+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:22+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/\"\n\t            },\n\t            \"wordCount\": 541,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/folder-structure.png\",\n\t            \"keywords\": [\n\t                \"component based user interfaces\",\n\t                \"creating charts using fusioncharts and javaserver faces\",\n\t                \"framework\",\n\t                \"FusionCharts\",\n\t                \"fusioncharts and javascerver faces\",\n\t                \"JavaServer Faces\",\n\t                \"web applications\",\n\t                \"xhtml\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/\",\n\t            \"name\": \"Creating Charts Using FusionCharts and JavaServer Faces\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/folder-structure.png\",\n\t            \"datePublished\": \"2017-01-20T10:45:02+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:22+00:00\",\n\t            \"description\": \"Render interactive FusionCharts in JavaServer Faces using the Java wrapper. Step-by-step guide covering JSF component setup, data binding & chart rendering.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#primaryimage\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/folder-structure.png\",\n\t            \"contentUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/folder-structure.png\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Creating Charts Using FusionCharts and JavaServer Faces 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad\",\n\t            \"name\": \"Dishank Tiwari\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/edab16f3ae97d48c528d1820c0597954\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg\",\n\t                \"caption\": \"Dishank Tiwari\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/dishank-tiwari\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Charts Using FusionCharts and JavaServer Faces","description":"Render interactive FusionCharts in JavaServer Faces using the Java wrapper. Step-by-step guide covering JSF component setup, data binding & chart rendering.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/","og_locale":"en_US","og_type":"article","og_title":"Creating Charts Using FusionCharts and JavaServer Faces","og_description":"Render interactive FusionCharts in JavaServer Faces using the Java wrapper. Step-by-step guide covering JSF component setup, data binding & chart rendering.","og_url":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-01-20T10:45:02+00:00","article_modified_time":"2026-01-20T09:10:22+00:00","og_image":[{"width":320,"height":174,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/01\/folder-structure.png","type":"image\/png"}],"author":"Dishank Tiwari, Ayan Bhadury","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dishank Tiwari, Ayan Bhadury","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/"},"author":{"name":"Dishank Tiwari","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad"},"headline":"Creating Charts Using FusionCharts and JavaServer Faces 2026","datePublished":"2017-01-20T10:45:02+00:00","dateModified":"2026-01-20T09:10:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/"},"wordCount":541,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/folder-structure.png","keywords":["component based user interfaces","creating charts using fusioncharts and javaserver faces","framework","FusionCharts","fusioncharts and javascerver faces","JavaServer Faces","web applications","xhtml"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/","url":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/","name":"Creating Charts Using FusionCharts and JavaServer Faces","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/folder-structure.png","datePublished":"2017-01-20T10:45:02+00:00","dateModified":"2026-01-20T09:10:22+00:00","description":"Render interactive FusionCharts in JavaServer Faces using the Java wrapper. Step-by-step guide covering JSF component setup, data binding & chart rendering.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#primaryimage","url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/folder-structure.png","contentUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/01\/folder-structure.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-using-fusioncharts-javaserver-faces\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Charts Using FusionCharts and JavaServer Faces 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad","name":"Dishank Tiwari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/edab16f3ae97d48c528d1820c0597954","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg","caption":"Dishank Tiwari"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/dishank-tiwari\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=15682"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15682\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=15682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=15682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=15682"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=15682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}