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};">
</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>

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'
   )
 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])
}

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" %>
<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>

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

Tag -

FOUND THIS USEFUL? SHARE IT

Leave a comment -