Dynamically updating Pie chart by updating elements of array

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


<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.

      // 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',

        // 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){
function re_draw2(tp){


<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',

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() + '">';
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


* indicates required
Subscribe to plus2net


    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