Skip to main content

Overlay Graphs in Grails Application - Open Flash Chart

Ofchart plugin available for Grails, makes it is easy to integrate Open Flash Chart.
The plugin can be downloaded from http://grails.org/plugin/ofchart
The documentation is available at
http://mybytes.wordpress.com/2009/03/09/grails-open-flash-chart-06-is-out/

Though the Open Flash Chart has number of chart options - ofchart plugin documentation has limited information. I believe the documentation work is in progress and may be available anytime soon. An inquisitive mind can experiment and try to accomplish most of the features in Open Flash Chart.
Best place to start is to read the API documentation

A simple example I tried - overlaying a Bar chart and Line chart on a single Chart.
It requires a Grails controller and a GSP as listed below. We can include the "action" to render the chart in any of your existing controllers.



import jofc2.model.Chart
import jofc2.model.elements.LineChart
import jofc2.model.axis.YAxis
import jofc2.model.axis.XAxis
import jofc2.model.axis.Label
import jofc2.model.elements.AreaHollowChart
import jofc2.model.elements.PieChart
import jofc2.model.axis.Label.Rotation
import jofc2.model.elements.BarChart
import jofc2.OFC
import jofc2.model.elements.FilledBarChart
import jofc2.model.elements.SketchBarChart
import jofc2.model.elements.HorizontalBarChart
import jofc2.model.elements.ScatterChart
import java.math.MathContext
import jofc2.model.elements.StackedBarChart
import jofc2.model.elements.StackedBarChart.StackValue

class ChartController {

    def index = { }

    def MANY_LINES = {
    }

    def data1 = new ArrayList < Number>();
    def data2 = new ArrayList < Number>();
    def data3 = new ArrayList < Number>();
    def rand = new Random();

    for (int i = 0; i <: 9; i++) {
      data1.add(1 + rand.nextInt(5));
      data2.add(7 + rand.nextInt(5));
      data3.add(14 + rand.nextInt(5));
    }

    render new Chart("Three lines example").setYAxis(new YAxis().setRange(0, 20, 5)).addElements(
            new LineChart(LineChart.Style.DOT).setWidth(4).setColour("#DFC329").setDotSize(5).addValues(data1),
            new LineChart(LineChart.Style.HOLLOW).setWidth(1).setColour("#6363AC").setDotSize(5).addValues(data2),
            new LineChart().setWidth(1).setColour("#5E4725").setDotSize(5).addValues(data3))
         .addElements(new BarChart().addValues(9, 8, 7, 6, 5, 4, 3, 2, 1))
  }
}





Following is the GSP that includes the above chart.





<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="layout" content="main" />
        <title>Chart example</title>
        <ofchart:resources/>
    </head>
    <body>
       
        <div class="body">
            <h1>Chart Example</h1>           
           
            <ofchart:chart name="demo-chart" url="${ createLink( controller:'chartController', action:'MANY_LINES' )}"
                           width="400" height="200"/>
        </div>
    </body>
</html>


Labels:

Comments

Post a Comment

Popular posts from this blog

Grails - cross-field Date validation

Often we run into domain classes with date fields. If the domain class has two datefields, startDate and endDate, and the rule for a valid combination is "endDate to be greater than startDate", how do we handle? I listed below two of the options, either using domain level constraints or using the domain classes. Option 1: Using domain constraints. Let us take a sample Grails Domain class class Student{ String name String school Date startDate Date endDate } Add the following constraints to enforce validation rules where name, school, startDate cannot be blank and endDate if present should be greater than startDate.
5 comments
Read more

Grails - Querying complex associations

Criteria class allows performing complex searches on grails objects. There are number of shortcut methods for performing queries but these methods have limitations in terms of number of conditions used in "where clauses". Traditional sql "joins" are not possible as shown in some of the Grails "Finder" methods shown below. Sample 1: def list = AccountTransaction.findAllByCompanyCodeAndVoucherDateBetween(branch, fromDate, toDate, params) Sample 2: def list = AccountTransaction.findAllByCompanyCodeAndVoucherDateGreaterThanEquals(branch, fromDate, params) Sample 3: def list = AccountTransaction.findAllByCompanyCodeAndTransGroup(branch, group, params) "params" contains attributes related to sorting, paging etc. It is very easy to use finder methods but when you want to filter objects by more conditions we need to look for alternatives. For understanding the relationships used in this sample, I listed the grails domain classes. class TransactionTyp
4 comments
Read more

Implementing advanced sort in Grails

The "list" pages generated by inbuilt scaffolding/template features of grails have pagination and sorting features. However, if the domain object displayed in the list is a nested object having another domain object as a property, you may notice that sort is not enabled for that field. Boiler plate code for the header of the list is shown below. As you would have noticed few columns have sortable columns automatically generated by Grails command, generate-all or generate-views. The properties 'partyAccount' and 'bankAccount' in this sample are domain classes nested in the domain class 'partyTransaction'. We could convert them to sortable columns by using the tag g:sortableColum
2 comments
Read more