Search code examples
javascriptsortingmultidimensional-arraychartsgoogle-visualization

Issue- How to order google graph chart row data by date

I'm totally new to charts.

I've just started working with Google charts API but I'm stuck at this point.

My implemented chart perfectly shows the data, but with an incorrect data segment.

I'm trying to correct the date segment but failing to find perfect solution for it

My reference screenshot which I show my expected and current result
this is script code:-

google.charts.load('current', {'packages':['line']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
       var previewsvalue = '';
        var newsvalue = '';
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'X');
        data.addColumn('number', 'Figure Cost');
        for (var i = 0; i < statsdata.length; i++)
        {
            previewsvalue = +statsdata[i].payment_amount + +newsvalue;
            data.addRow([new Date(statsdata[i].starting_date),Number(previewsvalue) ]);
            newsvalue = previewsvalue;
            console.log('previewsvalue',previewsvalue) 
        }
        data.sort([{column: 1}, {column: 0}]);
      var options = {
        chart: {
          title: 'Its a demo Graph,',
          subtitle: 'in Euro(€)'
        },
        hAxis: {
          title: 'Starting At'
        },
        vAxis: {
            title: "Payment Amount",
        }
      };
      var formatter = new google.visualization.NumberFormat(
    {prefix: '€', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1);
      var chart = new google.charts.Line(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }

this is my Multi-Dimensional array which is I used data in google charts script

[{"payment_amount":"100","starting_date":"2020-12-31T23:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-01-31T23:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-02-28T23:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-03-31T22:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-04-30T22:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-05-31T22:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-06-30T22:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-07-31T22:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-08-31T22:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-09-30T22:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-10-31T23:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-11-30T23:00:00.000000Z"},{"payment_amount":"100","starting_date":"2021-06-16T22:00:00.000000Z"},{"payment_amount":"10","starting_date":"2021-06-29T22:00:00.000000Z"},{"payment_amount":"600","starting_date":"2021-07-12T22:00:00.000000Z"},{"payment_amount":"0","starting_date":"2021-07-30T22:00:00.000000Z"}]

My English not good but I'm trying to explain my point. How Can I fix it? How to sort the Multi-Dimensional array by starting date? enter image description here if previous value 12 and new value is 100 then next value like 120

Solution

  • the sort method is causing the rows to display out of order.

    data.sort([{column: 1}, {column: 0}]);

    reverse the column order as such...

    data.sort([{column: 0}, {column: 1}]);