Google heatmap plotting with wrong gradient based on weight

I was having some problem with Google Heatmap. The result that I am getting as such:

The following as the code for me to populate the array for heatmap, I declared the heatmapData as global array so that I can be used in some other function:

var heatmapData = [];
function addForecastMarker(marker){
    // code to plot marker here

    heatmapData.push({location: new google.maps.LatLng(marker['lat'], marker['lng']), weight: marker['total'].toFixed(2)}); 
}

When I tried to print out the above data to ensure I am retriving the correct data, I am getting these which mean my population for heatmapData is no problem:

['lat: 1.3920108, lng: 103.8951026, weight: 37.80',
'lat: 1.3164324, lng: 103.8943035, weight: 282.40',
'lat: 1.4055193, lng: 103.9119956, weight: 104.40',
'lat: 1.3669051, lng: 103.9645099, weight: 112.70',
'lat: 1.299765, lng: 103.7883239, weight: 68.60',
'lat: 1.3808263, lng: 103.8793951, weight: 305.35',
'lat: 1.301906, lng: 103.9049735, weight: 240.50',
'lat: 1.3890362, lng: 103.8289738, weight: 77.70',
'lat: 1.346858, lng: 103.9379999, weight: 147.40',
'lat: 1.3022747, lng: 103.8764825, weight: 14.75',
'lat: 1.3735984, lng: 103.8863068, weight: 241.20',
'lat: 1.2869242, lng: 103.8188638, weight: 13.20',
'lat: 40.3096226, lng: -73.9785844, weight: 189.40',
'lat: 1.3728821, lng: 103.8476553, weight: 102.50',
'lat: 1.4356078, lng: 103.8368437, weight: 59.05',
'lat: 40.2232011, lng: -76.0360669, weight: 42.65',
'lat: 1.2823, lng: 103.8253157, weight: 38.60',
'lat: 1.302012, lng: 103.836271, weight: 93.80',
'lat: 1.3393411, lng: 103.7053874, weight: 3.60',
'lat: 1.287303, lng: 103.805329, weight: 66.40',
'lat: 1.2927292, lng: 103.859401, weight: 45.60',
'lat: 1.2875947, lng: 103.8340063, weight: 127.90',
'lat: 1.3584368, lng: 103.7495064, weight: 90.50']

Lat followed by Lng followed by weight.

After populated the global array, when I tried to plot out the heatmap in another function (At this point when I print out the heatmapData, the array is already populated so I am pretty sure it is not due to that problem):

var fheatmap;
var fheatmapLayer = [];
var fgradient = ['rgba(185, 185, 203, 0)', 'rgba(145, 145, 192, 0)',
  'rgba(65, 65, 207, 0)', 'rgba(30, 30, 229, 1)',
  'rgba(0, 185, 255, 1)', 'rgba(0, 255, 215, 1)',
  'rgba(0, 255, 15, 1)', 'rgba(0, 255, 0, 1)',
  'rgba(255, 255, 0, 1)', 'rgba(255, 235, 0, 1)',
  'rgba(255, 0, 0, 1)'
];

function drawForecastHeatmap() {
  console.log(heatmapData);
  var pointArray = new google.maps.MVCArray(heatmapData);

  fheatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    gradient: fgradient,
    map: forecastmap,
    radius: 10,
    dissipating: true,
  });
  // push layer of heat map into array to ease the clearing of layers
  fheatmapLayer.push(fheatmap);
  fheatmap.setMap(forecastmap);
}

var forecastmap;

function initMap() {
  forecastmap = new google.maps.Map(document.getElementById('forecastmap'), {
    center: {
      lat: 1.352083,
      lng: 103.81983600000001
    },
    zoom: 11
  });
}

<div class="row" style="padding-left: 15px; padding-right: 15px;">
  <div class="col-md-12">
    <div class="box-header">
      <i class="fa fa-map-marker"></i>
      <h4 class="box-title">Forecasted Hot Spots by Subtype in 2018</h4>
    </div>
    <div class="box-body">
      <div id="forecastmap" style="width:100%;height:300px"></div>
    </div>
  </div>
</div>

I do not have any other CSS to style the map other than the 'heat' gradient I defined myself.

The code above supposed to produce something like this: