Using FusionCharts with RoR - Charting Data from an Array
In this section, we'll show you how to use FusionCharts and Ruby to plot charts from data contained in Ruby arrays. We'll cover the following examples here:
- Creating a single series chart from data contained in arrays
- Creating a multi series chart from data contained in arrays
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.
Controller : Download Package > Code > RoR > app > controllers > array_example_controller.rb.
Rhtml : Download Package > Code > RoR > app > views > array_example folder.
Controller:array_example_controller.rb
Action: singleseries
class ArrayExampleController < ApplicationController
def singleseries
#Let's store the sales data for 6 products in our array. We also store the name of products.
#Store Name of Products , sales data
arrData=[
["Product A",567500],
["Product B",815300],
["Product C",556800],
["Product D",734500],
["Product E",676800],
["Product F",648500]
]
#Now, we need to convert this data into XML. We convert using string concatenation.
strXML=''
#Initialize <chart> element
strXML = "<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='0'>"
#Convert data to XML and append
index=0
until index > arrData.length - 1
strXML = strXML + "<set label='" + arrData[index][0].to_s + "' value='" + arrData[index][1].to_s + "' />"
index+=1
end
#Close <chart> element
strXML = strXML + "</chart>"
#Create the chart - Column 3D Chart with data contained in strXML
@chart=renderChart("/FusionCharts/Column3D.swf", "", strXML, "productSales", 600, 300, false, false)
end
end
View:
<HTML>
<HEAD>
<TITLE> FusionCharts - Array Example using Single Series Column 3D Chart </TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="/FusionCharts/FusionCharts.js">;</SCRIPT>
</HEAD>
<BODY>
<%= @chart%>
</BODY>
</HTML>
In the above example, we first include FusionCharts.js file to enable us embed the chart using JavaScript.
Thereafter, we define an Ruby array arrData to store sales data for 6 different products. The array has two columns - first one for data label and the next one for data values.
We define a variable strXML to store the entire XML data. To build the XML, we iterate through the array and using string concatenation. Finally, we render the chart using renderChart() function and pass strXML as dataXML.
When you view the chart, you'll see a chart as under:
Controller: array_example_controller.rb
Action: multiseries
class ArrayExampleController < ApplicationController
def multiseries
#Let's store the sales data for 6 products in our array. We also store
#the name of products.
#Store Name of Products
arrData =[
["Product A",567500,547300],
["Product B",815300,584500],
["Product C",556800,754000],
["Product D",734500,456300],
["Product E",676800,754500],
["Product F",648500,437600],
]
#Now, we need to convert this data into multi-series XML.
#We convert using string concatenation.
#strXML - Stores the entire XML
#strCategories - Stores XML for the <categories> and child <category> elements
#strDataCurr - Stores XML for current year's sales
#strDataPrev - Stores XML for previous year's sales
strXML=''
strCategories=''
strDataCurr=''
strDataPrev=''
#Initialize <chart> element
strXML = "<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='1' rotateValues='1' placeValuesInside='1'
decimals='0' >"
#Initialize <categories> element - necessary to generate a multi-series chart
strCategories = "<categories>"
#Initiate <dataset> elements
strDataCurr = "<dataset seriesName='Current Year'>"
strDataPrev = "<dataset seriesName='Previous Year'>"
index=0
#Iterate through the data
until index > arrData.length - 1
#Append <category name='...' /> to strCategories
strCategories = strCategories + "<category name='" + arrData[index][0].to_s + "' />"
#Add <set value='...' /> to both the datasets
strDataCurr = strDataCurr + "<set value='" + arrData[index][1].to_s + "' />"
strDataPrev = strDataPrev + "<set value='" + arrData[index][2].to_s + "' />"
index+=1
end
#Close <categories> element
strCategories = strCategories + "</categories>"
#Close <dataset> elements
strDataCurr = strDataCurr + "</dataset>"
strDataPrev = strDataPrev + "</dataset>"
#Assemble the entire XML now
strXML = strXML + strCategories + strDataCurr + strDataPrev + "</chart>"
# headers['Content-Type'] = "text/xml"
#render :text=> strXML,:layout=>false
#Create the chart - MS Column 3D Chart with data contained in strXML
@chart=renderChart("/FusionCharts/MSColumn3D.swf", "", strXML, "productSales", 600, 300, false, false)
end
end
View:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript" SRC="/FusionCharts/FusionCharts.js">"></SCRIPT>
</HEAD>
<BODY>
<%= @chart%>
</BODY>
</HTML>
In the above example, we first include FusionCharts.js file to enable us embed the chart using JavaScript.
Thereafter, we define an Ruby array arrData to store sales data for 6 different products. The array has three columns - first one for data label (product) and the next two for data values. The first data value column would store sales information
for current year and the second one for previous year.
We define a variable strXML to store the entire XML data. We also define strCategories, strDataCurr and strDataPrev variables to store XML data for categories elements, current year's dataset and previous year's dataset respectively. To build the XML, we iterate through the array and using string concatenation. We concatenate the entire XML finally in strXML.
Finally, we render the chart using renderChart() function and pass strXML as dataXML.
When you view the chart, you'll see a chart as under:
