Create an Area Chart with Google Charts

const data = google.visualization.arrayToDataTable([
  ['Month', 'Sales'],
  ['Jan', 300],
  ['Feb', 220],
  ['Mar', 360]
]);
const chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, {title: 'Sales trend'});

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 & 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: