Customizing Fusion Chart For Various Type Via Grails
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:
[code]
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.
}
[/code]
2. Now create a template to render an individual chart. For example ‘_customFusionChart.gsp’:
[code]
<div id="${fbAnalyticsGraphVO.graphDivName}"
style="height: ${FbAnalyticsGraphVO.height}; width: ${FbAnalyticsGraphVO.width};">
</div>
<script type="text/javascript">// <![CDATA[
$(function () {
if (FusionCharts(‘${FbAnalyticsGraphVO.graphName}’)) {
FusionCharts(‘${FbAnalyticsGraphVO.graphName}’).dispose()
}
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>
[/code]
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:
[code]
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’
)
fusionChartList.add(fusionChart1)
//Similarly you can prepare FbAnalyticsGraphVO for other charts.
FbAnalyticsGraphVO fusionChart2 = new FbAnalyticsGraphVO(…)
fusionChartList.add(fusionChart2)
.
.
.
FbAnalyticsGraphVO fusionChart5 = new FbAnalyticsGraphVO(…)
fusionChartList.add(fusionChart5)
render(view: ‘/demo/variousFusionCharts’, model: [fbAnalyticsGraphVOs: fbAnalyticsGraphVOs])
}
[/code]
This following code segment can then be used to render all the various fusion charts we want using the data sent from the controller:
[code]
<%@ page import="net.thoughtbuzz.omniog.enums.ArticleSourceType" contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta name="layout" content="mainLayout"/>
<title><g:message code="omniog.menu.dashboard"/></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"/>
</head>
<body>
<div>
<g:each test="${fbAnalyticsGraphVOs}" var="fbAnalyticsGraphVO">
<span>
<h4>${fbAnalyticsGraphVO.title}</h4>
<g:render template="customFusionChart" model="[fbAnalyticsGraphVO: fbAnalyticsGraphVO]"/>
</span>
</g:each>
</div>
</body>
</html>
[/code]
Hope this helps anyone who is looking for a better way to render multiple Fusion charts on a single page.
