Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-05-03T20:48:40Z

Zchen15: /* Bar Charthttp://googlevisualr.herokuapp.com/examples/interactive/bar_chart */

<font size="6"><b> Expertiza - Visualization </b></font>

=Project Description=
The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

==Purpose==
The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

=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.

====Installing====
Installing GoogleVisualr is pretty simple. Just include the following gem in the Gemfile.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/area_chart</ref>=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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

===gchartrb===
gchartrb<ref>http://code.google.com/p/gchartrb/</ref> is a Ruby wrapper around the Google chart API<ref>http://code.google.com/apis/chart/</ref>. In our project, we use gchartrb to generate all the bar charts in the visualization.

====installing====
Installing gchartrb is simple, just include the gem in the Gemfile.
<pre>
gem 'gchartrb', :require => 'google_chart'
</pre>

====Examples====
=====Bar Chart=====
The following example code would generate a bar chart.
<pre>
# Bar Chart
GoogleChart::BarChart.new('800x200', "Bar Chart", :vertical, false) do |bc|
bc.data "Trend 1", [5,4,3,1,3,5], '0000ff'
bc.data "Trend 2", [1,2,3,4,5,6], 'ff0000'
bc.data "Trend 3", [6,5,4,4,5,6], '00ff00'
puts "\nBar Chart"
puts bc.to_url
end
</pre>
The bar chart would look like below.
[[File:BarChart.png|center]]

=====Line Chart=====
The following example code would generate a line chart.
<pre>
# Line Chart
GoogleChart::LineChart.new('320x200', "Line Chart", false) do |lc|
lc.data "Trend 1", [5,4,3,1,3,5,6], '0000ff'
lc.show_legend = true
lc.data "Trend 2", [1,2,3,4,5,6], '00ff00'
lc.data "Trend 3", [6,5,4,3,2,1], 'ff0000'
lc.axis :y, :range => [0,6], :color => 'ff00ff', :font_size => 16, :alignment => :center
lc.axis :x, :range => [0,6], :color => '00ffff', :font_size => 16, :alignment => :center
lc.grid :x_step => 100.0/6.0, :y_step => 100.0/6.0, :length_segment => 1, :length_blank => 0
puts "\nLine Chart"
puts lc.to_url
end
</pre>
The bar chart would look like below.
[[File:AeraChart.png|center]]

===Circles===

=Visualization in Expertiza=
This section describes where in Expertiza we can use these visualizations to provide a better user experience.
The 'Review Score' view of the assignments can be enhanced using these visualization.

We can see by the image below that currently the scores views includes only a large table. From a user experience perspective having a more prioritized view of the scores would be beneficial. Having all the data available for the user to peruse in a table is informative, but when the user wants only to get a quick idea of how they did in an assignment, it would be helpful to have some sort of visualization.

[[File:score_view.png.jpeg]]

The above scoring which is in tabular form can be enhanced with charts.

=Graphical Score Dashboard=
The scores page was augmented with bar graphs displaying the distributions of each column, as well as a circle icon for the average score for that column. This will allow for easily determining what the reviewers thought of the work, as well as what the range of scores given. The circle graphs with the averages provide a visual for the quality of the work in each of the categories.

[[File:Score_chart.png]]

==New View==

We created a new view under the grades views, called participant_charts. This view is included as a partial in the grades/view_my_scores view. This allows us to not modify any of the existing views and keep the code modular.

==Bar Charts==

For the bar charts we constructed a method that, given the score and the type of bar chart, populates an instance variable that contains the charts. The code was included in the grades controller (grades_controller.rb file) and is shown below

def bar_chart(scores, type)
GoogleChart::BarChart.new("100x100", " ", :vertical, false) do |bc|
data = scores
bc.data "Line green", data, '990000'
#bc.axis :x, :positions => [0, data.size], :range => [0,100]
bc.axis :y, :range => [0, data.max] ,:positions => [data.min, data.max]
bc.show_legend = false
bc.stacked = false
bc.width_spacing_options({:bar_width => 70/(data.size+1),:bar_spacing => 1, :group_spacing => 1})
bc.data_encoding = :extended
@grades_bar_charts[type.to_sym] = (bc.to_url)
end
end

The width of the bars is dependent on the number of scores to show. Assignments with many reviews to show, require smaller bars. This is accomplished by tying the bar_width parameter, to the size of the data.

==Circle Charts==

For the circle charts showing the averages of the columns we used a javascript library, circle.js. By simply passing the scores to the .js code in the grades view as shown in the code below. The circle is then rendered automatically in a div block elsewhere in the view named the same as the id: tag below

<script type="text/javascript">
<% ['review', 'metareview', 'feedback', 'teammate'].each do |type| %>
<% if @pscore[type.to_sym][:scores][:avg]%>
var myCircle = Circles.create({
id: '<%= "#{type}-circle" %>',
radius: 25,
value: <%= @pscore[type.to_sym][:scores][:avg].to_i %>,
maxValue: 100,
width: 7,
text: '<%=@pscore[type.to_sym][:scores][:avg].to_i%>',
colors: ['#FFEB99', '#FFCC00'],
duration: 700,
textClass: 'circles-text'
});

==Show / Hide stats==

The user might want to hide the stats, with that in mind we included a button to toggle the visibility of the charts. Making use of an existing function, toggleElement, we added a link above the charts table that when clicked hides/shows the charts. The code to accomplish this is shown below

<a href="#" name='score-chartLink' onClick="toggleElement('score-chart', 'stats');return false;">hide stats</a>

=Reliability Metric=
Based on the uniformity of the review scores, we compiled a reliability metric. This metric encapsulates the level of agreement between the reviews, and should provide a quick at a glance notion of whether reviewers agree on the scoring for the particular assignment, or whether there is a high variance in the scores given. A good reliability score indicates that the grade given to the assignment by the reviewers is to be trusted, whereas a poor reliability score indicates that there was a high level of disagreement in the reviewers and the instructors should perhaps take a closer look at the participant's assignment.
This reliability score is computed from the standard deviation of the review scores. A standard deviation that's less than 10 will award a good reliability score. A standard deviation between 10 and 20 will award a medium reliability score, whereas a standard deviation greater than 20 will give a poor reliability score.
===Different Icon colors===
[[File:Green_icon.png]]

The color of the three bars Icon, and the number of filled bars is representative of the reliability of the reviews.
Take the case of the green sample icon in the image above, the reviews mostly all agree. Whereas in the following two images, the icon is yellow and red respectively to signify increasingly worrying levels of disparity in review scores.

[[File:Yellow_icon.png]]

[[File:Red_icon.png]]

A similar method to the one used for the bar charts was used. In this case, a horizontal bar chart was created, and the data was dictated by the qualitative score that was passed into the method. This score could be 'good', 'medium' or 'bad'. Based on this string argument the graph is created with the correct number of bars and the correct color.

def reliability_chart(score,type)
GoogleChart::BarChart.new("25x20", " ", :horizontal, false) do |bc|
if score == 'good'
data = [1,1,1]
color = '00ff00'
elsif score == 'medium'
data = [1,1]
color = 'FFCC00'
else
data = [1]
color = '990000'
end
bc.data "Reliability Symbol", data, color
bc.show_legend = false
bc.stacked = false
bc.width_spacing_options({:bar_width => 5,:bar_spacing => 10, :group_spacing => 1})
bc.data_encoding = :extended
@grades_bar_charts[type.to_sym] = (bc.to_url)
end
end

==Reference==
<references/>

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-05-03T20:48:28Z

Zchen15: /* Area Charthttp://googlevisualr.herokuapp.com/examples/interactive/area_chart */

<font size="6"><b> Expertiza - Visualization </b></font>

=Project Description=
The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

==Purpose==
The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

=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.

====Installing====
Installing GoogleVisualr is pretty simple. Just include the following gem in the Gemfile.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/area_chart</ref>=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

The resulting chart looks like below.
[[File:BarChart.png|center]]
=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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

===gchartrb===
gchartrb<ref>http://code.google.com/p/gchartrb/</ref> is a Ruby wrapper around the Google chart API<ref>http://code.google.com/apis/chart/</ref>. In our project, we use gchartrb to generate all the bar charts in the visualization.

====installing====
Installing gchartrb is simple, just include the gem in the Gemfile.
<pre>
gem 'gchartrb', :require => 'google_chart'
</pre>

====Examples====
=====Bar Chart=====
The following example code would generate a bar chart.
<pre>
# Bar Chart
GoogleChart::BarChart.new('800x200', "Bar Chart", :vertical, false) do |bc|
bc.data "Trend 1", [5,4,3,1,3,5], '0000ff'
bc.data "Trend 2", [1,2,3,4,5,6], 'ff0000'
bc.data "Trend 3", [6,5,4,4,5,6], '00ff00'
puts "\nBar Chart"
puts bc.to_url
end
</pre>
The bar chart would look like below.
[[File:BarChart.png|center]]

=====Line Chart=====
The following example code would generate a line chart.
<pre>
# Line Chart
GoogleChart::LineChart.new('320x200', "Line Chart", false) do |lc|
lc.data "Trend 1", [5,4,3,1,3,5,6], '0000ff'
lc.show_legend = true
lc.data "Trend 2", [1,2,3,4,5,6], '00ff00'
lc.data "Trend 3", [6,5,4,3,2,1], 'ff0000'
lc.axis :y, :range => [0,6], :color => 'ff00ff', :font_size => 16, :alignment => :center
lc.axis :x, :range => [0,6], :color => '00ffff', :font_size => 16, :alignment => :center
lc.grid :x_step => 100.0/6.0, :y_step => 100.0/6.0, :length_segment => 1, :length_blank => 0
puts "\nLine Chart"
puts lc.to_url
end
</pre>
The bar chart would look like below.
[[File:AeraChart.png|center]]

===Circles===

=Visualization in Expertiza=
This section describes where in Expertiza we can use these visualizations to provide a better user experience.
The 'Review Score' view of the assignments can be enhanced using these visualization.

We can see by the image below that currently the scores views includes only a large table. From a user experience perspective having a more prioritized view of the scores would be beneficial. Having all the data available for the user to peruse in a table is informative, but when the user wants only to get a quick idea of how they did in an assignment, it would be helpful to have some sort of visualization.

[[File:score_view.png.jpeg]]

The above scoring which is in tabular form can be enhanced with charts.

=Graphical Score Dashboard=
The scores page was augmented with bar graphs displaying the distributions of each column, as well as a circle icon for the average score for that column. This will allow for easily determining what the reviewers thought of the work, as well as what the range of scores given. The circle graphs with the averages provide a visual for the quality of the work in each of the categories.

[[File:Score_chart.png]]

==New View==

We created a new view under the grades views, called participant_charts. This view is included as a partial in the grades/view_my_scores view. This allows us to not modify any of the existing views and keep the code modular.

==Bar Charts==

For the bar charts we constructed a method that, given the score and the type of bar chart, populates an instance variable that contains the charts. The code was included in the grades controller (grades_controller.rb file) and is shown below

def bar_chart(scores, type)
GoogleChart::BarChart.new("100x100", " ", :vertical, false) do |bc|
data = scores
bc.data "Line green", data, '990000'
#bc.axis :x, :positions => [0, data.size], :range => [0,100]
bc.axis :y, :range => [0, data.max] ,:positions => [data.min, data.max]
bc.show_legend = false
bc.stacked = false
bc.width_spacing_options({:bar_width => 70/(data.size+1),:bar_spacing => 1, :group_spacing => 1})
bc.data_encoding = :extended
@grades_bar_charts[type.to_sym] = (bc.to_url)
end
end

The width of the bars is dependent on the number of scores to show. Assignments with many reviews to show, require smaller bars. This is accomplished by tying the bar_width parameter, to the size of the data.

==Circle Charts==

For the circle charts showing the averages of the columns we used a javascript library, circle.js. By simply passing the scores to the .js code in the grades view as shown in the code below. The circle is then rendered automatically in a div block elsewhere in the view named the same as the id: tag below

<script type="text/javascript">
<% ['review', 'metareview', 'feedback', 'teammate'].each do |type| %>
<% if @pscore[type.to_sym][:scores][:avg]%>
var myCircle = Circles.create({
id: '<%= "#{type}-circle" %>',
radius: 25,
value: <%= @pscore[type.to_sym][:scores][:avg].to_i %>,
maxValue: 100,
width: 7,
text: '<%=@pscore[type.to_sym][:scores][:avg].to_i%>',
colors: ['#FFEB99', '#FFCC00'],
duration: 700,
textClass: 'circles-text'
});

==Show / Hide stats==

The user might want to hide the stats, with that in mind we included a button to toggle the visibility of the charts. Making use of an existing function, toggleElement, we added a link above the charts table that when clicked hides/shows the charts. The code to accomplish this is shown below

<a href="#" name='score-chartLink' onClick="toggleElement('score-chart', 'stats');return false;">hide stats</a>

=Reliability Metric=
Based on the uniformity of the review scores, we compiled a reliability metric. This metric encapsulates the level of agreement between the reviews, and should provide a quick at a glance notion of whether reviewers agree on the scoring for the particular assignment, or whether there is a high variance in the scores given. A good reliability score indicates that the grade given to the assignment by the reviewers is to be trusted, whereas a poor reliability score indicates that there was a high level of disagreement in the reviewers and the instructors should perhaps take a closer look at the participant's assignment.
This reliability score is computed from the standard deviation of the review scores. A standard deviation that's less than 10 will award a good reliability score. A standard deviation between 10 and 20 will award a medium reliability score, whereas a standard deviation greater than 20 will give a poor reliability score.
===Different Icon colors===
[[File:Green_icon.png]]

The color of the three bars Icon, and the number of filled bars is representative of the reliability of the reviews.
Take the case of the green sample icon in the image above, the reviews mostly all agree. Whereas in the following two images, the icon is yellow and red respectively to signify increasingly worrying levels of disparity in review scores.

[[File:Yellow_icon.png]]

[[File:Red_icon.png]]

A similar method to the one used for the bar charts was used. In this case, a horizontal bar chart was created, and the data was dictated by the qualitative score that was passed into the method. This score could be 'good', 'medium' or 'bad'. Based on this string argument the graph is created with the correct number of bars and the correct color.

def reliability_chart(score,type)
GoogleChart::BarChart.new("25x20", " ", :horizontal, false) do |bc|
if score == 'good'
data = [1,1,1]
color = '00ff00'
elsif score == 'medium'
data = [1,1]
color = 'FFCC00'
else
data = [1]
color = '990000'
end
bc.data "Reliability Symbol", data, color
bc.show_legend = false
bc.stacked = false
bc.width_spacing_options({:bar_width => 5,:bar_spacing => 10, :group_spacing => 1})
bc.data_encoding = :extended
@grades_bar_charts[type.to_sym] = (bc.to_url)
end
end

==Reference==
<references/>

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-05-03T20:46:24Z

Zchen15: /* Examples */

<font size="6"><b> Expertiza - Visualization </b></font>

=Project Description=
The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

==Purpose==
The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

=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.

====Installing====
Installing GoogleVisualr is pretty simple. Just include the following gem in the Gemfile.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/area_chart</ref>=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

The resulting chart looks like below.
[[File:AeraChart.png|center]]
=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

The resulting chart looks like below.
[[File:BarChart.png|center]]
=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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

===gchartrb===
gchartrb<ref>http://code.google.com/p/gchartrb/</ref> is a Ruby wrapper around the Google chart API<ref>http://code.google.com/apis/chart/</ref>. In our project, we use gchartrb to generate all the bar charts in the visualization.

====installing====
Installing gchartrb is simple, just include the gem in the Gemfile.
<pre>
gem 'gchartrb', :require => 'google_chart'
</pre>

====Examples====
=====Bar Chart=====
The following example code would generate a bar chart.
<pre>
# Bar Chart
GoogleChart::BarChart.new('800x200', "Bar Chart", :vertical, false) do |bc|
bc.data "Trend 1", [5,4,3,1,3,5], '0000ff'
bc.data "Trend 2", [1,2,3,4,5,6], 'ff0000'
bc.data "Trend 3", [6,5,4,4,5,6], '00ff00'
puts "\nBar Chart"
puts bc.to_url
end
</pre>
The bar chart would look like below.
[[File:BarChart.png|center]]

=====Line Chart=====
The following example code would generate a line chart.
<pre>
# Line Chart
GoogleChart::LineChart.new('320x200', "Line Chart", false) do |lc|
lc.data "Trend 1", [5,4,3,1,3,5,6], '0000ff'
lc.show_legend = true
lc.data "Trend 2", [1,2,3,4,5,6], '00ff00'
lc.data "Trend 3", [6,5,4,3,2,1], 'ff0000'
lc.axis :y, :range => [0,6], :color => 'ff00ff', :font_size => 16, :alignment => :center
lc.axis :x, :range => [0,6], :color => '00ffff', :font_size => 16, :alignment => :center
lc.grid :x_step => 100.0/6.0, :y_step => 100.0/6.0, :length_segment => 1, :length_blank => 0
puts "\nLine Chart"
puts lc.to_url
end
</pre>
The bar chart would look like below.
[[File:AeraChart.png|center]]

===Circles===

=Visualization in Expertiza=
This section describes where in Expertiza we can use these visualizations to provide a better user experience.
The 'Review Score' view of the assignments can be enhanced using these visualization.

We can see by the image below that currently the scores views includes only a large table. From a user experience perspective having a more prioritized view of the scores would be beneficial. Having all the data available for the user to peruse in a table is informative, but when the user wants only to get a quick idea of how they did in an assignment, it would be helpful to have some sort of visualization.

[[File:score_view.png.jpeg]]

The above scoring which is in tabular form can be enhanced with charts.

=Graphical Score Dashboard=
The scores page was augmented with bar graphs displaying the distributions of each column, as well as a circle icon for the average score for that column. This will allow for easily determining what the reviewers thought of the work, as well as what the range of scores given. The circle graphs with the averages provide a visual for the quality of the work in each of the categories.

[[File:Score_chart.png]]

==New View==

We created a new view under the grades views, called participant_charts. This view is included as a partial in the grades/view_my_scores view. This allows us to not modify any of the existing views and keep the code modular.

==Bar Charts==

For the bar charts we constructed a method that, given the score and the type of bar chart, populates an instance variable that contains the charts. The code was included in the grades controller (grades_controller.rb file) and is shown below

def bar_chart(scores, type)
GoogleChart::BarChart.new("100x100", " ", :vertical, false) do |bc|
data = scores
bc.data "Line green", data, '990000'
#bc.axis :x, :positions => [0, data.size], :range => [0,100]
bc.axis :y, :range => [0, data.max] ,:positions => [data.min, data.max]
bc.show_legend = false
bc.stacked = false
bc.width_spacing_options({:bar_width => 70/(data.size+1),:bar_spacing => 1, :group_spacing => 1})
bc.data_encoding = :extended
@grades_bar_charts[type.to_sym] = (bc.to_url)
end
end

The width of the bars is dependent on the number of scores to show. Assignments with many reviews to show, require smaller bars. This is accomplished by tying the bar_width parameter, to the size of the data.

==Circle Charts==

For the circle charts showing the averages of the columns we used a javascript library, circle.js. By simply passing the scores to the .js code in the grades view as shown in the code below. The circle is then rendered automatically in a div block elsewhere in the view named the same as the id: tag below

<script type="text/javascript">
<% ['review', 'metareview', 'feedback', 'teammate'].each do |type| %>
<% if @pscore[type.to_sym][:scores][:avg]%>
var myCircle = Circles.create({
id: '<%= "#{type}-circle" %>',
radius: 25,
value: <%= @pscore[type.to_sym][:scores][:avg].to_i %>,
maxValue: 100,
width: 7,
text: '<%=@pscore[type.to_sym][:scores][:avg].to_i%>',
colors: ['#FFEB99', '#FFCC00'],
duration: 700,
textClass: 'circles-text'
});

==Show / Hide stats==

The user might want to hide the stats, with that in mind we included a button to toggle the visibility of the charts. Making use of an existing function, toggleElement, we added a link above the charts table that when clicked hides/shows the charts. The code to accomplish this is shown below

<a href="#" name='score-chartLink' onClick="toggleElement('score-chart', 'stats');return false;">hide stats</a>

=Reliability Metric=
Based on the uniformity of the review scores, we compiled a reliability metric. This metric encapsulates the level of agreement between the reviews, and should provide a quick at a glance notion of whether reviewers agree on the scoring for the particular assignment, or whether there is a high variance in the scores given. A good reliability score indicates that the grade given to the assignment by the reviewers is to be trusted, whereas a poor reliability score indicates that there was a high level of disagreement in the reviewers and the instructors should perhaps take a closer look at the participant's assignment.
This reliability score is computed from the standard deviation of the review scores. A standard deviation that's less than 10 will award a good reliability score. A standard deviation between 10 and 20 will award a medium reliability score, whereas a standard deviation greater than 20 will give a poor reliability score.
===Different Icon colors===
[[File:Green_icon.png]]

The color of the three bars Icon, and the number of filled bars is representative of the reliability of the reviews.
Take the case of the green sample icon in the image above, the reviews mostly all agree. Whereas in the following two images, the icon is yellow and red respectively to signify increasingly worrying levels of disparity in review scores.

[[File:Yellow_icon.png]]

[[File:Red_icon.png]]

A similar method to the one used for the bar charts was used. In this case, a horizontal bar chart was created, and the data was dictated by the qualitative score that was passed into the method. This score could be 'good', 'medium' or 'bad'. Based on this string argument the graph is created with the correct number of bars and the correct color.

def reliability_chart(score,type)
GoogleChart::BarChart.new("25x20", " ", :horizontal, false) do |bc|
if score == 'good'
data = [1,1,1]
color = '00ff00'
elsif score == 'medium'
data = [1,1]
color = 'FFCC00'
else
data = [1]
color = '990000'
end
bc.data "Reliability Symbol", data, color
bc.show_legend = false
bc.stacked = false
bc.width_spacing_options({:bar_width => 5,:bar_spacing => 10, :group_spacing => 1})
bc.data_encoding = :extended
@grades_bar_charts[type.to_sym] = (bc.to_url)
end
end

==Reference==
<references/>

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-05-03T20:44:00Z

Zchen15: /* usage in the project */

<font size="6"><b> Expertiza - Visualization </b></font>

=Project Description=
The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

==Purpose==
The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

=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.

====Installing====
Installing GoogleVisualr is pretty simple. Just include the following gem in the Gemfile.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/area_chart</ref>=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

The resulting chart looks like below.
[[File:AeraChart.png|center]]
=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

The resulting chart looks like below.
[[File:BarChart.png|center]]
=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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

===gchartrb===
gchartrb<ref>http://code.google.com/p/gchartrb/</ref> is a Ruby wrapper around the Google chart API<ref>http://code.google.com/apis/chart/</ref>. In our project, we use gchartrb to generate all the bar charts in the visualization.

====installing====
Installing gchartrb is simple, just include the gem in the Gemfile.
<pre>
gem 'gchartrb', :require => 'google_chart'
</pre>

====Examples====
=====Bar Chart=====
The following example code would generate a bar chart.
<pre>
# Bar Chart
GoogleChart::BarChart.new('800x200', "Bar Chart", :vertical, false) do |bc|
bc.data "Trend 1", [5,4,3,1,3,5], '0000ff'
bc.data "Trend 2", [1,2,3,4,5,6], 'ff0000'
bc.data "Trend 3", [6,5,4,4,5,6], '00ff00'
puts "\nBar Chart"
puts bc.to_url
end
</pre>
The bar chart would look like below.
[[File:BarChart.png|center]]

===Circles===

=Visualization in Expertiza=
This section describes where in Expertiza we can use these visualizations to provide a better user experience.
The 'Review Score' view of the assignments can be enhanced using these visualization.

We can see by the image below that currently the scores views includes only a large table. From a user experience perspective having a more prioritized view of the scores would be beneficial. Having all the data available for the user to peruse in a table is informative, but when the user wants only to get a quick idea of how they did in an assignment, it would be helpful to have some sort of visualization.

[[File:score_view.png.jpeg]]

The above scoring which is in tabular form can be enhanced with charts.

=Graphical Score Dashboard=
The scores page was augmented with bar graphs displaying the distributions of each column, as well as a circle icon for the average score for that column. This will allow for easily determining what the reviewers thought of the work, as well as what the range of scores given. The circle graphs with the averages provide a visual for the quality of the work in each of the categories.

[[File:Score_chart.png]]

==New View==

We created a new view under the grades views, called participant_charts. This view is included as a partial in the grades/view_my_scores view. This allows us to not modify any of the existing views and keep the code modular.

==Bar Charts==

For the bar charts we constructed a method that, given the score and the type of bar chart, populates an instance variable that contains the charts. The code was included in the grades controller (grades_controller.rb file) and is shown below

def bar_chart(scores, type)
GoogleChart::BarChart.new("100x100", " ", :vertical, false) do |bc|
data = scores
bc.data "Line green", data, '990000'
#bc.axis :x, :positions => [0, data.size], :range => [0,100]
bc.axis :y, :range => [0, data.max] ,:positions => [data.min, data.max]
bc.show_legend = false
bc.stacked = false
bc.width_spacing_options({:bar_width => 70/(data.size+1),:bar_spacing => 1, :group_spacing => 1})
bc.data_encoding = :extended
@grades_bar_charts[type.to_sym] = (bc.to_url)
end
end

The width of the bars is dependent on the number of scores to show. Assignments with many reviews to show, require smaller bars. This is accomplished by tying the bar_width parameter, to the size of the data.

==Circle Charts==

For the circle charts showing the averages of the columns we used a javascript library, circle.js. By simply passing the scores to the .js code in the grades view as shown in the code below. The circle is then rendered automatically in a div block elsewhere in the view named the same as the id: tag below

<script type="text/javascript">
<% ['review', 'metareview', 'feedback', 'teammate'].each do |type| %>
<% if @pscore[type.to_sym][:scores][:avg]%>
var myCircle = Circles.create({
id: '<%= "#{type}-circle" %>',
radius: 25,
value: <%= @pscore[type.to_sym][:scores][:avg].to_i %>,
maxValue: 100,
width: 7,
text: '<%=@pscore[type.to_sym][:scores][:avg].to_i%>',
colors: ['#FFEB99', '#FFCC00'],
duration: 700,
textClass: 'circles-text'
});

==Show / Hide stats==

The user might want to hide the stats, with that in mind we included a button to toggle the visibility of the charts. Making use of an existing function, toggleElement, we added a link above the charts table that when clicked hides/shows the charts. The code to accomplish this is shown below

<a href="#" name='score-chartLink' onClick="toggleElement('score-chart', 'stats');return false;">hide stats</a>

=Reliability Metric=
Based on the uniformity of the review scores, we compiled a reliability metric. This metric encapsulates the level of agreement between the reviews, and should provide a quick at a glance notion of whether reviewers agree on the scoring for the particular assignment, or whether there is a high variance in the scores given. A good reliability score indicates that the grade given to the assignment by the reviewers is to be trusted, whereas a poor reliability score indicates that there was a high level of disagreement in the reviewers and the instructors should perhaps take a closer look at the participant's assignment.
This reliability score is computed from the standard deviation of the review scores. A standard deviation that's less than 10 will award a good reliability score. A standard deviation between 10 and 20 will award a medium reliability score, whereas a standard deviation greater than 20 will give a poor reliability score.
===Different Icon colors===
[[File:Green_icon.png]]

The color of the three bars Icon, and the number of filled bars is representative of the reliability of the reviews.
Take the case of the green sample icon in the image above, the reviews mostly all agree. Whereas in the following two images, the icon is yellow and red respectively to signify increasingly worrying levels of disparity in review scores.

[[File:Yellow_icon.png]]

[[File:Red_icon.png]]

A similar method to the one used for the bar charts was used. In this case, a horizontal bar chart was created, and the data was dictated by the qualitative score that was passed into the method. This score could be 'good', 'medium' or 'bad'. Based on this string argument the graph is created with the correct number of bars and the correct color.

def reliability_chart(score,type)
GoogleChart::BarChart.new("25x20", " ", :horizontal, false) do |bc|
if score == 'good'
data = [1,1,1]
color = '00ff00'
elsif score == 'medium'
data = [1,1]
color = 'FFCC00'
else
data = [1]
color = '990000'
end
bc.data "Reliability Symbol", data, color
bc.show_legend = false
bc.stacked = false
bc.width_spacing_options({:bar_width => 5,:bar_spacing => 10, :group_spacing => 1})
bc.data_encoding = :extended
@grades_bar_charts[type.to_sym] = (bc.to_url)
end
end

==Reference==
<references/>

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-05-03T20:33:00Z

Zchen15: /* usage in the project */

<font size="6"><b> Expertiza - Visualization </b></font>

=Project Description=
The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

==Purpose==
The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

=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.

====Installing====
Installing GoogleVisualr is pretty simple. Just include the following gem in the Gemfile.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/area_chart</ref>=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

The resulting chart looks like below.
[[File:AeraChart.png|center]]
=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

The resulting chart looks like below.
[[File:BarChart.png|center]]
=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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

===gchartrb===
gchartrb<ref>http://code.google.com/p/gchartrb/</ref> is a Ruby wrapper around the Google chart API<ref>http://code.google.com/apis/chart/</ref>. In our project, we use gchartrb to generate all the bar charts in the visualization.

====installing====
Installing gchartrb is simple, just include the gem in the Gemfile.
<pre>
gem 'gchartrb', :require => 'google_chart'
</pre>

====usage in the project====
In the project, all bar charts and reliability charts are implemented by gchartrb, as is shown below.
[[File:All_charts.png|center]]

The bar chart shows the score of each individual review or feedback. To generate the chart, the score data is first extracted using method <code>get_scores_for_chart.</code>

===Circles===

=Visualization in Expertiza=
This section describes where in Expertiza we can use these visualizations to provide a better user experience.
The 'Review Score' view of the assignments can be enhanced using these visualization.

We can see by the image below that currently the scores views includes only a large table. From a user experience perspective having a more prioritized view of the scores would be beneficial. Having all the data available for the user to peruse in a table is informative, but when the user wants only to get a quick idea of how they did in an assignment, it would be helpful to have some sort of visualization.

[[File:score_view.png.jpeg]]

The above scoring which is in tabular form can be enhanced with charts.

=Graphical Score Dashboard=
The scores page was augmented with bar graphs displaying the distributions of each column, as well as a circle icon for the average score for that column. This will allow for easily determining what the reviewers thought of the work, as well as what the range of scores given. The circle graphs with the averages provide a visual for the quality of the work in each of the categories.

[[File:Score_chart.png]]

==New View==

We created a new view under the grades views, called participant_charts. This view is included as a partial in the grades/view_my_scores view. This allows us to not modify any of the existing views and keep the code modular.

==Bar Charts==

For the bar charts we constructed a method that, given the score and the type of bar chart, populates an instance variable that contains the charts. The code was included in the grades controller (grades_controller.rb file) and is shown below

def bar_chart(scores, type)
GoogleChart::BarChart.new("100x100", " ", :vertical, false) do |bc|
data = scores
bc.data "Line green", data, '990000'
#bc.axis :x, :positions => [0, data.size], :range => [0,100]
bc.axis :y, :range => [0, data.max] ,:positions => [data.min, data.max]
bc.show_legend = false
bc.stacked = false
bc.width_spacing_options({:bar_width => 70/(data.size+1),:bar_spacing => 1, :group_spacing => 1})
bc.data_encoding = :extended
@grades_bar_charts[type.to_sym] = (bc.to_url)
end
end

The width of the bars is dependent on the number of scores to show. Assignments with many reviews to show, require smaller bars. This is accomplished by tying the bar_width parameter, to the size of the data.

==Circle Charts==

For the circle charts showing the averages of the columns we used a javascript library, circle.js. By simply passing the scores to the .js code in the grades view as shown in the code below. The circle is then rendered automatically in a div block elsewhere in the view named the same as the id: tag below

<script type="text/javascript">
<% ['review', 'metareview', 'feedback', 'teammate'].each do |type| %>
<% if @pscore[type.to_sym][:scores][:avg]%>
var myCircle = Circles.create({
id: '<%= "#{type}-circle" %>',
radius: 25,
value: <%= @pscore[type.to_sym][:scores][:avg].to_i %>,
maxValue: 100,
width: 7,
text: '<%=@pscore[type.to_sym][:scores][:avg].to_i%>',
colors: ['#FFEB99', '#FFCC00'],
duration: 700,
textClass: 'circles-text'
});

==Show / Hide stats==

The user might want to hide the stats, with that in mind we included a button to toggle the visibility of the charts. Making use of an existing function, toggleElement, we added a link above the charts table that when clicked hides/shows the charts. The code to accomplish this is shown below

<a href="#" name='score-chartLink' onClick="toggleElement('score-chart', 'stats');return false;">hide stats</a>

=Reliability Metric=
Based on the uniformity of the review scores, we will compile a reliability metric. This metric encapsulates the level of agreement between the reviews, and should provide a quick at a glance notion of whether reviewers agree on the scoring for the particular assignment, or whether there is a high variance in the scores given. A good reliability score indicates that the grade given to the assignment by the reviewers is to be trusted, whereas a poor reliability score indicates that there was a high level of disagreement in the reviewers and the instructors should perhaps take a closer look at the participant's assignment.
This reliability score is computed from the standard deviation of the review scores. A standard deviation that's less than 10 will award a good reliability score. A standard deviation between 10 and 20 will award a medium reliability score, whereas a standard deviation greater than 20 will give a poor reliability score.
===Different Icon colors===
[[File:MockupG.png]]

The color of the three bars Icon, and the number of filled bars is representative of the reliability of the reviews.
Take the case of the green sample icon in the image above, the reviews mostly all agree. Whereas in the following two images, the icon is yellow and red respectively to signify increasingly worrying levels of disparity in review scores.
[[File:MockupY.png]]
[[File:MockupR.png]]

==Reference==
<references/>

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-05-03T20:30:57Z

Zchen15: /* usage in the project */

<font size="6"><b> Expertiza - Visualization </b></font>

=Project Description=
The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

==Purpose==
The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

=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.

====Installing====
Installing GoogleVisualr is pretty simple. Just include the following gem in the Gemfile.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/area_chart</ref>=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

The resulting chart looks like below.
[[File:AeraChart.png|center]]
=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

The resulting chart looks like below.
[[File:BarChart.png|center]]
=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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

===gchartrb===
gchartrb<ref>http://code.google.com/p/gchartrb/</ref> is a Ruby wrapper around the Google chart API<ref>http://code.google.com/apis/chart/</ref>. In our project, we use gchartrb to generate all the bar charts in the visualization.

====installing====
Installing gchartrb is simple, just include the gem in the Gemfile.
<pre>
gem 'gchartrb', :require => 'google_chart'
</pre>

====usage in the project====
In the project, all bar charts and reliability charts are implemented by gchartrb, as is shown below.
[[File:All_charts.png|center]]

