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);