FusionCharts Documentation

Using FusionCharts with RoR- Charting Data from Forms

In this section, we'll show you how to use FusionCharts with Ruby to plot data collected from form.

We'll build a simple restaurant sales example, where the user will enter the items sold by a restaurant in a given week. This data will be submitted in a form to the server. We'll acquire this data and plot it on a chart. For the sake of simplicity, we wouldn't do any processing on this data. However, your real life applications might process data before presenting it on the chart.

Before you go further with this page, we recommend you to please see the previous section "Basic Examples" as we start off from concepts explained in that page.

All code discussed here is present in
Controller : Download Package > Code > RoR > SampleApp > app > controllers > fusioncharts > form_based_controller.rb.
Rhtml : Download Package > Code > RoR > SampleApp > app > views > fusioncharts > form_based folder.

The form is contained in default.html.erb and looks as under:

To display this form, we have defined an action default in the controller form_based_controller.rb. There is no code in this action. It just renders the view. (the form)

Let us see the view.

<HTML>
    <HEAD>
    <TITLE>FusionCharts - Form Based Data Charting Example</TITLE>
        <style type="text/css">
        
        </style>
    </HEAD>
    <BODY>
        <CENTER>
        <h2>FusionCharts Form-Based Data Example</h2>
        <p class='text'>Please enter how many items of each category you
        sold within this week. We'll plot this data on a Pie chart.</p>
        <p class='text'>To keep things simple, we're not validating for
        non-numeric data here. So, please enter valid numeric values only. In
        your real-world applications, you can put your own validators.</p>
        <% form_tag(:action=>'chart') do -%>
        <table width='50%' align='center' cellpadding='2' cellspacing='1'
        border='0' class='text'>
            <tr>
                <td width='50%' align='right'><B>Soups:</B>  </td>
                <td width='50%'><input type='text' size='5' name='Soups'
                value='108'> bowls</td>
            </tr>
            <tr>
                <td width='50%' align='right'><B>Salads:</B>  </td>
                <td width='50%'><input type='text' size='5' name='Salads'
                value='162'> plates</td>
            </tr>
            <tr>
                <td width='50%' align='right'><B>Sandwiches:</B>  </td>
                <td width='50%'><input type='text' size='5' name='Sandwiches'
                value='360'> pieces</td>
            </tr>
            <tr>
                <td width='50%' align='right'><B>Beverages:</B>  </td>
                <td width='50%'><input type='text' size='5' name='Beverages'
                value='171'> cans</td>
            </tr>
            <tr>
                <td width='50%' align='right'><B>Desserts:</B>  </td>
                <td width='50%'><input type='text' size='5' name='Desserts'
                value='99'> plates</td>
            </tr>
            <tr>
                <td width='50%' align='right'> </td>
                <td width='50%'><input type='submit' value='Chart it!'></td>
            </tr>
        <table>
    <% end -%>
        </CENTER>
    </BODY>
</HTML>

Here, we have used form_tag ruby form-helper function to create the form and we have assigned the action "chart" to it. In this example, we have the form text fields hard-coded. In real-world, you would create the form based on some Model and use ruby form-helpers to create the form, the textfields etc. What happens when you click on Chart It button?

Requesting the data and Creating the Chart

The work of requesting the data from submitted form and creating the chart containing the following code:

Controller: Fusioncharts::FormBasedController
Action: chart
#Data is obtained from the submitted form (present in the request)
#In this example, we're directly showing this data back on chart.
#In your apps, you can do the required processing and then show the
#relevant data only.
#The view for this action uses the "common" layout.
def chart
    headers["content-type"]="text/html";
    # Get the values from the request using params[]
    @str_soups = params[:Soups]
    @str_salads = params[:Salads]
    @str_sandwiches = params[:Sandwiches]
    @str_beverages = params[:Beverages]
    @str_desserts = params[:Desserts]

    #The common layout is used only by this function in controller.
    render(:layout => "layouts/common")
end

View:
<% @page_title=" FusionCharts - Form Based Data Charting Example " %>
<% @page_heading="FusionCharts Form-Based Data Example" %>
<% @page_subheading="Restaurant Sales Chart below" %>
<p class='text'>Click on any pie slice to see slicing effect. Or,
right click on chart and choose "Enable Rotation", and then drag and
rotate the chart.</p>
<%
# The xml is obtained as a string from builder template.
str_xml =render "fusioncharts/form_based/form_based_data",{:str_soups => @str_soups,:str_salads => @str_salads,:str_sandwiches => @str_sandwiches,:str_beverages => @str_beverages,:str_desserts => @str_desserts}

#Create the chart - Pie 3D Chart with data from str_xml
render_chart '/FusionCharts/Pie3D.swf','',str_xml,'Sales', 500, 300, false, false do-%>
<% end -%>
<a href='javascript:history.go(-1);'>Enter data again</a>

The controller action does the following:

Gets the data submitted by the form from the request using params[...]
Stores them in global variables accessible to the view

The view calls render function and gets the xml from the builder template form_based_data by passing the form data as parameters to it. Then it calls the render_chart function to create a Pie chart, by passing the xml as parameter.

What does the builder do? Let's see.

# Builds xml for sales of various product categories
# of a Restaurant to be shown in form of a pie-chart.
# The values required here are got as parameters
# Expected parameters: str_soups,str_salads,str_sandwiches,str_beverages,str_desserts
xml = Builder::XmlMarkup.new
xml.graph(:caption=>'Sales by Product Category', :subCaption=>'For this week', :showPercentageInLabel=>'1',:pieSliceDepth=>'25',:decimalPrecision=>'0',:showNames=>'1') do
    xml.set(:label=>'Soups',:value=>str_soups)
    xml.set(:label=>'Salads',:value=>str_salads)
    xml.set(:label=>'Sandwiches',:value=>str_sandwiches)
    xml.set(:label=>'Beverages',:value=>str_beverages)
    xml.set(:label=>'Desserts',:value=>str_desserts)
end

The builder builds the xml with outermost tag as <graph> element. Inside this, it puts the <set> element. The attributes of the set tag are label and value. The values are picked from the parameters received from the view. That's it. Now, when you click on "Chart it" button, this is what you will see: