New Ticket     Tickets     Wiki     Browse Source     Timeline     Roadmap     Ticket Reports     Search

Changeset 81855


Ignore:
Timestamp:
08/05/11 22:30:42 (4 years ago)
Author:
derek@…
Message:

Refactored chart drawing code. Chart data is encoded in json by the controller and accessed here through the @chartjson hash


  • Added charts array which holds hashes that have info needed to draw a chart
  • Each chart hash has a key into @chartjson, a title, and a div


  • Added drawPieChart JS function which draws a pie chart with a given title, at a given div from a JSON object


  • drawAllCharts now iterates over the charts array and generates calls to the JS function drawPieChart
File:
1 edited

Legend:

Unmodified
Added
Removed

  • branches/gsoc11-statistics/stats-server/app/views/os_statistics/index.html.erb

    r80568 r81855  
     1<%# title: Title of the chart %> 
     2<%# key: key into chartjson hash table %> 
     3<%# div: div where chart should be drawn %> 
     4<% charts = [] %> 
     5<% charts << {:title => 'MacPorts Versions', :key => 'macports_version',  :div => 'macports_versions_div'} %> 
     6<% charts << {:title => 'OSX Versions', :key => 'osx_version', :div => 'osx_versions_div'} %> 
     7<% charts << {:title => 'OS Arch', :key => 'os_arch', :div => 'os_arch_div'} %> 
     8<% charts << {:title => 'OS Platform', :key => 'os_platform', :div => 'os_platform_div'} %> 
     9<% charts << {:title => 'Build Arch', :key => 'build_arch', :div => 'build_arch_div'} %> 
     10<% charts << {:title => 'gcc Version', :key => 'gcc_version', :div => 'gcc_version_div'} %> 
     11<% charts << {:title => 'XCode Version', :key => 'xcode_version', :div => 'xcode_version_div'} %> 
     12 
    113<!--Load the AJAX API--> 
    214<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    … …  
    921google.setOnLoadCallback(drawAllCharts); 
    1022 
    11 function drawChart(chart_title, chart_div, chart_data) { 
    12  
    13 // Create our data table. 
    14 var data = new google.visualization.DataTable(); 
    15 data.addColumn('string', 'Version'); 
    16 data.addColumn('number', 'Frequency'); 
    17  
    18 // Add rows 
    19 data.addRows(chart_data) 
    20  
    21 //Draw chart 
    22 var chart = new google.visualization.PieChart(document.getElementById(chart_div)); 
    23 chart.draw(data, {width: 450, height: 300, title: chart_title}); 
    24 } 
    25  
    26 function drawMacPortsVersions() { 
    27         var data = [ 
    28                 <% @macports_version.each do |key, value| %> 
    29                 ['<%= key %>', <%= value %>], 
    30                 <% end %> 
    31         ]; 
    32          
    33         drawChart('MacPorts Versions', 'macports_versions_div', data); 
    34 } 
    35  
    36 function drawOSXVersions() { 
    37         var data = [ 
    38                 <% @osx_version.each do |key, value| %> 
    39                 ['<%= key %>', <%= value %>], 
    40                 <% end %> 
    41         ]; 
    42          
    43         drawChart('OSX Versions', 'osx_versions_div', data); 
    44 } 
    45  
    46 function drawOSArch() { 
    47         var data = [ 
    48                 <% @os_arch.each do |key, value| %> 
    49                 ['<%= key %>', <%= value %>], 
    50                 <% end %> 
    51         ]; 
    52          
    53         drawChart('OS Arch', 'os_arch_div', data); 
    54 } 
    55  
    56 function drawOSPlatform() { 
    57         var data = [ 
    58                 <% @os_platform.each do |key, value| %> 
    59                 ['<%= key %>', <%= value %>], 
    60                 <% end %> 
    61         ]; 
    62          
    63         drawChart('OS Platform', 'os_platform_div', data); 
    64 } 
    65  
    66 function drawBuildArch() { 
    67         var data = [ 
    68                 <% @build_arch.each do |key, value| %> 
    69                 ['<%= key %>', <%= value %>], 
    70                 <% end %> 
    71         ]; 
    72          
    73         drawChart('Build Arch', 'build_arch_div', data); 
    74 } 
    75  
    76 function drawGccVersion() { 
    77         var data = [ 
    78                 <% @gcc_version.each do |key, value| %> 
    79                 ['<%= key %>', <%= value %>], 
    80                 <% end %> 
    81         ]; 
    82          
    83         drawChart('gcc Version', 'gcc_version_div', data); 
    84 } 
    85  
    86 function drawXCodeVersion() { 
    87         var data = [ 
    88                 <% @xcode_version.each do |key, value| %> 
    89                 ['<%= key %>', <%= value %>], 
    90                 <% end %> 
    91         ]; 
    92          
    93         drawChart('XCode Version', 'xcode_version_div', data); 
     23function drawPieChart(json, title, div) { 
     24  var data  = new google.visualization.DataTable(json); 
     25  var chart = new google.visualization.PieChart(document.getElementById(div)); 
     26  chart.draw(data, {width: 450, height: 300, title: title}); 
    9427} 
    9528 
    9629function drawAllCharts() { 
    97         drawMacPortsVersions(); 
    98         drawOSXVersions(); 
    99         drawOSArch(); 
    100         drawOSPlatform(); 
    101         drawBuildArch(); 
    102         drawGccVersion(); 
    103         drawXCodeVersion(); 
     30   
     31  <% charts.each do |hash|%> 
     32  json = <%= raw @chartjson[hash[:key]] %>; 
     33  drawPieChart(json, '<%= hash[:title] %>', '<%= hash[:div] %>'); 
     34  <% end %> 
    10435} 
    10536</script> 
    10637  
    107 <!--Div that will hold the pie chart--> 
    10838<div id="macports_versions_div"></div> 
    10939<div id="osx_versions_div"></div> 
Note: See TracChangeset for help on using the changeset viewer.