Dynamically updating Pie chart by updating elements of array

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

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

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: