2017/03/27

How to create a line chart using Chart.js and the data parsed from a CSV string using Papa Parse

This is a quick summary about how to create a line chart using Chart.js and the data parsed from a CSV string using Papa Parse.

Code

 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
<!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);
            
            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

Chart
Note, For info. on how to put the x-axis in ascending order, refer to my other post at http://wei48221.blogspot.tw/2017/03/how-to-sort-multi-dimensional-arrays-in.html.

Developer Tools Output


Reference

How to Create Website Graphs from CSV Files with c3.js and PapaParse
https://youtu.be/1OK4TJfCzdY
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)