Customizing Fusion Chart For Various Type Via Grails

09 / Apr / 2014 by Komal Jain 0 comments

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 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:

1. First of all create a POGO to carry all the required information to render the fusion chart. For example:


class FbAnalyticsGraphVO {
String graphName
String graphDivName
String title
String swfUrl
String dataFormat
String height
String width
String dataSource

// You can add more fields to further customize your VO and chart.

2. Now create a template to render an individual chart. For example ‘_customFusionChart.gsp’:

<div id="${fbAnalyticsGraphVO.graphDivName}"
style="height: ${FbAnalyticsGraphVO.height}; width: ${FbAnalyticsGraphVO.width};">
<script type="text/javascript">// <![CDATA[
$(function () {
if (FusionCharts(‘${FbAnalyticsGraphVO.graphName}’)) {

jQuery(‘#’ + ‘${FbAnalyticsGraphVO.graphDivName}’).insertFusionCharts({
swfUrl: "${FbAnalyticsGraphVO.swfUrl}",
dataSource: ‘${FbAnalyticsGraphVO.fusionChartDataJson}’,
renderer: ‘JavaScript’,
dataFormat: "${FbAnalyticsGraphVO.dataFormat}",
height: "${FbAnalyticsGraphVO.height}",
width: "${FbAnalyticsGraphVO.width}",
id: ‘${FbAnalyticsGraphVO.graphName}’
// ]]></script>

3. Now in your controller, create an action named renderVariousFusionCharts() which creates and instance of FbAnalyticsGraphVO for each chart you want to render and add all chart instances into a list as follows:


def renderVariousFusionCharts() {
List fbAnalyticsGraphVOs = []
FbAnalyticsGraphVO fusionChart1 = new FbAnalyticsGraphVO(
type: "chartType1",
swfUrl: ‘MSArea’,
title: "rendering chart type 1",
graphName: ‘chartType1Graph’,
graphDivName: "chart1GraphDiv",
dataFormat: "json",
height: ‘100%’,
width: ‘100%’,
dataSource: ‘../demo/jsonDataForChartType1’

//Similarly you can prepare FbAnalyticsGraphVO for other charts.

FbAnalyticsGraphVO fusionChart2 = new FbAnalyticsGraphVO(…)
FbAnalyticsGraphVO fusionChart5 = new FbAnalyticsGraphVO(…)

render(view: ‘/demo/variousFusionCharts’, model: [fbAnalyticsGraphVOs: fbAnalyticsGraphVOs])


This following code segment can then be used to render all the various fusion charts we want using the data sent from the controller:

<%@ page import="net.thoughtbuzz.omniog.enums.ArticleSourceType" contentType="text/html;charset=UTF-8" %>

<meta name="layout" content="mainLayout"/>
<title><g:message code=""/></title>
<g:javascript src="../fusionCharts/js/FusionCharts.js"/>
<g:javascript src="../fusionCharts/js/FusionCharts.HC.js"/>
<g:javascript src="../fusionCharts/js/FusionCharts.HC.Charts.js"/>
<g:javascript src="../fusionCharts/js/FusionCharts.jqueryplugin.js"/>
<g:javascript src="../fusionCharts/js/FusionChartsExportComponent.js"/>

<g:each test="${fbAnalyticsGraphVOs}" var="fbAnalyticsGraphVO">
<g:render template="customFusionChart" model="[fbAnalyticsGraphVO: fbAnalyticsGraphVO]"/>


Hope this helps anyone who is looking for a better way to render multiple Fusion charts on a single page.


Leave a Reply

Your email address will not be published. Required fields are marked *