Using Google Pie Chart for your Blog/Site

There are plenty of GREAT API libraries for synthesizing chart/graph out there : D3, FusionCharts, CanvasJS, Google Chart, etc. You can check out this post on TechSlides to find out more.

This is the Chart API from Google. Sweet, completely free, and there're plenty of graph interfaces you can choose from. I'm gonna show you the Pie Chart visualization.

---

DEMO

---

A pie chart is rendered within the browser using SVG or VML. Displays tooltips when hovering over slices.
Google Developers Pie Chart

---

All you need to do is go to the Google Code Playground of Pie Chart, put your configurations there to visualize your data, and copy the HTML from there to your blog post/site.

Since it's rendered using image on client side, we can't directly override the styling with CSS, instead, we can use additional JavaScript parameters.

---

This is the Pie Chart code source from Google, configured with my manual data table example and my own chart settings, and the HTML element of the demo above

<!--This is the HTML element of the chart-->
<div id="visualization" style="width: 720px;height:480px;margin:auto"></div>

<!-- Google JavaScript API library -->
<script src="https://www.google.com/jsapi"></script>

<!-- Invoke the Pie Chart -->
<script>
  // Loader
  google.load('visualization', '1', {packages: ['corechart']});

  // Function
  function drawVisualization () {
  // Create and populate the data table - manually
   var data = google.visualization.arrayToDataTable
   ([
     ['Letter', 'Frequency'],
     ['M', 1],
     ['O', 2],
     ['N', 1],
     ['K', 1],
     ['E', 1],
     ['Y', 1],
     ['R', 2],
     ['A', 1],
     ['P', 1],
     ['T', 1]
   ]);

  // These are the configuration options
   var options = {
     title: 'Letter within Monkey Raptor',
     backgroundColor : '#eee'
   };

  // Draw the pie chart according to data and options defined
    new google.visualization
      .PieChart(document.getElementById('visualization'))
        .draw(data, options);
  }

  google.setOnLoadCallback(drawVisualization);
</script>

To use even more configuration options, you can go to Google Developers Pie Chart

To implement automatic data array from your own database, you can take a look at this advanced usage with PHP documentation and the JavaScript literal documentation

The original example on Google Code Playground is licensed under Apache 2.0 License.