Area Chart Example

An example of a Google Area Chart.

by Loxos

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 1200px; height: 500px;"></div>

JavaScript

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ["Year", "ABC", "APP5_A", "Application1", "Application2", "AppSixDB", "BondTradingSystem", "Bug", "DIST", "EquityDB", "EquityTradingSystem", "FastLink", "Instrument DB", "PKS4", "PriceDB", "PricingEngine", "ProcessingApp", "ProductPortal", "Risk CRD", "Risk FIIRD", "Risk FXO", "Risk TSY", "RiskDB"],
[new Date(2013,11), 4756, 52, 32, 3969, 2340, 4308, 308, 353, 64992, 273157, 27154, 618828, 10222, 34345, 253108, 1386, 6664, 374, 119, 3520, 135, 2535],
[new Date(2014,0),7240, 51, 32, 3983, 2324, 4729, 296, 354, 75066, 282227, 27158, 284708, 9706, 38994, 299312, 1381, 6533, 387, 242350, 120, 3547, 135],
[new Date(2014, 1),3963, 48, 32, 4032, 2642, 2128, 304, 354, 73795, 288774, 27305, 20245, 10039, 39015, 300099, 1365, 4169, 383, 257541, 4107, 117, 3482],
[new Date(2014,2),3657, 32, 32, 4015, 2668, 1751, 322, 354, 74821, 287584, 27084, 20966, 12022, 40108, 315048, 1373, 4026, 1768, 397, 26367, 6787, 114],
[new Date(2014, 3), 2855, 30, 32, 4016, 2654, 329, 355, 91761, 213760, 28555, 20841, 10954, 42288, 272749, 991, 4119, 1628, 399, 26071, 6810, 113, 3581],
[new Date(2014,4),985, 31, 32, 4002, 2664, 337, 344, 87416, 153660, 25477, 17387, 10668, 39452, 322467, 947, 3996, 384, 398, 28349, 6216, 111, 3586],

[new Date(2014,10), 6284, 22, 8, 3943, 2817, 313, 344, 103808, 172788, 32127, 18229, 33262, 78, 2713, 411, 31273, 12724, 106, 4677, 135, 2489, 76643],
[new Date(2014, 11), 6023, 22, 41, 3937, 2817, 325, 344, 109797, 197705, 27822, 18800, 35245, 81, 2614, 411, 30720, 12280, 106, 2026, 135, 2490, 76634],
[new Date(2015, 0), 2782, 22, 40, 3900, 2842, 303, 315, 111726, 194556, 28644, 21775, 34486, 81, 2658, 435, 29966, 9127, 105, 1938, 135, 2504, 145361]


        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year', ...