Google Visualization AreaChart Display Very Weird Results

Question

I am changing several line charts on my site to areacharts. I tried to produce one today but had very odd results.

All columns and rows are added to the visualization.DataTable dynamically with very ugly javascript since I've been testing all day. I wanted to spare y'all having to look through that so I manually typed up the data.addColumn and data.addRow information.

EDIT** After testing in googles areachart fiddle with the manually created datatable I provided below, the chart looked great. So my code that adds each row in a loop is most likely the problem. To better diagnose the issue, here is the encoded datatable array for the chart:

{"cols":[{"id":"","label":"Date","pattern":"","type":"datetime","p":{}},{"id":"","label":"Marth Wrecker","pattern":"","type":"number","p":{}},{"id":"","label":"Ultimate Melee","pattern":"","type":"number"}],
"rows":
[{"c":[{"v":"Date(2018, 2, 19)"},{"v":15016},{"v":27762}]},{"c":[{"v":"Date(2018, 2, 20)"},{"v":15057},{"v":27883}]},{"c":[{"v":"Date(2018, 2, 15)"},{"v":null},{"v":27319}]},{"c":[{"v":"Date(2018, 2, 16)"},{"v":null},{"v":27445}]},{"c":[{"v":"Date(2018, 2, 17)"},{"v":null},{"v":27571}]},{"c":[{"v":"Date(2018, 2, 18)"},{"v":null},{"v":27681}]}]}

Here is what my chart ended up looking like:

And when I set isStacked: true this is what the chart looks like:

Here is my code:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});


  function drawReachByUser(){
  
	var data = new google.visualization.DataTable();
	
	data.addColumn('datetime', 'Date');
	data.addColumn ('number', 'Marth Wrecker');   
	data.addColumn ('number', 'Ultimate Melee'); 
	
	data.addRow([new Date(2018, 03, 15), 0, 27319]);
	data.addRow([new Date(2018, 03, 16), 0, 27445]);
	data.addRow([new Date(2018, 03, 17), 0, 27571]);
	data.addRow([new Date(2018, 03, 18), 0, 27681]);
	data.addRow([new Date(2018, 03, 19), 15016, 27762]);
	data.addRow([new Date(2018, 03, 20), 15057, 27883]);
	
	var areachart_options = {
		vaxis: {minvalue: 0},
		series: { 
			0: { color: '#00cc99' },
			1: { color: '#007AFF' }
		}
	};
		
    var chart = new google.visualization.AreaChart(document.getElementById('reach_line_chart'));

    chart.draw(data, areachart_options);
    
  }


</script>	

I've tested setting null values to 0, null, and false but the chart still seems to be very odd with all of those settings.

Has anyone experienced this? Any help would be appreciated.

Answer 1

So I compared the datatable arrays from the fiddle where I manually added each row in succession to what was on my site and I believe I found the error.

I was using a loop that cross-referenced my 'numbers' columns with the respective name of of the column to ensure I was inputting the integer in the correct list for data.addRow. The dates were added in an incorrect order which resulted in the weird graph. Here is a snippet of my loop that added each row:

    $.each (second_final_array, function(key, value){
        var reach_list =[];
        console.log("hey");
        reach_array_ident= JSON.parse(JSON.stringify(value));
        
        var sponsor_date= key;
        var sponsor_date_parse= sponsor_date.replace(/-/g, ",");
        var date_parse = sponsor_date_parse.split(",");
        
        var years = date_parse[0];
        var months= date_parse[1];      
        var days = date_parse[2];  

        grid_count += 1;
        
        reach_list.push(new Date(years, months, days));
        $.each(cc_name_array, function(key, value){
            var num = parseInt(value);
            console.log(num);
            
            var num_reach= second_final_array[sponsor_date][num];
            
            //var reach_one = reach_array_ident
            if (typeof num_reach !== 'undefined') {
                num_reach_verified= num_reach;
            }else{
                num_reach_verified= 0;
            }            
        
            reach_list.push(num_reach_verified);           
               
        
        });
        
        data.addRow(reach_list);

I simply ordered the object date keys and my chart is nice and clean now:

    var test_final_array= Object.entries(final_array);

    var orderedDates = {};
    var second_final_array = Object.keys(final_array).sort(function(a, b) {
        return moment(b, 'YYYY/MM/DD').toDate() - moment(a, 'YYYY/MM/DD').toDate();
    }).forEach(function(key) {
        orderedDates[key] = final_array[key];
    })
    Object.keys(orderedDates).forEach(function(date) {
       document.body.innerHTML += date + "<br />"
    });
    console.log("hopefully sorted array");
    //var second_final_array= JSON.parse(JSON.stringify(second_final_array));
    console.log(orderedDates);
    

    var grid_count=0;
    
    $.each (orderedDates, function(key, value){
        console.log ("here is the value");
        console.log(value);
        var reach_list =[];
        
        reach_array_ident= JSON.parse(JSON.stringify(value));
        
        var sponsor_date= key;
        var sponsor_date_parse= sponsor_date.replace(/-/g, ",");
        var date_parse = sponsor_date_parse.split(",");
        
        var years = date_parse[0];
        var months= date_parse[1] -1;      
        var days = date_parse[2];  

        grid_count += 1;
        
        reach_list.push(new Date(years, months, days));
        $.each(cc_name_array, function(key, value){
            var num = parseInt(value);
            console.log(num);
            
            var num_reach= orderedDates[sponsor_date][num];
            
            //var reach_one = reach_array_ident
            if (typeof num_reach !== 'undefined') {
                num_reach_verified= num_reach;
            }else{
                num_reach_verified= 0;
            }            
        
            reach_list.push(num_reach_verified);           
               
        
        });
        
        data.addRow(reach_list);
        console.log("here is the reach list");
        console.log(reach_list);
        
        
    });