Google Chart Basics to display charts

</head>
<body>
<div id="chart_div"></div>

// Instantiate and draw the chart
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'sg2plzcpnl508256'},{'dcenter':'sg2'},{'cp_id':'10901345'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Google Chart tool to display Pie chart with data and different options using loader.js library

HTML

This part is included in above code

<div id="chart_div"></div>

Copy above JavaScript code and html code and save as .html page. The above Pie chart will be displayed on your page. You should have internet connection to connect to Google Chart library.

Changing Height Width and Title

var options = {'title':'Tutorials at plus2net.com',
                       'width':400,
                       'height':300};

3-D Pie chart

Change the options and add is3D=true, by default its value is false.

var options = {title:'plus2net.com :Nos of tutorials',
           width:600,
           height:500,
	   legend:'left',
           is3D:true};

Data Source

Our data source can be from Comma Separated Value ( CSV ) file or from MySQL database. We use one array variable in PHP where we collect the data first. This array is created by taking data from different sources. After creating this array, the rest of the code to generate the graph remain same.

In all tutorials we maintained the same sequence so created the php array $php_data_array first and then transfer the data to JavaScript array my_2d to create the graph.

Creating image from the graph

This is applicable to all types of graphs. Below code will generate one .png file which can be downloaded.

var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(chart_div);
google.visualization.events.addListener(chart, 'ready', function () {
      chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        console.log(chart_div.innerHTML);
      });
	  
chart.draw(data, options);

3D Pie Chart with change in data Understanding different types of Charts
Pie Chart with Data from MySQL database table Tutorial on using MySQL records to display in Google table chart.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

Google Charts