{"id":12842,"date":"2014-04-09T02:17:19","date_gmt":"2014-04-08T20:47:19","guid":{"rendered":"https:\/\/2thenew.xyz\/blog\/?p=12842"},"modified":"2014-04-13T18:43:15","modified_gmt":"2014-04-13T13:13:15","slug":"customizing-fusion-chart-for-various-type-via-grails","status":"publish","type":"post","link":"https:\/\/2thenew.xyz\/blog\/customizing-fusion-chart-for-various-type-via-grails\/","title":{"rendered":"Customizing Fusion Chart For Various Type Via Grails"},"content":{"rendered":"

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() {
\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

\/\/Similarly you can prepare FbAnalyticsGraphVO for other charts.<\/p>\n

FbAnalyticsGraphVO fusionChart2 = new FbAnalyticsGraphVO(…)
\n fusionChartList.add(fusionChart2)
\n .
\n .
\n .
\n FbAnalyticsGraphVO fusionChart5 = new FbAnalyticsGraphVO(…)
\n fusionChartList.add(fusionChart5)<\/p>\n

render(view: ‘\/demo\/variousFusionCharts’, model: [fbAnalyticsGraphVOs: fbAnalyticsGraphVOs])
\n}<\/p>\n

[\/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]
\n<%@ page import="net.thoughtbuzz.omniog.enums.ArticleSourceType" contentType="text\/html;charset=UTF-8" %>
\n<html><\/p>\n

<head>
\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

<body>
\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

<\/html>
\n[\/code]<\/p>\n

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":2,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-12842","post","type-post","status-publish","format-standard","hentry","category-grails"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t