Dynamically updating Area 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 = [["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

Subhendu Mohapatra

Author

🎥 Join me live on YouTube

Passionate about coding and teaching, I publish practical tutorials on PHP, Python, JavaScript, SQL, and web development. My goal is to make learning simple, engaging, and project‑oriented with real examples and source code.

← Subscribe to our YouTube Channel here