Google Charts

Google Charts

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};
3D Pie chart options

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.

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer