{"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":"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. \r\n\r\nFusionCharts 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.\r\n\r\nThis article introduces another new dimension to using the suite\u2014creating charts from the FusionCharts library using JavaServer Faces.\r\n\r\nJavaServer 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.\r\n\r\nLet&#8217;s now get started with the requirements and the steps for using FusionCharts using JavaServer Faces.\r\n\r\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>\r\n\r\nTo get the code (for creating charts) in this blog working, we need to first download the following components on our local machine:\r\n\r\n<ul><li>FusionCharts Suite XT [<a href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Download Link<\/a>]<\/li>\r\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><\/ul>\r\n\r\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>\r\n\r\nBy 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.\r\n\r\nTo 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.\r\n\r\n<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.\r\n\r\n<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.\r\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>\r\n\r\n<b>Step 2:<\/b> Create an xhtml page that will render the required chart in the browser.\r\n\r\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>\r\n\r\nFinally, 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.\r\n\r\nThe folder structure looks as shown below:\r\n\r\n<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>\r\n\r\n<h2><span class=\"ez-toc-section\" id=\"Viewing_the_Chart\"><\/span>Viewing the Chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\nNow, as you are done with all the steps needed to render a chart, simply run the <b>.xhtml<\/b> file to render the chart.\r\n\r\nThe output looks as shown below:\r\n\r\n<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>\r\n\r\nIf 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.\r\n\r\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>\r\n\r\nIn case something went wrong and you are unable to see the chart, check for the following:\r\n\r\n<ul><li>The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.<\/li>\r\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><\/ul><ul>\r\n<\/ul>","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 2026<\/title>\n<meta name=\"description\" content=\"FusionCharts Suite XT offers a wide plethora of charts to ease 2026 data visualization. Explore our suite for professional and interactive results today.\" \/>\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 2026\" \/>\n<meta property=\"og:description\" content=\"FusionCharts Suite XT offers a wide plethora of charts to ease 2026 data visualization. Explore our suite for professional and interactive results today.\" \/>\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 2026\",\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\": \"FusionCharts Suite XT offers a wide plethora of charts to ease 2026 data visualization. Explore our suite for professional and interactive results today.\",\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 2026","description":"FusionCharts Suite XT offers a wide plethora of charts to ease 2026 data visualization. Explore our suite for professional and interactive results today.","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 2026","og_description":"FusionCharts Suite XT offers a wide plethora of charts to ease 2026 data visualization. Explore our suite for professional and interactive results today.","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 2026","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":"FusionCharts Suite XT offers a wide plethora of charts to ease 2026 data visualization. Explore our suite for professional and interactive results today.","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}]}}