Dynamically updating Area chart by updating elements of array



April 100 April 200 April 300 April 400

JavaScript

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
var my_2d = [["Jan","300","150"],["Feb","200","200"],["March","100","200"],["April","200","300"],["May","200","300"],["Jun","100","100"],["July","200","150"]]
      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
	  
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', 'Tutorials');
		data.addColumn('number', 'hits');
        for(i = 0; i < my_2d.length; i++)
    data.addRow([my_2d[i][0], parseInt(my_2d[i][1]),parseInt(my_2d[i][2])]);
       var options = {
          title: 'plus2net.com tutorial Hits',
          hAxis: {title: 'Month',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
       }
	///////////////////////////////
function re_draw(nos){
my_2d[3][2]=nos;
	drawChart();
}
////////////////////////////////////	
</script>

HTML

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

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