Posts

=================================

How to parse CSV string using Papa Parse | DzQ39 |

This is an example of how to form a CSV string and parse it 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
<!DOCTYPE html>
<html>
<head>
    <!-- Load papaparse.js -->
    <script src="papaparse.min.js"></script>
</head>
<body>
    <br><br><br>
    <div class="container">
        <div id="chart"></div>
    </div>

    <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 data = Papa.parse(csv);
            console.log(data);
        }

        parseData();

    </script>

</body>
</html>

Note that "\n" is needed at the end of each line to indicate the end of a row of data in the CSV string; without it, the whole CSV string will be treated as one line and you will have one long row of data...

Once the code is done, save it as index.html (or other filename name that ends with ".html"), then double click on the saved file to launch a browser to execute it.

Result

At first glance, there's nothing to see.


If Google Chrome is used, enable the Developer Tools under More Tools / Developer Tool.


Under Console, there is an array that contains 10 rows of data.
Click on data, then on individual Array to see the data.


The CSV string is now successfully parsed and put in an array.

References:

Parsing a Local CSV File with JavaScript and Papa Parse
http://www.joyofdata.de/blog/parsing-local-csv-file-with-javascript-papa-parse/

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

How to create a simple line chart using Chart.js | DzQ39 |

Here is a quick example of how to make a line chart using Chart.js.

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
!DOCTYPE html>
<html>
  <head>
    <!-- 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>

    var canvas = document.getElementById('myChart');
    var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    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],
        }
    ]
    };

    var option = {
        showLines: true,
        responsive: false
    };
    var myLineChart = Chart.Line(canvas,{
        data:data,
    options:option
    });
      
    </script>
  </body>
</html>

Result


Reference

https://jsfiddle.net/red_stapler/4zwyn6vd/4/
at No comments:
Labels: , ,

How to turn JSFiddle example into standalone code | DzQ39 |

This post is about how to turn JSFiddle example into standalone code.


Source: https://jsfiddle.net/red_stapler/mfvmoy64/



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
<!DOCTYPE html>
<html>
  <head>
    <!-- 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="200" height="100"></canvas>

    <script>

      var canvas = document.getElementById('myChart');
      var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [65, 59, 30, 81, 56, 55, 40],
        }
        ]
      };
      var option = {
            animation: {
       duration:5000
            }
      };
      var myBarChart = Chart.Bar(canvas,{
            data:data,
            options:option
      });
      
    </script>
  </body>
</html>

Note,

1. The code in the HTML section of JSFiddle goes to the <body> section (line 9);
2. The code in the JAVASCRIPT section of JSFiddle goes to the <script> section (line 13 ~ 36) in <body>;
3. The External Resources (left side menu, https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js) goes to the <script> section in <head>.

at No comments:
Labels: , ,

How to create a simple bar chart using Chart.js | DzQ39 |

Below are some examples on how to create charts using Chart.js

For info. on how to obtain the latest Chart.js, please refer to the link below.
http://stackoverflow.com/documentation/chart.js/4274/getting-started-with-chart-js#t=201703251048525532779

Bar Chart Sample Code


Note, the code below uses the CDN version of Chart.js.

 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
<!DOCTYPE html>
<html>
  <head>
    <!-- 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>

      var canvas = document.getElementById('myChart');
      var data = {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
              {
                  label: "My First dataset",
                  backgroundColor: "rgba(255,99,132,0.2)",
                  borderColor: "rgba(255,99,132,1)",
                  borderWidth: 2,
                  hoverBackgroundColor: "rgba(255,99,132,0.4)",
                  hoverBorderColor: "rgba(255,99,132,1)",
                  data: [65, 59, 30, 81, 56, 55, 40],
              }
          ]
      };
    
      var option = {
              animation: {
         duration:5000
              },
              //responsive: false
      };

      var myBarChart = Chart.Bar(canvas,{
       data:data,
        options:option
      });
      
    </script>
  </body>
</html>

Result


Note that the size of the chart is beyond the width and height specified in <canvas id="myChart" width="400" height="250"></canvas>. The solution is to add responsive: false in the option field (see below pic).


Result

The chart is now responding to the width and height parameters.

--------------------------------------------------------------------------------------------------------------------------

Below is another example.

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
<!DOCTYPE html>
<html>
<head>
    <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="200"></canvas>

    <script>
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels: ["Group 1", "Group 2", "Group 3"],
                      datasets: [{
                          label: 'Groups',
                          data: [12, 19, 3]
                      }]
                  },
                  options: {
                    responsive: false
                  }
        });
    </script>

</body>
</html>

Result

References:

Chart.js

Creating Beautiful Charts with Chart.js
https://www.sitepoint.com/creating-beautiful-charts-chart-js/

An Introduction to Chart.js 2.0 — Six Simple Examples
https://www.sitepoint.com/introduction-chart-js-2-0-six-examples/

Getting started with chart.js
http://stackoverflow.com/documentation/chart.js/4274/getting-started-with-chart-js#t=201703251048525532779

CDNJS Version of Chart.js
https://cdnjs.com/libraries/Chart.js

c3.js

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

How to measure time elapsed in Python. | DzQ39 |

This is a quick summary of how to measure time elapsed in Python.

Code

from timeit import default_timer as timer
import time # needed to support sleep.

start = timer()
time.sleep(5) # delay 5 seconds
end = timer()
print(end - start)



Result


Reference:

Measure time elapsed in Python?
http://stackoverflow.com/questions/7370801/measure-time-elapsed-in-python
at No comments:
Labels: , ,

Python - How to get current date time and format its output | DzQ39 |

This is a quick summary of how to get the current date and time and format its output in Python.

The Code

import datetime
print datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")

The Result


Reference:

at No comments:
Labels: , ,

How to view cookies in Chrome and Firefox | DzQ39 |

This post is a quick summary of how to view cookies info. using Chrome and Firefox.



Chrome

1. Launch Chrome web browser and visit the site that you want to check for cookies.


2. Right click on the web page to bring up the menu and left click on the last item (Inspection) in the list.


3. The info. for cookies is under Application.

Note, Chrome doesn't support local cookies. For local cookies support, use Firefox / IE

Firefox

1. Install "View Cookies" (https://addons.mozilla.org/zh-tw/firefox/addon/view-cookies/).

2. Restart Firefox.

3. Visit the website that you want to check for cookies, once there, right click on any part of the webpage to bring up the menu. The View Cookies add-on is under View Page Info..


4. Click on Cookies to see cookies info. There is no domain info. because the page is launched locally.


at No comments:
Labels: , ,