Hi everyone,<\/p>\n
Recently in my Grails project I had to implement various fusion charts simultaneously on a single page. When I started implementing multiple fusion charts on a single page, the code became quite messy and complex. It became difficult even for me to understand and handle so many charts. This resulted in a lot of spaghetti code which quickly became unreadable and I needed to think of another way to render the charts in a much more efficient way and readable way. I followed the given steps in order to do so:<\/p>\n
1. First of all create a POGO to carry all the required information to render the fusion chart. For example:<\/p>\n
[code]<\/p>\n
class FbAnalyticsGraphVO {
\n String graphName
\n String graphDivName
\n String title
\n String swfUrl
\n String dataFormat
\n String height
\n String width
\n String dataSource<\/p>\n
\/\/ You can add more fields to further customize your VO and chart.
\n}
\n[\/code]<\/p>\n
2. Now create a template to render an individual chart. For example ‘_customFusionChart.gsp’:<\/p>\n
[code]
\n<div id="${fbAnalyticsGraphVO.graphDivName}"
\n style="height: ${FbAnalyticsGraphVO.height}; width: ${FbAnalyticsGraphVO.width};">
\n<\/div>
\n<script type="text\/javascript">\/\/ <![CDATA[
\n$(function () {
\n if (FusionCharts(‘${FbAnalyticsGraphVO.graphName}’)) {
\n FusionCharts(‘${FbAnalyticsGraphVO.graphName}’).dispose()
\n }<\/p>\n
jQuery(‘#’ + ‘${FbAnalyticsGraphVO.graphDivName}’).insertFusionCharts({
\n swfUrl: "${FbAnalyticsGraphVO.swfUrl}",
\n dataSource: ‘${FbAnalyticsGraphVO.fusionChartDataJson}’,
\n renderer: ‘JavaScript’,
\n dataFormat: "${FbAnalyticsGraphVO.dataFormat}",
\n height: "${FbAnalyticsGraphVO.height}",
\n width: "${FbAnalyticsGraphVO.width}",
\n id: ‘${FbAnalyticsGraphVO.graphName}’
\n });
\n});
\n\/\/ ]]><\/script>
\n[\/code]<\/p>\n
3. Now in your controller, create an action named renderVariousFusionCharts()<\/em><\/strong> which creates and instance of FbAnalyticsGraphVO<\/em><\/strong> for each chart you want to render and add all chart instances into a list as follows:<\/p>\n [code]<\/p>\n def renderVariousFusionCharts() { \/\/Similarly you can prepare FbAnalyticsGraphVO for other charts.<\/p>\n FbAnalyticsGraphVO fusionChart2 = new FbAnalyticsGraphVO(…) render(view: ‘\/demo\/variousFusionCharts’, model: [fbAnalyticsGraphVOs: fbAnalyticsGraphVOs]) [\/code]<\/p>\n This following code segment can then be used to render all the various fusion charts we want using the data sent from the controller:<\/p>\n [code] <head> <body> <\/html> Hope this helps anyone who is looking for a better way to render multiple Fusion charts on a single page.<\/p>\n","protected":false},"excerpt":{"rendered":" Hi everyone, Recently in my Grails project I had to implement various fusion charts simultaneously on a single page. When I started implementing multiple fusion charts on a single page, the code became quite messy and complex. It became difficult even for me to understand and handle so many charts. This resulted in a lot […]<\/p>\n","protected":false},"author":72,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[7],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/12842"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=12842"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/12842\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=12842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=12842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=12842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n List fbAnalyticsGraphVOs = []
\n FbAnalyticsGraphVO fusionChart1 = new FbAnalyticsGraphVO(
\n type: "chartType1",
\n swfUrl: ‘MSArea’,
\n title: "rendering chart type 1",
\n graphName: ‘chartType1Graph’,
\n graphDivName: "chart1GraphDiv",
\n dataFormat: "json",
\n height: ‘100%’,
\n width: ‘100%’,
\n dataSource: ‘..\/demo\/jsonDataForChartType1’
\n )
\n fusionChartList.add(fusionChart1)<\/p>\n
\n fusionChartList.add(fusionChart2)
\n .
\n .
\n .
\n FbAnalyticsGraphVO fusionChart5 = new FbAnalyticsGraphVO(…)
\n fusionChartList.add(fusionChart5)<\/p>\n
\n}<\/p>\n
\n<%@ page import="net.thoughtbuzz.omniog.enums.ArticleSourceType" contentType="text\/html;charset=UTF-8" %>
\n<html><\/p>\n
\n <meta name="layout" content="mainLayout"\/>
\n <title><g:message code="omniog.menu.dashboard"\/><\/title>
\n <g:javascript src="..\/fusionCharts\/js\/FusionCharts.js"\/>
\n <g:javascript src="..\/fusionCharts\/js\/FusionCharts.HC.js"\/>
\n <g:javascript src="..\/fusionCharts\/js\/FusionCharts.HC.Charts.js"\/>
\n <g:javascript src="..\/fusionCharts\/js\/FusionCharts.jqueryplugin.js"\/>
\n <g:javascript src="..\/fusionCharts\/js\/FusionChartsExportComponent.js"\/>
\n<\/head><\/p>\n
\n <div>
\n <g:each test="${fbAnalyticsGraphVOs}" var="fbAnalyticsGraphVO">
\n <span>
\n <h4>${fbAnalyticsGraphVO.title}<\/h4>
\n <g:render template="customFusionChart" model="[fbAnalyticsGraphVO: fbAnalyticsGraphVO]"\/>
\n <\/span>
\n <\/g:each>
\n <\/div>
\n<\/body><\/p>\n
\n[\/code]<\/p>\n