Pie Chart Generator

Have you ever wanted pie charts for your web pages? And easy to implement, too?

Here you go!

Use the Pie Chart Code Generator further below. Specify the name and number value for each pie slice and then click the button.

The generated code is copy and paste, ready for your web page. It's HTML and JavaScript. No PHP required.

The code uses Google's chart API.

The pie chart will have the API's default colors and fonts. The Google developers site for charts provides information for changing the defaults.

Width-responsive Pie Charts, But Not Dynamic

The pie charts are initial-width responsive, not dynamic-width responsive.

In other words, the pie chart fits into any mobile device or desktop browser window when the page is loaded.

But the pie chart won't dynamically change its size if you adjust the browser width after the page has loaded. You'll need to reload the page after adjusting the browser width.

It has to do with how Google's chart API delivers the pie charts.

Not a Static Example Pie Chart

The pie chart a bit further below is changeable by you, not a static example.

When the page first loads, the pie chart shows the relationship between the number of pages in 3 areas of the Willmaster.com website. The numbers include this article but won't be updated as more are published or others removed.

Instead of example pie chart, let's call it the pie chart of the article.

Use the pie chart generator further below to change it. Create your own pie charts.

This code renders the pie chart you see above. It can be pasted into any web page where the pie chart is to be published.

<!-- Code generator provided by Will Bontrager Software LLC at https://www.willmaster.com/library/generators/pie-chart-generator.php -->
<!-- The div where the pie chart will be placed. -->

<div id="chart_div" style="width:100%; max-width:500px; height:400px; margin:0 auto;"><hr>LOADING...<hr></div>

<!-- This first JavaScript adjusts the height of the pie chart div according to the actual width of the pie chart div -->
<script type="text/javascript">
var d = document.getElementById("chart_div");
d.style.height = parseInt((d.scrollWidth/5*4)+1) + "px";
</script>

<!-- The following JavaScript is for Google's charts API. -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load( 'visualization', '1.0', { 'packages':['corechart'] } );
google.setOnLoadCallback(drawChart);
function drawChart()
{
   var data = new google.visualization.DataTable();
   data.addColumn( 'string', 'Area' );
   data.addColumn( 'number', 'Pages' );
   data.addRows([
         ['Article Library', 511],
         ['Blog', 275],
         ['Commercial Software', 152],
      ]);
   var options = { 'title':'3 Willmaster.com Area Page Counts', 'legend':'bottom', 'is3D':true, };
   var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
   chart.draw(data, options);
} // function drawChart()
</script>

The Pie Chart Code Generator

The form is pre-filled with the data used for rendering the pie chart of the article using the above code.

After submitting the form, this page will reload. The pie chart for the code you generated will be the pie chart of the article.

It the result isn't what you intended, you can update the form and submit it again.

Use the Pie Chart Code Generator, then copy the generated code to paste the pie chart into your web pages.

It's outside the scope of this article, but if you're JavaScript proficient you'll see the code that can be modified to add, delete, and change the pie slices. With a bit of PHP, it's possible to automatically draw pie charts using data obtained from a database.

As it is, with no advanced knowledge required, you can use the generator to create pie charts and paste them into your web pages. Easy.

(This article first appeared in Possibilities ezine.)

Will Bontrager