2017/03/27

How to sort multi-dimensional arrays in JavaScript

This is a continuation of my previous post on How to create a line chart using Chart.js and the data parsed from a CSV string using Papa Parse. In the previous post, the x-axis is not in ascending order (see below photo). This post will address this issue by sorting the data in the desired order before making the chart.




Code

Note, the part highlighted in yellow is the newly added part that does the sorting.


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
    <!-- Load papaparse.js -->
    <script src="papaparse.min.js"></script>
    
    <!-- For latest CDN version of Chart.js, visit https://cdnjs.com/libraries/Chart.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
</head>
<body>
    
    <canvas id="myChart" width="400" height="250"></canvas>

    <script>
        //Parse the data.
        function parseData() {
            csv = "Date,Time,Station_id,Ambient Humidity,Ambient Temperature,Light,Probe Temperature,DI1,DI2" + "\n" +
                  "2017-03-23,16:37:38,1,70.10,22.10,859,22.50,0,0" + "\n" +
                  "2017-03-23,16:42:51,1,70.50,22.30,820,21.88,0,0" + "\n" +
                  "2017-03-23,16:32:25,1,69.90,22.10,848,22.38,0,0" + "\n" +
                  "2017-03-23,16:27:12,1,70.30,22.10,866,22.25,0,0" + "\n" +
                  "2017-03-23,14:21:11,1,71.40,22.60,577,22.38,0,0" + "\n" +
                  "2017-03-23,13:02:45,1,73.10,22.60,558,22.31,0,0" + "\n" +
                  "2017-03-23,13:34:02,1,74.00,22.60,577,22.38,0,0" + "\n" +
                  "2017-03-23,12:20:59,1,75.20,22.50,435,22.25,0,0" + "\n" +
                  "2017-03-23,11:49:39,1,76.00,22.60,572,22.31,0,0";
            var parsed_data = Papa.parse(csv);
            //console.log(parsed_data);
            createGraph(parsed_data.data);
        }

        function createGraph(pd) {
            
            // Check the length of the data array
            //console.log(pd.length);
            
            pd.sort(function (a, b) {
                //return a[1] - b[1];
                
                // The code below works. But hardwire the date is not needed because pd[0] contains the date data.
                //return new Date('1970/01/01 ' + a[1]) - new Date('1970/01/01 ' + b[1]);
                
                // The code below works by combining pd[0] and pd[1] (don't miss the space in between).
                return new Date(a[0]+ " " + a[1]) - new Date(b[0]+ " " + b[1]);
            });
                        
            var canvas = document.getElementById('myChart');
            
            // Buffers for storing the selected array data for making chart
            var time = [];
            var light = [];
            
            for (var i = 1; i < pd.length; i++) {
                //console.log(pd[i][5]);
                time.push(pd[i][1]);            // Time Stamp
                light.push(pd[i][5]);           // Light Sensor Reading
            }
            
            // Double check the contents of the 2 arrays
            console.log(time);
            console.log(light);
            
            var data = {
            //labels: ["January", "February", "March", "April", "May", "June", "July"],
            labels: time,                       // X-Axis
            datasets: [
                {
                    label: "My First dataset",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 5,
                    pointHitRadius: 10,
                    //data: [65, 59, 80, 0, 56, 55, 40],
                    data: light,                // Y-Axis
                }
            ]
            };

            var option = {
                showLines: true,
                responsive: false
            };
            var myLineChart = Chart.Line(canvas,{
                data:data,
                options:option
            });
        }

        parseData();

    </script>

</body>
</html>


Result

Note, the x-axis is now in ascending order.


Reference:

Sort string array containing time in format '09:00 AM'?
http://stackoverflow.com/questions/17064603/sort-string-array-containing-time-in-format-0900-am




Posted by at
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)