Dynamically updating Pie chart by updating elements of array


PHP 100 PHP 200 PHP 300 PHP 400
3D graph Normal Graph

JavaScript

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
var my_2d = [["PHP","300"],["JavaScript","200"],["MySQL","100"],["JQuery","200"],["HTML","200"],["ASP","100"]]
      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Languages');
        data.addColumn('number', 'Tutorials');
        for(i = 0; i < my_2d.length; i++)
    data.addRow([my_2d[i][0], parseInt(my_2d[i][1])]);
        // Set chart options
        var options = {'title':'Tutorials at plus2net.com',
                       'width':600,
                       'height':500,
			   is3D:true,};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
	///////////////////////////////
function re_draw(nos){
my_2d[0][1]=nos;
	drawChart();
}
//
function re_draw2(tp){
	if(tp=='yes'){type_3d=true;}
	else{type_3d=false;}
	drawChart();
}
////////////////////////////////////	
</script>

HTML

<input type=radio name=type value=100 onclick="re_draw(100)";>PHP 100
 <input type=radio name=type value=200 onclick="re_draw(200)";>PHP 200
 <input type=radio name=type value=300 onclick="re_draw(300)"; CHECKED>PHP 300
 <input type=radio name=type value=400 onclick="re_draw(400)";>PHP 400

<input type=radio name=3d value='yes' onclick="re_draw2('yes')"; checked>3D graph
 <input type=radio name=3d value='no' onclick="re_draw2('No')";> Normal Graph	
    <div id="chart_div"></div>	

Customization of the Chart

 var options = {'title':'Tutorials at plus2net.com',
                       'width':600,
                       'height':500,
			is3D:true,};

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

Bar chart using user inputs

User can update the values of Bar chart and redraw the chart.
Understanding different types of Charts Pie Chart using MySQL data
Chart Basics
Subscribe to our YouTube Channel here

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-2022 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer