Sampling frame rate with Google Analytics

charts.js

      function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        var raw_data = [['Firefox', 54.7251732101617,38.5836297788,57.8144329896907],
                        ['Chrome', 53.6122383252818, 52.2536231884058, 55.0701298701299]];
        
        var years = ['Flame', 'Lightning', 'Gatling'];
                        
        data.addColumn('string', 'Year');
        for (var i = 0; i  < raw_data.length; ++i) {
          data.addColumn('number', raw_data[i][0]);    
        }
        
        data.addRows(years.length);
      
        for (var j = 0; j < years.length; ++j) {    
          data.setValue(j, 0, years[j].toString());    
        }
        for (var i = 0; i  < raw_data.length; ++i) {
          for (var j = 1; j  < raw_data[i].length; ++j) {
            data.setValue(j-1, i+1, raw_data[i][j]);    
          }
        }
        
        // Create and draw the visualization.
        new google.visualization.BarChart(document.getElementById('visualization')).
            draw(data,
                 {title:"Average FPS across 4x4 Arrays",
                  width:600, height:400,
                  vAxis: {title: "Tower"},
                  hAxis: {title: "FPS",minValue: 0}}
            );
   
        var data = new google.visualization.DataTable();
        var raw_data = [['',57.6615853658537,55.8174807197944,51.5285913528591,29.3636363636364 ]];
        
        var years = ['Linux','Mac OS','Windows','Chrome OS'];
                        
        data.addColumn('string', 'Year');
        for (var i = 0; i  < raw_data.length; ++i) {
          data.addColumn('number', raw_data[i][0]);    
        }
        
        data.addRows(years.length);
      
        for (var j = 0; j < years.length; ++j) {    

          data.setValue(j, 0, years[j].toString());    
        }
        for (var i = 0; i  < raw_data.length; ++i) {
          for (var j = 1; j  < raw_data[i].length; ++j) {
            data.setValue(j-1, i+1, raw_data[i][j]);    
          }
        }
        
        // Create and draw the visualization.
        new google.visualization.BarChart(document.getElementById('visualization2')).
            draw(data,
                 {title:"Average FPS across all 4x4 arrays",
                  width:600, height:400,
                  vAxis: {title: "Operating System"},
                  hAxis: {title: "FPS",minValue: 0}}
            );
      }
      google.setOnLoadCallback(drawVisualization);

demo.js

  var fps = 0;
  var fpsElem = $("#frameRate");
  setInterval(function() {
    fpsElem.text(fps);
  }, 1000);

  // Handle form element changes.
  var opts = {};
  $("#sprite, #rows, #columns, #x_offset, #y_offset").change(function() {
    opts[this.id] = $(this).val();
  }).change();

  var avgFrameRateCount = 0;
  var avgFrameRateTotal = 0;
  var lastSecond = new Date;

  var drawloop = function() {
    var now = new Date;
    var elapsed = now - lastSecond;

    // ... lots of main loop functionality ...
   
    fps = ++frameCount / (elapsed / 1000);
    
    if (elapsed > 1000) {
      avgFrameRateCount++;
      avgFrameRateTotal += fps;
      if (avgFrameRateCount % 8 == 7) {
        _gaq.push([
          '_trackEvent',
          'FRWebGL',
          opts.sprite,
          'r'+opts.rows+'c'+opts.columns+'x'+ops.x_offset+'y'+opts.y_offset,
          Math.floor(avgFrameRateTotal/(avgFrameRateCount))
        ]);
        avgFrameRateCount = 0;
        avgFrameRateTotal = 0;
      }
      frameCount = 0;
      lastSecond = now;
    }
  }; // end main loop