Google Pie Chart Snippet

/* A little snippet to see how to integrate another ajax request data with Google Chart API using JQuery */

var = DOM {

  /**
   * Function that initialize all
   * @return {[void]}
   */
  onReady: function() {
    
    // Invoke the function responsible to send and handle json from CakePHP
    $(".whatever-class").on('submit', DOM.onAjaxRequest);

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {packages:['corechart'], callback: DOM.drawChart});
  },

  /**
   * Function that send POST data to CakePHP and, after that, handles the response
   * @param  {[event]} event
   * @return {[boolean]} false
   */
  onAjaxRequest: function(event) {
      event.preventDefault();
      $.ajax({
        url: $("body").utilities("absolutize", "api/controller/json_view"),
        dataType: "json",
        type: "post",
        data : $(this).serialize(),
        success:function(data, textStatus, jqXHR) {
          DOM.drawChart(data);
        }
      });
      return false;
  },

  /**
   * Function that handles the configs and data to create the pie chart.
   * @param  {[array]} json [Data sent from PHP to JS via Ajax in Json format]
   * @return {[void]}
   */
  drawChart: function(json) {
     
      // Create the data table.
      var data = new google.visualization.DataTable();
      
      // Add columms to identify types, slices, etc.
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');

      // Will add as row each element needed as an object array
      $.each(json.someDataThatYouWant, function( i, index ) {
        data.addRows([[index.name, index.quantity]]);
      });

      // Set chart options
      var options = {'title':'Test Statistics',
                     'width':700,
                     'height':300,
                      backgroundColor: 'transparent'
                    };

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
  }
}

$( document ).ready( DOM.onReady );