The bar chart shows the score of each individual review or feedback.

===Circles===

=Visualization in Expertiza=
This section describes where in Expertiza we can use these visualizations to provide a better user experience.
The 'Review Score' view of the assignments can be enhanced using these visualization.

We can see by the image below that currently the scores views includes only a large table. From a user experience perspective having a more prioritized view of the scores would be beneficial. Having all the data available for the user to peruse in a table is informative, but when the user wants only to get a quick idea of how they did in an assignment, it would be helpful to have some sort of visualization.

[[File:score_view.png.jpeg]]

The above scoring which is in tabular form can be enhanced with charts.

=Graphical Score Dashboard=
The scores page was augmented with bar graphs displaying the distributions of each column, as well as a circle icon for the average score for that column. This will allow for easily determining what the reviewers thought of the work, as well as what the range of scores given. The circle graphs with the averages provide a visual for the quality of the work in each of the categories.

[[File:Score_chart.png]]

==New View==

We created a new view under the grades views, called participant_charts. This view is included as a partial in the grades/view_my_scores view. This allows us to not modify any of the existing views and keep the code modular.

==Bar Charts==

For the bar charts we constructed a method that, given the score and the type of bar chart, populates an instance variable that contains the charts. The code was included in the grades controller (grades_controller.rb file) and is shown below

def bar_chart(scores, type)
GoogleChart::BarChart.new("100x100", " ", :vertical, false) do |bc|
data = scores
bc.data "Line green", data, '990000'
#bc.axis :x, :positions => [0, data.size], :range => [0,100]
bc.axis :y, :range => [0, data.max] ,:positions => [data.min, data.max]
bc.show_legend = false
bc.stacked = false
bc.width_spacing_options({:bar_width => 70/(data.size+1),:bar_spacing => 1, :group_spacing => 1})
bc.data_encoding = :extended
@grades_bar_charts[type.to_sym] = (bc.to_url)
end
end

The width of the bars is dependent on the number of scores to show. Assignments with many reviews to show, require smaller bars. This is accomplished by tying the bar_width parameter, to the size of the data.

==Circle Charts==

For the circle charts showing the averages of the columns we used a javascript library, circle.js. By simply passing the scores to the .js code in the grades view as shown in the code below. The circle is then rendered automatically in a div block elsewhere in the view named the same as the id: tag below

<script type="text/javascript">
<% ['review', 'metareview', 'feedback', 'teammate'].each do |type| %>
<% if @pscore[type.to_sym][:scores][:avg]%>
var myCircle = Circles.create({
id: '<%= "#{type}-circle" %>',
radius: 25,
value: <%= @pscore[type.to_sym][:scores][:avg].to_i %>,
maxValue: 100,
width: 7,
text: '<%=@pscore[type.to_sym][:scores][:avg].to_i%>',
colors: ['#FFEB99', '#FFCC00'],
duration: 700,
textClass: 'circles-text'
});

==Show / Hide stats==

The user might want to hide the stats, with that in mind we included a button to toggle the visibility of the charts. Making use of an existing function, toggleElement, we added a link above the charts table that when clicked hides/shows the charts. The code to accomplish this is shown below

<a href="#" name='score-chartLink' onClick="toggleElement('score-chart', 'stats');return false;">hide stats</a>

=Reliability Metric=
Based on the uniformity of the review scores, we will compile a reliability metric. This metric encapsulates the level of agreement between the reviews, and should provide a quick at a glance notion of whether reviewers agree on the scoring for the particular assignment, or whether there is a high variance in the scores given. A good reliability score indicates that the grade given to the assignment by the reviewers is to be trusted, whereas a poor reliability score indicates that there was a high level of disagreement in the reviewers and the instructors should perhaps take a closer look at the participant's assignment.
This reliability score is computed from the standard deviation of the review scores. A standard deviation that's less than 10 will award a good reliability score. A standard deviation between 10 and 20 will award a medium reliability score, whereas a standard deviation greater than 20 will give a poor reliability score.
===Different Icon colors===
[[File:MockupG.png]]

The color of the three bars Icon, and the number of filled bars is representative of the reliability of the reviews.
Take the case of the green sample icon in the image above, the reviews mostly all agree. Whereas in the following two images, the icon is yellow and red respectively to signify increasingly worrying levels of disparity in review scores.
[[File:MockupY.png]]
[[File:MockupR.png]]

==Reference==
<references/>

File:All charts.png

2015-05-03T20:26:05Z

Zchen15:

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-05-03T20:19:56Z

Zchen15: /* gchartrb */

<font size="6"><b> Expertiza - Visualization </b></font>

==Project Description==
The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

==Purpose==
The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

==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.

====Installing====
Installing GoogleVisualr is pretty simple. Just include the following gem in the Gemfile.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/area_chart</ref>=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

The resulting chart looks like below.
[[File:AeraChart.png|center]]
=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

The resulting chart looks like below.
[[File:BarChart.png|center]]
=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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

===gchartrb===
gchartrb<ref>http://code.google.com/p/gchartrb/</ref> is a Ruby wrapper around the Google chart API<ref>http://code.google.com/apis/chart/</ref>. In our project, we use gchartrb to generate all the bar charts in the visualization.

====installing====
Installing gchartrb is simple, just include the gem in the Gemfile.
<pre>
gem 'gchartrb', :require => 'google_chart'
</pre>

====usage in the project====

===Circles===

==Visualization in Expertiza==
This section describes where in Expertiza we can use these visualizations to provide a better user experience.
The 'Review Score' view of the assignments can be enhanced using these visualization.

We can see by the image below that currently the scores views includes only a large table. From a user experience perspective having a more prioritized view of the scores would be beneficial. Having all the data available for the user to peruse in a table is informative, but when the user wants only to get a quick idea of how they did in an assignment, it would be helpful to have some sort of visualization.

[[File:score_view.png.jpeg]]

The above scoring which is in tabular form can be enhanced with charts.

==Graphical Score Dashboard==
The scores page was augmented with bar graphs displaying the distributions of each column, as well as a circle icon for the average score for that column. This will allow for easily determining what the reviewers thought of the work, as well as what the range of scores given. The circle graphs with the averages provide a visual for the quality of the work in each of the categories.

[[File:Mockup2.png]]

==Reliability Metric==
Based on the uniformity of the review scores, we will compile a reliability metric. This metric encapsulates the level of agreement between the reviews, and should provide a quick at a glance notion of whether reviewers agree on the scoring for the particular assignment, or whether there is a high variance in the scores given. A good reliability score indicates that the grade given to the assignment by the reviewers is to be trusted, whereas a poor reliability score indicates that there was a high level of disagreement in the reviewers and the instructors should perhaps take a closer look at the participant's assignment.
This reliability score is computed from the standard deviation of the review scores. A standard deviation that's less than 10 will award a good reliability score. A standard deviation between 10 and 20 will award a medium reliability score, whereas a standard deviation greater than 20 will give a poor reliability score.
===Different Icon colors===
[[File:MockupG.png]]

The color of the three bars Icon, and the number of filled bars is representative of the reliability of the reviews.
Take the case of the green sample icon in the image above, the reviews mostly all agree. Whereas in the following two images, the icon is yellow and red respectively to signify increasingly worrying levels of disparity in review scores.
[[File:MockupY.png]]
[[File:MockupR.png]]

==Reference==
<references/>

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-05-03T20:11:06Z

Zchen15: /* Overview of Approach */

<font size="6"><b> Expertiza - Visualization </b></font>

==Project Description==
The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

==Purpose==
The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

==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.

====Installing====
Installing GoogleVisualr is pretty simple. Just include the following gem in the Gemfile.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/area_chart</ref>=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

The resulting chart looks like below.
[[File:AeraChart.png|center]]
=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

The resulting chart looks like below.
[[File:BarChart.png|center]]
=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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

===gchartrb===

==Visualization in Expertiza==
This section describes where in Expertiza we can use these visualizations to provide a better user experience.
The 'Review Score' view of the assignments can be enhanced using these visualization.

We can see by the image below that currently the scores views includes only a large table. From a user experience perspective having a more prioritized view of the scores would be beneficial. Having all the data available for the user to peruse in a table is informative, but when the user wants only to get a quick idea of how they did in an assignment, it would be helpful to have some sort of visualization.

[[File:score_view.png.jpeg]]

The above scoring which is in tabular form can be enhanced with charts.

==Graphical Score Dashboard==
The scores page was augmented with bar graphs displaying the distributions of each column, as well as a circle icon for the average score for that column. This will allow for easily determining what the reviewers thought of the work, as well as what the range of scores given. The circle graphs with the averages provide a visual for the quality of the work in each of the categories.

[[File:Mockup2.png]]

==Reliability Metric==
Based on the uniformity of the review scores, we will compile a reliability metric. This metric encapsulates the level of agreement between the reviews, and should provide a quick at a glance notion of whether reviewers agree on the scoring for the particular assignment, or whether there is a high variance in the scores given. A good reliability score indicates that the grade given to the assignment by the reviewers is to be trusted, whereas a poor reliability score indicates that there was a high level of disagreement in the reviewers and the instructors should perhaps take a closer look at the participant's assignment.
This reliability score is computed from the standard deviation of the review scores. A standard deviation that's less than 10 will award a good reliability score. A standard deviation between 10 and 20 will award a medium reliability score, whereas a standard deviation greater than 20 will give a poor reliability score.
===Different Icon colors===
[[File:MockupG.png]]

The color of the three bars Icon, and the number of filled bars is representative of the reliability of the reviews.
Take the case of the green sample icon in the image above, the reviews mostly all agree. Whereas in the following two images, the icon is yellow and red respectively to signify increasingly worrying levels of disparity in review scores.
[[File:MockupY.png]]
[[File:MockupR.png]]

==Reference==
<references/>

CSC/ECE 517 Spring 2015

2015-04-05T20:35:32Z

Zchen15: /* Final Project Design Document */

==Writing Assignment 1==
*[[CSC/ECE 517 Spring 2015/ch1a 17 WL]]
*[[CSC/ECE 517 Spring 2015/ch1a 5 ZX]]
*[[CSC/ECE 517 Spring 2015/ch1a 6 TZ]]
*[[CSC/ECE 517 Spring 2015/ch1a 4 RW]]
*[[CSC/ECE 517 Spring 2015/ch1a 7 SA]]
*[[CSC/ECE 517 Spring 2015/ch1a 9 RA]]
*[[CSC/ECE 517 Spring 2015/ch1a 14 RI]]
*[[CSC/ECE 517 Spring 2015/ch1a 1 DZ]]
*[[CSC/ECE 517 Spring 2015/ch1a 20 HA]]
*[[CSC/ECE 517 Spring 2015/ch1a 3 RF]]
*[[CSC/ECE 517 Spring 2015/ch1a 12 LS]]
*[[CSC/ECE 517 Spring 2015/ch1a 13 MA]]
*[[CSC/ECE 517 Spring 2015/ch1a 2 WA]]
*[[CSC/ECE 517 Spring 2015/ch1b 21 QW]]
*[[CSC/ECE 517 Spring 2015/ch1b 23 MS]]
*[[CSC/ECE 517 Spring 2015/ch1b 10 GL]]
*[[CSC/ECE 517 Spring 2015/ch1b 27 VC]]
*[[CSC/ECE 517 Spring 2015/ch1b 22 SF]]
*[[CSC/ECE 517 Spring 2015/ch1b 15 SH]]
*[[CSC/ECE 517 Spring 2015/ch1b 18 AS]]

==Writing Assignment 2==
*[[CSC/ECE 517 Spring 2015/oss E1502 wwj]]
*[[CSC/ECE 517 Fall 2014/oss E1508 MRS]]
*[[CSC/ECE 517 Spring 2015/oss E1504 IMV]]
*[[CSC/ECE 517 Spring 2015/oss E1505 xzl]]
*[[CSC/ECE 517 Spring 2015/oss E1509 lds]]
*[[CSC/ECE 517 Spring 2015/oss E1510 FLP]]
*[[CSC/ECE 517 Spring 2015/oss E1506 SYZ]]
*[[CSC/ECE 517 Spring 2015/oss S1504 AAC]]
*[[CSC/ECE 517 Spring 2015/oss E1507 DG]]
*[[CSC/ECE 517 Spring 2015/oss M1502 GVJ]]
*[[CSC/ECE 517 Spring 2015/oss M1503 EDT]]
*[[CSC/ECE 517 Spring 2015/oss E1503 RSA]]
*[[CSC/ECE 517 Spring 2015/oss E1501 YWS]]
*[[CSC/ECE 517 Spring 2015/oss S1501 OA]]

==Final Project Design Document==

*[[CSC/ECE 517 Spring 2015 E1526 MPRI]]
*[[CSC/ECE 517 Spring 2015 S1503 LWJZ]]
*[[CSC/ECE 517 Spring 2015 S1524 FSZZ]]
*[[CSC/ECE 517 Spring 2015 M1503 EDTS]]
*[[CSC/ECE 517 Spring 2015 E1529 GLDS]]
*[[CSC/ECE 517 Spring 2015 E1525 TIAA]]
*[[CSC/ECE 517 Spring 2015 E1522 Visualization]]
*[[CSC/ECE 517 Spring 2015 E1527 SWAR]]

CSC/ECE 517 Spring 2015

2015-04-05T20:20:07Z

Zchen15: /* Final Project Design Document */

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-04-01T14:17:29Z

Zchen15: /* GoogleVisualr */

<font size="6"><b> Expertiza - Visualization </b></font>

==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.

====Installing====
Installing GoogleVisualr is pretty simple. Just include the following gem in the Gemfile.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/area_chart</ref>=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

The resulting chart looks like below.
[[File:AeraChart.png|center]]
=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

The resulting chart looks like below.
[[File:BarChart.png|center]]
=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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/>

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-04-01T03:28:46Z

Zchen15: /* Chart Examples */

<font size="6"><b> Expertiza - Visualization </b></font>

==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.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/area_chart</ref>=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

The resulting chart looks like below.
[[File:AeraChart.png|center]]
=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

The resulting chart looks like below.
[[File:BarChart.png|center]]
=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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/>

CSC/ECE 517 Spring 2015 E1522 Visualization

2015-04-01T03:23:27Z

Zchen15: /* Chart Examples */

<font size="6"><b> Expertiza - Visualization </b></font>

==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.
<pre>
gem "google_visualr", "~> 2.1.0"
</pre>
And in the Rails layout, load Google Ajax API in the head tag, at the very top.
<pre>
<script src='http://www.google.com/jsapi'></script>;
</pre>

====Work Flow====
*In your model or controller, write Ruby code to create your chart (e.g. Area Chart, Bar Chart, even Spark Lines etc).

<pre>
# 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]
])
</pre>
*Configure your chart with any of the options as listed in Google Chart Tools' API Docs.
<pre>
option = { width: 400, height: 240, title: 'Company Performance' }<br/>
@chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)
</pre>

*In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.
<pre>
<div id='chart'></div>
<%= render_chart @chart, 'chart' %>
</pre>

====Chart Examples====
=====Area Chart=====
The following code presents the example of area chart.

<pre>
# 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
</pre>

The resulting chart looks like below.
[[File:AeraChart.png|center]]
=====Bar Chart=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Example
def bar_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(4)
data_table.set_cell(0, 0, '2004')
data_table.set_cell(0, 1, 1000)
data_table.set_cell(0, 2, 400)
data_table.set_cell(1, 0, '2005')
data_table.set_cell(1, 1, 1170)
data_table.set_cell(1, 2, 460)
data_table.set_cell(2, 0, '2006')
data_table.set_cell(2, 1, 660)
data_table.set_cell(2, 2, 1120)
data_table.set_cell(3, 0, '2007')
data_table.set_cell(3, 1, 1030)
data_table.set_cell(3, 2, 540)

opts = { :width => 400, :height => 240, :title => 'Company Performance', vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }
@chart = GoogleVisualr::Interactive::BarChart.new(data_table, opts)

end
</pre>

The resulting chart looks like below.
[[File:BarChart.png|center]]
=====Bubble Chart=====
The following code presents the example of area chart.

<pre>
# http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html
def bubble_chart

data_table = GoogleVisualr::DataTable.new
data_table.new_column('string', 'ID')
data_table.new_column('number', 'Life Expectancy')
data_table.new_column('number', 'Fertility Rate')
data_table.new_column('string', 'Region')
data_table.new_column('number', 'Population')
data_table.add_rows( [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
])

opts = {
:width => 800, :height => 500,
:title => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
:hAxis => { :title => 'Life Expectancy' },
:vAxis => { :title => 'Fertility Rate' },
:bubble => { :textStyle => { :fontSize => 11 } }
}
@chart = GoogleVisualr::Interactive::BubbleChart.new(data_table, opts)

end
</pre>

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

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

===='''Usage'''====
=====Installing=====
----

<pre>gem install googlecharts
</pre>
=====Example in Ruby on Rails=====
----

'''Controller''': <pre>@line_chart = Gchart.line(:data => [1, 2, 3, 4, 5])</pre>

'''View''': <pre> <%= image_tag(@line_chart) %></pre>
=====Basic Usages=====
----

<pre>
require ‘gchart’
</pre>
<pre>
Gchart.line(:size => ‘200*200’,
:title => “title”,
:bg => ‘efefef’,
:legend =>
:data => [1, 2, 3, 4, 5])
</pre>
=====Detail Usages=====
----
simple line chart:
<pre>
Gchart.line(:data => [0, 40, 10, 70, 20])
</pre>
[[File:Simplechart.png]]

bar chart:
<pre>
Gchart.bar(:data => [300, 100, 30, 200])
</pre>
[[File:Barchart.png]]

multiple bars chart:
<pre>
Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])
</pre>
[[File:Multbarschart.png]]

pie chart:
<pre>
Gchart.pie(:data => [20, 35, 45])
</pre>
[[File:Piechart.png]]

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/>

CSC/ECE 517 Spring 2015 E1522 Visualization

CSC/ECE 517 Spring 2015

2015-04-01T01:58:19Z

Zchen15: /* Final Project Design Document */

CSC/ECE 517 Spring 2015/oss E1510 FLP

2015-03-23T17:01:39Z

Zchen15: /* _assignment_actions.html.erb */

<font size="6"><b> Expertiza - Fix Instructor Login Performance Issue </b></font>

