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,};
Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.




HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer