TacTube

Posts

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

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.

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

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

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

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:

How to print date in a regular format in Python?

http://stackoverflow.com/questions/311627/how-to-print-date-in-a-regular-format-in-python

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.

How to get the selected option in a drop down list | DzQ39 |

This post is about how to get the selected option in a drop down list. The source of the code is at https://www.w3schools.com/js/tryit.asp?filename=try_dom_select_option.

Code

<!DOCTYPE html>
<html>
<head>
<script>
function getOption() {
    var obj = document.getElementById("mySelect");
    document.getElementById("demo").innerHTML = 
    obj.options[obj.selectedIndex].text;
}
</script>
</head>
<body>

<form>
Select your favorite fruit:
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getOption()" value="Click Me!">
</form>

<p id="demo"></p>

</body>
</html>

Reference:

JavaScript HTML Input Examples
https://www.w3schools.com/js/js_input_examples.asp

Working with cookies | DzQ39 |

This is a quick summary of how to work with cookies.

The code below is from https://www.w3schools.com/js/js_cookies.asp.

<!DOCTYPE html>
<html>
<head>
<script>

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function checkCookie() {
    var user=getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
       user = prompt("Please enter your name:","");
       if (user != "" && user != null) {
           setCookie("username", user, 30);
       }
    }
}

</script>
</head>
<body onload="checkCookie()">
</body>
</html>

Note that Chrome doesn't support local cookies. That is, the above code won't work if it's run from a local storage (it will run fine if it's run from a server). However, Internet Explorer, Firefox, Safari, and Opera don't have such problem. For detail, see the discussion at https://productforums.google.com/forum/#!topic/chrome/iow88FsnNhQ.

How to get input text field using HTML and JavaScript | DzQ39 |

This is a quick example of how to get the input value from the input text filed, display it and reset it back to the original content.

Code

<!DOCTYPE html>
<html>
<body>

Enter something: <input type="text" id="myText" value="" placeholder="Enter anything">

<p>Enter anything in the above field and click on the Submit button to display the value of the value attribute of the text field.</p>
<p>To clear, click on the Reset button.</p>

<button onclick="getInputText()">Submit</button>
<button onclick="resetInputField()">Reset</button>

<p id="demo"></p>

<script>
function getInputText() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
}

function resetInputField() {
    document.getElementById("myText").value = "";
    document.getElementById("myText").placeholder = "Enter anything";
    document.getElementById("demo").innerHTML = "";
}

</script>
</body>
</html>

Result

Reference:

https://www.w3schools.com/jsref/prop_text_value.asp

https://www.w3schools.com/tags/att_input_placeholder.asp