Expertiza is a web application where students can submit and peer-review learning objects (articles, code, web sites, etc). It is used in select courses at NC State and by professors at several other colleges and universities.<ref>[https://github.com/expertiza/expertiza Expertiza on GitHub]</ref>
__TOC__

==Project Description==
Currently when an Instructor logs into Expertiza,there a lot of select* from assignments queries being fired on database which would have an adverse effect on performance. We analyzed the source of this issue and made some changes, which reduced the number of select queries executed. The performance is high improved.
The mission involved is tracing the source of the issue and modify the code to fix the issue.

===Performance issue before modification===
Before we made the improvement, each time an instructore logs into the Expertiza, there would be several database queries, which are more than needed and take it longer to render the view. Below is the console outputs when an instructor logs in.
<pre>
Assignment Load (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/_row_header.html.erb (17.4ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (2.6ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_assignments_actions.html.erb (8.8ms)
</pre>
we can see that there are 7 assignment queries after load <code>_row_header.html.erb</code>, 3 assignment queries after load <code>_shared_actions.html.erb</code>, 3 assignment queries after load <code>_assignments_actions</code>. All these have an adverse effect on the performance.

==Locate bug==
To locate the files that generate the bug, we use a Gem called QueryReviewer<ref>https://github.com/nesquena/query_reviewer</ref> to help trace the datebase queries.
===Install query_reviewer===
Installing query_reviewer is simple. Just install it by

<pre>
gem install query_reviewer
</pre>

and add it to your <code>Gemfile</code>

<pre>
gem "query_reviewer"
</pre>

QueryReviewer is an advanced SQL query analyzer<ref>https://github.com/nesquena/query_reviewer</ref>. After installing and running this Gem on the Rails application, it would pop-up database query information on the webpage, as is shown below.

[[File:QueryReviewer trace.png]]

===Analyze code===
We log into Expertiza as an instructor with the QueryReviewer activate and watch the output of QueryReviewer. [figure *] shows the tracing result of the QueryReviewer and it tells us that we should pay more attention to the three files: assignment_node.rb, _row_header.html.erb and _entry.html.erb.
==== <code>_assignment_actions.html.erb</code> ====
In file <code>_assignment_actions.html.erb</code>, we can find in 3 places use <code>Assignment.find(node.node_object_id)</code>, which is actually a database query request.
<pre>
1 <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
...
11 <% @assignment = Assignment.find(node.node_object_id) %>
...
52 <% if Assignment.find(node.node_object_id).course_id %>
...
</pre>

==== <code>_row_header.html.erb</code> and <code>assignment_node.rb</code> ====
In <code>_row_header.html.erb</code>:
<pre>
26 <% if parent_node.get_name == 'Courses'&& session[:user].role_id == 6 %>
27 <%else%>
28 <%= parent_node.get_name %>
29 <% if parent_node.get_directory != nil%>
30 <BR/><I>Directory:</I> <%= parent_node.get_directory %>
31 <% end %>
32 <% if parent_node.get_creation_date != nil %>
33 <BR/><I>Creation Date:</I> <%= parent_node.get_creation_date %>
34 <% end %>
35 <% if parent_node.get_modified_date != nil %>
36 <BR/><I>Updated Date:</I> <%= parent_node.get_modified_date %>
37 <% end %>
38 <%end%>
</pre>
we can see in this view, <code>parent_node</code> is a <code>AssignmentNode</code> object, it execute:
* <code>parent_node.get_name</code> method
* <code>parent_node.get_directory</code> method
* <code>parent_node.get_creation_date</code> method
* <code>parent_node.get_modified_date</code> method
However, in <code>assignment_node.rb</code>:
<pre>
6 class AssignmentNode < Node
...
58 # Gets the name from the associated object
59 def get_name
60 Assignment.find(self.node_object_id).name
61 end
62
63 # Gets the directory_path from the associated object
64 def get_directory
65 Assignment.find(self.node_object_id).directory_path
66 end
67
68 # Gets the created_at from the associated object
69 def get_creation_date
70 Assignment.find(self.node_object_id).created_at
71 end
72
73 # Gets the updated_at from the associated object
74 def get_modified_date
75 Assignment.find(self.node_object_id).updated_at
76 end
...
82 end
</pre>
We find all these method called <code>Assignment.find(self.node_object_id)</code> method, which is actually a database query request. These 'find's are actually redundant for a specific Assignment instance. So we will figure out a way to eliminate those redundant method calls.

==Modifications==

===_assignment_actions.html.erb===
An instance variable @assignment is used here instead of multiple times of calling .find method, thus reducing database queries.
<pre>
+ <% @assignment = Assignment.find(node.node_object_id) %>
- <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
+ <% owner_id = @assignment.instructor_id %>
...
- <% @assignment = Assignment.find(node.node_object_id) %>
...
- <% if Assignment.find(node.node_object_id).course_id %>
+ <% if @assignment.course_id %>
...
</pre>

===assignment_node.rb===
<pre>
class AssignmentNode < Node
# Gets the name from the associated object
def get_name
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.name
end

# Gets the directory_path from the associated object
def get_directory
#Assignment.find(self.node_object_id).directory_path
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.directory_path
end

# Gets the created_at from the associated object
def get_creation_date
#Assignment.find(self.node_object_id).created_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.created_at
end

# Gets the updated_at from the associated object
def get_modified_date
#Assignment.find(self.node_object_id).updated_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.updated_at
end
end
</pre>

== Performance Improvment==
Originally there are 13 queries after loading these related pages, and now there are only 5 of them, as can been seen from the console output result below. Thus the performance is improved and the total rendering time consumption is reduced.
<pre>
Assignment Load (1.7ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
Rendered tree_display/_row_header.html.erb (3.0ms)

CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (4.0ms)

SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
Rendered tree_display/actions/_assignments_actions.html.erb (11.9ms)

</pre>

==References==
<references/><br>

CSC/ECE 517 Spring 2015/oss E1510 FLP

2015-03-23T17:00:08Z

Zchen15: /* Install query_reviewer */

<font size="6"><b> Expertiza - Fix Instructor Login Performance Issue </b></font>

Expertiza is a web application where students can submit and peer-review learning objects (articles, code, web sites, etc). It is used in select courses at NC State and by professors at several other colleges and universities.<ref>[https://github.com/expertiza/expertiza Expertiza on GitHub]</ref>
__TOC__

==Project Description==
Currently when an Instructor logs into Expertiza,there a lot of select* from assignments queries being fired on database which would have an adverse effect on performance. We analyzed the source of this issue and made some changes, which reduced the number of select queries executed. The performance is high improved.
The mission involved is tracing the source of the issue and modify the code to fix the issue.

===Performance issue before modification===
Before we made the improvement, each time an instructore logs into the Expertiza, there would be several database queries, which are more than needed and take it longer to render the view. Below is the console outputs when an instructor logs in.
<pre>
Assignment Load (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/_row_header.html.erb (17.4ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (2.6ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_assignments_actions.html.erb (8.8ms)
</pre>
we can see that there are 7 assignment queries after load <code>_row_header.html.erb</code>, 3 assignment queries after load <code>_shared_actions.html.erb</code>, 3 assignment queries after load <code>_assignments_actions</code>. All these have an adverse effect on the performance.

==Locate bug==
To locate the files that generate the bug, we use a Gem called QueryReviewer<ref>https://github.com/nesquena/query_reviewer</ref> to help trace the datebase queries.
===Install query_reviewer===
Installing query_reviewer is simple. Just install it by

<pre>
gem install query_reviewer
</pre>

and add it to your <code>Gemfile</code>

<pre>
gem "query_reviewer"
</pre>

QueryReviewer is an advanced SQL query analyzer<ref>https://github.com/nesquena/query_reviewer</ref>. After installing and running this Gem on the Rails application, it would pop-up database query information on the webpage, as is shown below.

[[File:QueryReviewer trace.png]]

===Analyze code===
We log into Expertiza as an instructor with the QueryReviewer activate and watch the output of QueryReviewer. [figure *] shows the tracing result of the QueryReviewer and it tells us that we should pay more attention to the three files: assignment_node.rb, _row_header.html.erb and _entry.html.erb.
==== <code>_assignment_actions.html.erb</code> ====
In file <code>_assignment_actions.html.erb</code>, we can find in 3 places use <code>Assignment.find(node.node_object_id)</code>, which is actually a database query request.
<pre>
1 <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
...
11 <% @assignment = Assignment.find(node.node_object_id) %>
...
52 <% if Assignment.find(node.node_object_id).course_id %>
...
</pre>

==== <code>_row_header.html.erb</code> and <code>assignment_node.rb</code> ====
In <code>_row_header.html.erb</code>:
<pre>
26 <% if parent_node.get_name == 'Courses'&& session[:user].role_id == 6 %>
27 <%else%>
28 <%= parent_node.get_name %>
29 <% if parent_node.get_directory != nil%>
30 <BR/><I>Directory:</I> <%= parent_node.get_directory %>
31 <% end %>
32 <% if parent_node.get_creation_date != nil %>
33 <BR/><I>Creation Date:</I> <%= parent_node.get_creation_date %>
34 <% end %>
35 <% if parent_node.get_modified_date != nil %>
36 <BR/><I>Updated Date:</I> <%= parent_node.get_modified_date %>
37 <% end %>
38 <%end%>
</pre>
we can see in this view, <code>parent_node</code> is a <code>AssignmentNode</code> object, it execute:
* <code>parent_node.get_name</code> method
* <code>parent_node.get_directory</code> method
* <code>parent_node.get_creation_date</code> method
* <code>parent_node.get_modified_date</code> method
However, in <code>assignment_node.rb</code>:
<pre>
6 class AssignmentNode < Node
...
58 # Gets the name from the associated object
59 def get_name
60 Assignment.find(self.node_object_id).name
61 end
62
63 # Gets the directory_path from the associated object
64 def get_directory
65 Assignment.find(self.node_object_id).directory_path
66 end
67
68 # Gets the created_at from the associated object
69 def get_creation_date
70 Assignment.find(self.node_object_id).created_at
71 end
72
73 # Gets the updated_at from the associated object
74 def get_modified_date
75 Assignment.find(self.node_object_id).updated_at
76 end
...
82 end
</pre>
We find all these method called <code>Assignment.find(self.node_object_id)</code> method, which is actually a database query request. These 'find's are actually redundant for a specific Assignment instance. So we will figure out a way to eliminate those redundant method calls.

==Modifications==

===_assignment_actions.html.erb===
<pre>
+ <% @assignment = Assignment.find(node.node_object_id) %>
- <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
+ <% owner_id = @assignment.instructor_id %>
...
- <% @assignment = Assignment.find(node.node_object_id) %>
...
- <% if Assignment.find(node.node_object_id).course_id %>
+ <% if @assignment.course_id %>
...
</pre>

===assignment_node.rb===
<pre>
class AssignmentNode < Node
# Gets the name from the associated object
def get_name
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.name
end

# Gets the directory_path from the associated object
def get_directory
#Assignment.find(self.node_object_id).directory_path
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.directory_path
end

# Gets the created_at from the associated object
def get_creation_date
#Assignment.find(self.node_object_id).created_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.created_at
end

# Gets the updated_at from the associated object
def get_modified_date
#Assignment.find(self.node_object_id).updated_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.updated_at
end
end
</pre>

== Performance Improvment==
Originally there are 13 queries after loading these related pages, and now there are only 5 of them, as can been seen from the console output result below. Thus the performance is improved and the total rendering time consumption is reduced.
<pre>
Assignment Load (1.7ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
Rendered tree_display/_row_header.html.erb (3.0ms)

CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (4.0ms)

SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
Rendered tree_display/actions/_assignments_actions.html.erb (11.9ms)

</pre>

==References==
<references/><br>

CSC/ECE 517 Spring 2015/oss E1510 FLP

2015-03-23T16:55:34Z

Zchen15: /* Performance Improvment */

<font size="6"><b> Expertiza - Fix Instructor Login Performance Issue </b></font>

Expertiza is a web application where students can submit and peer-review learning objects (articles, code, web sites, etc). It is used in select courses at NC State and by professors at several other colleges and universities.<ref>[https://github.com/expertiza/expertiza Expertiza on GitHub]</ref>
__TOC__

==Project Description==
Currently when an Instructor logs into Expertiza,there a lot of select* from assignments queries being fired on database which would have an adverse effect on performance. We analyzed the source of this issue and made some changes, which reduced the number of select queries executed. The performance is high improved.
The mission involved is tracing the source of the issue and modify the code to fix the issue.

===Performance issue before modification===
Before we made the improvement, each time an instructore logs into the Expertiza, there would be several database queries, which are more than needed and take it longer to render the view. Below is the console outputs when an instructor logs in.
<pre>
Assignment Load (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/_row_header.html.erb (17.4ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (2.6ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_assignments_actions.html.erb (8.8ms)
</pre>
we can see that there are 7 assignment queries after load <code>_row_header.html.erb</code>, 3 assignment queries after load <code>_shared_actions.html.erb</code>, 3 assignment queries after load <code>_assignments_actions</code>. All these have an adverse effect on the performance.

==Locate bug==
To locate the files that generate the bug, we use a Gem called QueryReviewer<ref>https://github.com/nesquena/query_reviewer</ref> to help trace the datebase queries.
===Install query_reviewer===
QueryReviewer is an advanced SQL query analyzer<ref>https://github.com/nesquena/query_reviewer</ref>. After installing and running this Gem on the Rails application, it would pop-up database query information on the webpage, as is shown below.

[[File:QueryReviewer trace.png]]

===Analyze code===
We log into Expertiza as an instructor with the QueryReviewer activate and watch the output of QueryReviewer. [figure *] shows the tracing result of the QueryReviewer and it tells us that we should pay more attention to the three files: assignment_node.rb, _row_header.html.erb and _entry.html.erb.
==== <code>_assignment_actions.html.erb</code> ====
In file <code>_assignment_actions.html.erb</code>, we can find in 3 places use <code>Assignment.find(node.node_object_id)</code>, which is actually a database query request.
<pre>
1 <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
...
11 <% @assignment = Assignment.find(node.node_object_id) %>
...
52 <% if Assignment.find(node.node_object_id).course_id %>
...
</pre>

==== <code>_row_header.html.erb</code> and <code>assignment_node.rb</code> ====
In <code>_row_header.html.erb</code>:
<pre>
26 <% if parent_node.get_name == 'Courses'&& session[:user].role_id == 6 %>
27 <%else%>
28 <%= parent_node.get_name %>
29 <% if parent_node.get_directory != nil%>
30 <BR/><I>Directory:</I> <%= parent_node.get_directory %>
31 <% end %>
32 <% if parent_node.get_creation_date != nil %>
33 <BR/><I>Creation Date:</I> <%= parent_node.get_creation_date %>
34 <% end %>
35 <% if parent_node.get_modified_date != nil %>
36 <BR/><I>Updated Date:</I> <%= parent_node.get_modified_date %>
37 <% end %>
38 <%end%>
</pre>
we can see in this view, <code>parent_node</code> is a <code>AssignmentNode</code> object, it execute:
* <code>parent_node.get_name</code> method
* <code>parent_node.get_directory</code> method
* <code>parent_node.get_creation_date</code> method
* <code>parent_node.get_modified_date</code> method
However, in <code>assignment_node.rb</code>:
<pre>
6 class AssignmentNode < Node
...
58 # Gets the name from the associated object
59 def get_name
60 Assignment.find(self.node_object_id).name
61 end
62
63 # Gets the directory_path from the associated object
64 def get_directory
65 Assignment.find(self.node_object_id).directory_path
66 end
67
68 # Gets the created_at from the associated object
69 def get_creation_date
70 Assignment.find(self.node_object_id).created_at
71 end
72
73 # Gets the updated_at from the associated object
74 def get_modified_date
75 Assignment.find(self.node_object_id).updated_at
76 end
...
82 end
</pre>
We find all these method called <code>Assignment.find(self.node_object_id)</code> method, which is actually a database query request. These 'find's are actually redundant for a specific Assignment instance. So we will figure out a way to eliminate those redundant method calls.

==Modifications==

===_assignment_actions.html.erb===
<pre>
+ <% @assignment = Assignment.find(node.node_object_id) %>
- <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
+ <% owner_id = @assignment.instructor_id %>
...
- <% @assignment = Assignment.find(node.node_object_id) %>
...
- <% if Assignment.find(node.node_object_id).course_id %>
+ <% if @assignment.course_id %>
...
</pre>

===assignment_node.rb===
<pre>
class AssignmentNode < Node
# Gets the name from the associated object
def get_name
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.name
end

# Gets the directory_path from the associated object
def get_directory
#Assignment.find(self.node_object_id).directory_path
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.directory_path
end

# Gets the created_at from the associated object
def get_creation_date
#Assignment.find(self.node_object_id).created_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.created_at
end

# Gets the updated_at from the associated object
def get_modified_date
#Assignment.find(self.node_object_id).updated_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.updated_at
end
end
</pre>

== Performance Improvment==
Originally there are 13 queries after loading these related pages, and now there are only 5 of them, as can been seen from the console output result below. Thus the performance is improved and the total rendering time consumption is reduced.
<pre>
Assignment Load (1.7ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
Rendered tree_display/_row_header.html.erb (3.0ms)

CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (4.0ms)

SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
Rendered tree_display/actions/_assignments_actions.html.erb (11.9ms)

</pre>

==References==
<references/><br>

CSC/ECE 517 Spring 2015/oss E1510 FLP

2015-03-23T16:54:47Z

Zchen15: /* Performance Improvment */

<font size="6"><b> Expertiza - Fix Instructor Login Performance Issue </b></font>

Expertiza is a web application where students can submit and peer-review learning objects (articles, code, web sites, etc). It is used in select courses at NC State and by professors at several other colleges and universities.<ref>[https://github.com/expertiza/expertiza Expertiza on GitHub]</ref>
__TOC__

==Project Description==
Currently when an Instructor logs into Expertiza,there a lot of select* from assignments queries being fired on database which would have an adverse effect on performance. We analyzed the source of this issue and made some changes, which reduced the number of select queries executed. The performance is high improved.
The mission involved is tracing the source of the issue and modify the code to fix the issue.

===Performance issue before modification===
Before we made the improvement, each time an instructore logs into the Expertiza, there would be several database queries, which are more than needed and take it longer to render the view. Below is the console outputs when an instructor logs in.
<pre>
Assignment Load (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/_row_header.html.erb (17.4ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (2.6ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_assignments_actions.html.erb (8.8ms)
</pre>
we can see that there are 7 assignment queries after load <code>_row_header.html.erb</code>, 3 assignment queries after load <code>_shared_actions.html.erb</code>, 3 assignment queries after load <code>_assignments_actions</code>. All these have an adverse effect on the performance.

==Locate bug==
To locate the files that generate the bug, we use a Gem called QueryReviewer<ref>https://github.com/nesquena/query_reviewer</ref> to help trace the datebase queries.
===Install query_reviewer===
QueryReviewer is an advanced SQL query analyzer<ref>https://github.com/nesquena/query_reviewer</ref>. After installing and running this Gem on the Rails application, it would pop-up database query information on the webpage, as is shown below.

[[File:QueryReviewer trace.png]]

===Analyze code===
We log into Expertiza as an instructor with the QueryReviewer activate and watch the output of QueryReviewer. [figure *] shows the tracing result of the QueryReviewer and it tells us that we should pay more attention to the three files: assignment_node.rb, _row_header.html.erb and _entry.html.erb.
==== <code>_assignment_actions.html.erb</code> ====
In file <code>_assignment_actions.html.erb</code>, we can find in 3 places use <code>Assignment.find(node.node_object_id)</code>, which is actually a database query request.
<pre>
1 <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
...
11 <% @assignment = Assignment.find(node.node_object_id) %>
...
52 <% if Assignment.find(node.node_object_id).course_id %>
...
</pre>

==== <code>_row_header.html.erb</code> and <code>assignment_node.rb</code> ====
In <code>_row_header.html.erb</code>:
<pre>
26 <% if parent_node.get_name == 'Courses'&& session[:user].role_id == 6 %>
27 <%else%>
28 <%= parent_node.get_name %>
29 <% if parent_node.get_directory != nil%>
30 <BR/><I>Directory:</I> <%= parent_node.get_directory %>
31 <% end %>
32 <% if parent_node.get_creation_date != nil %>
33 <BR/><I>Creation Date:</I> <%= parent_node.get_creation_date %>
34 <% end %>
35 <% if parent_node.get_modified_date != nil %>
36 <BR/><I>Updated Date:</I> <%= parent_node.get_modified_date %>
37 <% end %>
38 <%end%>
</pre>
we can see in this view, <code>parent_node</code> is a <code>AssignmentNode</code> object, it execute:
* <code>parent_node.get_name</code> method
* <code>parent_node.get_directory</code> method
* <code>parent_node.get_creation_date</code> method
* <code>parent_node.get_modified_date</code> method
However, in <code>assignment_node.rb</code>:
<pre>
6 class AssignmentNode < Node
...
58 # Gets the name from the associated object
59 def get_name
60 Assignment.find(self.node_object_id).name
61 end
62
63 # Gets the directory_path from the associated object
64 def get_directory
65 Assignment.find(self.node_object_id).directory_path
66 end
67
68 # Gets the created_at from the associated object
69 def get_creation_date
70 Assignment.find(self.node_object_id).created_at
71 end
72
73 # Gets the updated_at from the associated object
74 def get_modified_date
75 Assignment.find(self.node_object_id).updated_at
76 end
...
82 end
</pre>
We find all these method called <code>Assignment.find(self.node_object_id)</code> method, which is actually a database query request. These 'find's are actually redundant for a specific Assignment instance. So we will figure out a way to eliminate those redundant method calls.

==Modifications==

===_assignment_actions.html.erb===
<pre>
+ <% @assignment = Assignment.find(node.node_object_id) %>
- <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
+ <% owner_id = @assignment.instructor_id %>
...
- <% @assignment = Assignment.find(node.node_object_id) %>
...
- <% if Assignment.find(node.node_object_id).course_id %>
+ <% if @assignment.course_id %>
...
</pre>

===assignment_node.rb===
<pre>
class AssignmentNode < Node
# Gets the name from the associated object
def get_name
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.name
end

# Gets the directory_path from the associated object
def get_directory
#Assignment.find(self.node_object_id).directory_path
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.directory_path
end

# Gets the created_at from the associated object
def get_creation_date
#Assignment.find(self.node_object_id).created_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.created_at
end

# Gets the updated_at from the associated object
def get_modified_date
#Assignment.find(self.node_object_id).updated_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.updated_at
end
end
</pre>

== Performance Improvment==
Originally there are 13 queries after loading these related pages, and now there are only 5 of them, as can been seen from the console output result below.
<pre>
Assignment Load (1.7ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
Rendered tree_display/_row_header.html.erb (3.0ms)

CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (4.0ms)

SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
Rendered tree_display/actions/_assignments_actions.html.erb (11.9ms)

</pre>

==References==
<references/><br>

CSC/ECE 517 Spring 2015/oss E1510 FLP

2015-03-23T16:50:43Z

Zchen15: /* _row_header.html.erb and assignment_node.rb */

<font size="6"><b> Expertiza - Fix Instructor Login Performance Issue </b></font>

Expertiza is a web application where students can submit and peer-review learning objects (articles, code, web sites, etc). It is used in select courses at NC State and by professors at several other colleges and universities.<ref>[https://github.com/expertiza/expertiza Expertiza on GitHub]</ref>
__TOC__

==Project Description==
Currently when an Instructor logs into Expertiza,there a lot of select* from assignments queries being fired on database which would have an adverse effect on performance. We analyzed the source of this issue and made some changes, which reduced the number of select queries executed. The performance is high improved.
The mission involved is tracing the source of the issue and modify the code to fix the issue.

===Performance issue before modification===
Before we made the improvement, each time an instructore logs into the Expertiza, there would be several database queries, which are more than needed and take it longer to render the view. Below is the console outputs when an instructor logs in.
<pre>
Assignment Load (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/_row_header.html.erb (17.4ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (2.6ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_assignments_actions.html.erb (8.8ms)
</pre>
we can see that there are 7 assignment queries after load <code>_row_header.html.erb</code>, 3 assignment queries after load <code>_shared_actions.html.erb</code>, 3 assignment queries after load <code>_assignments_actions</code>. All these have an adverse effect on the performance.

==Locate bug==
To locate the files that generate the bug, we use a Gem called QueryReviewer<ref>https://github.com/nesquena/query_reviewer</ref> to help trace the datebase queries.
===Install query_reviewer===
QueryReviewer is an advanced SQL query analyzer<ref>https://github.com/nesquena/query_reviewer</ref>. After installing and running this Gem on the Rails application, it would pop-up database query information on the webpage, as is shown below.

[[File:QueryReviewer trace.png]]

===Analyze code===
We log into Expertiza as an instructor with the QueryReviewer activate and watch the output of QueryReviewer. [figure *] shows the tracing result of the QueryReviewer and it tells us that we should pay more attention to the three files: assignment_node.rb, _row_header.html.erb and _entry.html.erb.
==== <code>_assignment_actions.html.erb</code> ====
In file <code>_assignment_actions.html.erb</code>, we can find in 3 places use <code>Assignment.find(node.node_object_id)</code>, which is actually a database query request.
<pre>
1 <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
...
11 <% @assignment = Assignment.find(node.node_object_id) %>
...
52 <% if Assignment.find(node.node_object_id).course_id %>
...
</pre>

==== <code>_row_header.html.erb</code> and <code>assignment_node.rb</code> ====
In <code>_row_header.html.erb</code>:
<pre>
26 <% if parent_node.get_name == 'Courses'&& session[:user].role_id == 6 %>
27 <%else%>
28 <%= parent_node.get_name %>
29 <% if parent_node.get_directory != nil%>
30 <BR/><I>Directory:</I> <%= parent_node.get_directory %>
31 <% end %>
32 <% if parent_node.get_creation_date != nil %>
33 <BR/><I>Creation Date:</I> <%= parent_node.get_creation_date %>
34 <% end %>
35 <% if parent_node.get_modified_date != nil %>
36 <BR/><I>Updated Date:</I> <%= parent_node.get_modified_date %>
37 <% end %>
38 <%end%>
</pre>
we can see in this view, <code>parent_node</code> is a <code>AssignmentNode</code> object, it execute:
* <code>parent_node.get_name</code> method
* <code>parent_node.get_directory</code> method
* <code>parent_node.get_creation_date</code> method
* <code>parent_node.get_modified_date</code> method
However, in <code>assignment_node.rb</code>:
<pre>
6 class AssignmentNode < Node
...
58 # Gets the name from the associated object
59 def get_name
60 Assignment.find(self.node_object_id).name
61 end
62
63 # Gets the directory_path from the associated object
64 def get_directory
65 Assignment.find(self.node_object_id).directory_path
66 end
67
68 # Gets the created_at from the associated object
69 def get_creation_date
70 Assignment.find(self.node_object_id).created_at
71 end
72
73 # Gets the updated_at from the associated object
74 def get_modified_date
75 Assignment.find(self.node_object_id).updated_at
76 end
...
82 end
</pre>
We find all these method called <code>Assignment.find(self.node_object_id)</code> method, which is actually a database query request. These 'find's are actually redundant for a specific Assignment instance. So we will figure out a way to eliminate those redundant method calls.

==Modifications==

===_assignment_actions.html.erb===
<pre>
+ <% @assignment = Assignment.find(node.node_object_id) %>
- <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
+ <% owner_id = @assignment.instructor_id %>
...
- <% @assignment = Assignment.find(node.node_object_id) %>
...
- <% if Assignment.find(node.node_object_id).course_id %>
+ <% if @assignment.course_id %>
...
</pre>

===assignment_node.rb===
<pre>
class AssignmentNode < Node
# Gets the name from the associated object
def get_name
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.name
end

# Gets the directory_path from the associated object
def get_directory
#Assignment.find(self.node_object_id).directory_path
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.directory_path
end

# Gets the created_at from the associated object
def get_creation_date
#Assignment.find(self.node_object_id).created_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.created_at
end

# Gets the updated_at from the associated object
def get_modified_date
#Assignment.find(self.node_object_id).updated_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.updated_at
end
end
</pre>

== Performance Improvment==
<pre>
Assignment Load (1.7ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
Rendered tree_display/_row_header.html.erb (3.0ms)

CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (4.0ms)

SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
Rendered tree_display/actions/_assignments_actions.html.erb (11.9ms)

</pre>

==References==
<references/><br>

CSC/ECE 517 Spring 2015/oss E1510 FLP

2015-03-23T16:29:00Z

Zchen15: /* Install query_reviewer */

<font size="6"><b> Expertiza - Fix Instructor Login Performance Issue </b></font>

Expertiza is a web application where students can submit and peer-review learning objects (articles, code, web sites, etc). It is used in select courses at NC State and by professors at several other colleges and universities.<ref>[https://github.com/expertiza/expertiza Expertiza on GitHub]</ref>
__TOC__

==Project Description==
Currently when an Instructor logs into Expertiza,there a lot of select* from assignments queries being fired on database which would have an adverse effect on performance. We analyzed the source of this issue and made some changes, which reduced the number of select queries executed. The performance is high improved.
The mission involved is tracing the source of the issue and modify the code to fix the issue.

===Performance issue before modification===
Before we made the improvement, each time an instructore logs into the Expertiza, there would be several database queries, which are more than needed and take it longer to render the view. Below is the console outputs when an instructor logs in.
<pre>
Assignment Load (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/_row_header.html.erb (17.4ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (2.6ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_assignments_actions.html.erb (8.8ms)
</pre>
we can see that there are 7 assignment queries after load <code>_row_header.html.erb</code>, 3 assignment queries after load <code>_shared_actions.html.erb</code>, 3 assignment queries after load <code>_assignments_actions</code>. All these have an adverse effect on the performance.

==Locate bug==
To locate the files that generate the bug, we use a Gem called QueryReviewer<ref>https://github.com/nesquena/query_reviewer</ref> to help trace the datebase queries.
===Install query_reviewer===
QueryReviewer is an advanced SQL query analyzer<ref>https://github.com/nesquena/query_reviewer</ref>. After installing and running this Gem on the Rails application, it would pop-up database query information on the webpage, as is shown below.

[[File:QueryReviewer trace.png]]

===Analyze code===
We log into Expertiza as an instructor with the QueryReviewer activate and watch the output of QueryReviewer. [figure *] shows the tracing result of the QueryReviewer and it tells us that we should pay more attention to the three files: assignment_node.rb, _row_header.html.erb and _entry.html.erb.
==== <code>_assignment_actions.html.erb</code> ====
In file <code>_assignment_actions.html.erb</code>, we can find in 3 places use <code>Assignment.find(node.node_object_id)</code>, which is actually a database query request.
<pre>
1 <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
...
11 <% @assignment = Assignment.find(node.node_object_id) %>
...
52 <% if Assignment.find(node.node_object_id).course_id %>
...
</pre>

==== <code>_row_header.html.erb</code> and <code>assignment_node.rb</code> ====
In <code>_row_header.html.erb</code>:
<pre>
26 <% if parent_node.get_name == 'Courses'&& session[:user].role_id == 6 %>
27 <%else%>
28 <%= parent_node.get_name %>
29 <% if parent_node.get_directory != nil%>
30 <BR/><I>Directory:</I> <%= parent_node.get_directory %>
31 <% end %>
32 <% if parent_node.get_creation_date != nil %>
33 <BR/><I>Creation Date:</I> <%= parent_node.get_creation_date %>
34 <% end %>
35 <% if parent_node.get_modified_date != nil %>
36 <BR/><I>Updated Date:</I> <%= parent_node.get_modified_date %>
37 <% end %>
38 <%end%>
</pre>
we can see in this view, <code>parent_node</code> is a <code>AssignmentNode</code> object, it execute:
* <code>parent_node.get_name</code> method
* <code>parent_node.get_directory</code> method
* <code>parent_node.get_creation_date</code> method
* <code>parent_node.get_modified_date</code> method
However, in <code>assignment_node.rb</code>:
<pre>
6 class AssignmentNode < Node
...
58 # Gets the name from the associated object
59 def get_name
60 Assignment.find(self.node_object_id).name
61 end
62
63 # Gets the directory_path from the associated object
64 def get_directory
65 Assignment.find(self.node_object_id).directory_path
66 end
67
68 # Gets the created_at from the associated object
69 def get_creation_date
70 Assignment.find(self.node_object_id).created_at
71 end
72
73 # Gets the updated_at from the associated object
74 def get_modified_date
75 Assignment.find(self.node_object_id).updated_at
76 end
...
82 end
</pre>
We find all these method called <code>Assignment.find(self.node_object_id)</code> method, which is actually a database query request.

==Modifications==

===_assignment_actions.html.erb===
<pre>
+ <% @assignment = Assignment.find(node.node_object_id) %>
- <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
+ <% owner_id = @assignment.instructor_id %>
...
- <% @assignment = Assignment.find(node.node_object_id) %>
...
- <% if Assignment.find(node.node_object_id).course_id %>
+ <% if @assignment.course_id %>
...
</pre>

===assignment_node.rb===
<pre>
class AssignmentNode < Node
# Gets the name from the associated object
def get_name
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.name
end

# Gets the directory_path from the associated object
def get_directory
#Assignment.find(self.node_object_id).directory_path
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.directory_path
end

# Gets the created_at from the associated object
def get_creation_date
#Assignment.find(self.node_object_id).created_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.created_at
end

# Gets the updated_at from the associated object
def get_modified_date
#Assignment.find(self.node_object_id).updated_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.updated_at
end
end
</pre>

== Performance Improvment==
<pre>
Assignment Load (1.7ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
Rendered tree_display/_row_header.html.erb (3.0ms)

CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (4.0ms)

SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
Rendered tree_display/actions/_assignments_actions.html.erb (11.9ms)

</pre>

==References==
<references/><br>

CSC/ECE 517 Spring 2015/oss E1510 FLP

2015-03-23T16:26:24Z

Zchen15: /* Install query_reviewer */

<font size="6"><b> Expertiza - Fix Instructor Login Performance Issue </b></font>

Expertiza is a web application where students can submit and peer-review learning objects (articles, code, web sites, etc). It is used in select courses at NC State and by professors at several other colleges and universities.<ref>[https://github.com/expertiza/expertiza Expertiza on GitHub]</ref>
__TOC__

==Project Description==
Currently when an Instructor logs into Expertiza,there a lot of select* from assignments queries being fired on database which would have an adverse effect on performance. We analyzed the source of this issue and made some changes, which reduced the number of select queries executed. The performance is high improved.
The mission involved is tracing the source of the issue and modify the code to fix the issue.

===Performance issue before modification===
Before we made the improvement, each time an instructore logs into the Expertiza, there would be several database queries, which are more than needed and take it longer to render the view. Below is the console outputs when an instructor logs in.
<pre>
Assignment Load (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/_row_header.html.erb (17.4ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (2.6ms)

CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_assignments_actions.html.erb (8.8ms)
</pre>
we can see that there are 7 assignment queries after load <code>_row_header.html.erb</code>, 3 assignment queries after load <code>_shared_actions.html.erb</code>, 3 assignment queries after load <code>_assignments_actions</code>. All these have an adverse effect on the performance.

==Locate bug==
To locate the files that generate the bug, we use a Gem called QueryReviewer<ref>https://github.com/nesquena/query_reviewer</ref> to help trace the datebase queries.
===Install query_reviewer===
QueryReviewer is an advanced SQL query analyzer<ref>https://github.com/nesquena/query_reviewer</ref>. After installing and running this Gem on the Rails application, it would pop-up database query information on the webpage, as is shown below.
<div class="center" style="width: auto; margin-left: auto; margin-right: auto;"> [[ {{File:QueryReviewer trace.png?maxwidth=600 }}]]</div>

===Analyze code===
We log into Expertiza as an instructor with the QueryReviewer activate and watch the output of QueryReviewer. [figure *] shows the tracing result of the QueryReviewer and it tells us that we should pay more attention to the three files: assignment_node.rb, _row_header.html.erb and _entry.html.erb.
==== <code>_assignment_actions.html.erb</code> ====
In file <code>_assignment_actions.html.erb</code>, we can find in 3 places use <code>Assignment.find(node.node_object_id)</code>, which is actually a database query request.
<pre>
1 <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
...
11 <% @assignment = Assignment.find(node.node_object_id) %>
...
52 <% if Assignment.find(node.node_object_id).course_id %>
...
</pre>

==== <code>_row_header.html.erb</code> and <code>assignment_node.rb</code> ====
In <code>_row_header.html.erb</code>:
<pre>
26 <% if parent_node.get_name == 'Courses'&& session[:user].role_id == 6 %>
27 <%else%>
28 <%= parent_node.get_name %>
29 <% if parent_node.get_directory != nil%>
30 <BR/><I>Directory:</I> <%= parent_node.get_directory %>
31 <% end %>
32 <% if parent_node.get_creation_date != nil %>
33 <BR/><I>Creation Date:</I> <%= parent_node.get_creation_date %>
34 <% end %>
35 <% if parent_node.get_modified_date != nil %>
36 <BR/><I>Updated Date:</I> <%= parent_node.get_modified_date %>
37 <% end %>
38 <%end%>
</pre>
we can see in this view, <code>parent_node</code> is a <code>AssignmentNode</code> object, it execute:
* <code>parent_node.get_name</code> method
* <code>parent_node.get_directory</code> method
* <code>parent_node.get_creation_date</code> method
* <code>parent_node.get_modified_date</code> method
However, in <code>assignment_node.rb</code>:
<pre>
6 class AssignmentNode < Node
...
58 # Gets the name from the associated object
59 def get_name
60 Assignment.find(self.node_object_id).name
61 end
62
63 # Gets the directory_path from the associated object
64 def get_directory
65 Assignment.find(self.node_object_id).directory_path
66 end
67
68 # Gets the created_at from the associated object
69 def get_creation_date
70 Assignment.find(self.node_object_id).created_at
71 end
72
73 # Gets the updated_at from the associated object
74 def get_modified_date
75 Assignment.find(self.node_object_id).updated_at
76 end
...
82 end
</pre>
We find all these method called <code>Assignment.find(self.node_object_id)</code> method, which is actually a database query request.

==Modifications==

===_assignment_actions.html.erb===
<pre>
+ <% @assignment = Assignment.find(node.node_object_id) %>
- <% owner_id = Object.const_get('Assignment').find(node.node_object_id).instructor_id %>
+ <% owner_id = @assignment.instructor_id %>
...
- <% @assignment = Assignment.find(node.node_object_id) %>
...
- <% if Assignment.find(node.node_object_id).course_id %>
+ <% if @assignment.course_id %>
...
</pre>

===assignment_node.rb===
<pre>
class AssignmentNode < Node
# Gets the name from the associated object
def get_name
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.name
end

# Gets the directory_path from the associated object
def get_directory
#Assignment.find(self.node_object_id).directory_path
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.directory_path
end

# Gets the created_at from the associated object
def get_creation_date
#Assignment.find(self.node_object_id).created_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.created_at
end

# Gets the updated_at from the associated object
def get_modified_date
#Assignment.find(self.node_object_id).updated_at
unless @assign_node
@assign_node = Assignment.find(self.node_object_id)
end
@assign_node.updated_at
end
end
</pre>

== Performance Improvment==
<pre>
Assignment Load (1.7ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
Rendered tree_display/_row_header.html.erb (3.0ms)

CACHE (0.1ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Assignment Load (0.2ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1
CACHE (0.0ms) SELECT `assignments`.* FROM `assignments` WHERE `assignments`.`id` = 1 LIMIT 1 [["id", 1]]
Rendered tree_display/actions/_shared_actions.html.erb (4.0ms)

SignUpTopic Load (0.1ms) SELECT `sign_up_topics`.* FROM `sign_up_topics` WHERE (assignment_id = 1) ORDER BY `sign_up_topics`.`id` ASC LIMIT 1
Rendered tree_display/actions/_assignments_actions.html.erb (11.9ms)

</pre>

==References==
<references/><br>