CSC/ECE 517 Spring 2015 E1522 Visualization: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
Line 79: Line 79:
</pre>
</pre>


The resulting chart
The resulting chart looks like below.
[[File:AreaChart.png|center]]


===GoogleCharts===
===GoogleCharts===

Revision as of 03:21, 1 April 2015

Expertiza - Visualization

Project Description

In this project, the data in Expertiza would be presented in a more convenient and instinct way.

Purpose

Overview of Approach

There are quite a few gems available to visualize data in Ruby on Rails, like Goolgecharts <ref>http://googlecharts.rubyforge.org/</ref> and GoogleVisualr <ref>http://googlevisualr.herokuapp.com/</ref>. These gems makes use of Google Visualization API and wrap it to let users write ruby codes to present nice charts in their web pages instead of using Javascript.

GoogleVisualr

GoogleVisualr is a a wrapper around the Google Chart Tools<ref>https://developers.google.com/chart/</ref> which allows users to create beautiful charts with just Ruby, instead of writing JavaScript if using the Google Chart Tools directly.

Work Flow

  • In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).
  • Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
  • In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.

Installing

Installing GoogleVisualr is pretty simple. Just include the following gem in the Gemfile.

gem "google_visualr", "~> 2.1.0"

And in the Rails layout, load Google Ajax API in the head tag, at the very top.

<script src='http://www.google.com/jsapi'></script>;

Work Flow

  • In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).
# Add Column Headers
  data_table.new_column('string', 'Year' )
  data_table.new_column('number', 'Sales')
  data_table.new_column('number', 'Expenses')
  # Add Rows and Values
  data_table.add_rows([
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540]
  ])
  • Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
  • In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>

Chart Examples

Area Chart

The following code presents the example of area chart.

# http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html#Example
  def area_chart

    data_table = GoogleVisualr::DataTable.new
    data_table.new_column('string', 'Year')
    data_table.new_column('number', 'Sales')
    data_table.new_column('number', 'Expenses')
    data_table.add_rows( [
      ['2004', 1000, 400],
      ['2005', 1170, 460],
      ['2006', 660, 1120],
      ['2007', 1030, 540]
    ])

    opts   = { width: 400, height: 240, title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#FF0000'}} }
    @chart = GoogleVisualr::Interactive::AreaChart.new(data_table, opts)

  end

The resulting chart looks like below.

File:AreaChart.png

GoogleCharts

Googlecharts is a ruby gem implements a wrapper for Google Chart API. It is fully tested using RSpec.

Usage

Installing

gem install googlecharts
Example in Ruby on Rails

Controller:

@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])

View:

 <%= image_tag(@line_chart) %>
Basic Usages

require ‘gchart’
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend => 
:data => [1, 2, 3, 4, 5])
Detail Usages

simple line chart:

Gchart.line(:data => [0, 40, 10, 70, 20])

bar chart:

Gchart.bar(:data => [300, 100, 30, 200])

multiple bars chart:

Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])

pie chart:

Gchart.pie(:data => [20, 35, 45])

These usages come from http://googlecharts.rubyforge.org/. If you want to see more usages, go and visit this site.

Visualization in Expertiza

Reference

<references/>