https://developers.google.com/chart/interactive/docs/gallery/areachart
And output will be like this:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages: ["corechart"]}); jQuery(document).ready(function () { google.setOnLoadCallback(drawGraph); function drawGraph() { var data = google.visualization.arrayToDataTable([ ['Month', 'Pritom', 'Samir', 'Raju', 'Sanjoy', 'Kamol'], ['2004/05', 165, 938, 522, 998, 450], ['2005/06', 135, 1120, 599, 1268, 288], ['2006/07', 157, 1167, 587, 807, 397], ['2007/08', 139, 1110, 615, 968, 215], ['2008/09', 136, 691, 629, 1026, 366] ]); // Create and draw the visualization. var ac = new google.visualization.AreaChart(document.getElementById('visualization')); ac.draw(data, { title: 'Monthly Point Distribution', isStacked: true, width: 600, height: 400, vAxis: {title: "Point"}, hAxis: {title: "Month"} }); } }); </script> </head> <body> <div id='visualization'></div> </body> </html>
And output will be like this:
