If you're working on a project that requires data visualization, check out these five great open source libraries and see which one fits your needs!

In this post, we will talk about top 5 best open source&nbsp;<a href="/category/javascript/" target="_blank" rel="nofollow noopener noreferrer">JavaScript</a>&nbsp;chart libraries. Every site and dashboard are incomplete without charts and graphs so it is very important to find the right chart library for our application. The following libraries will help you to create customizable and beautiful charts for your application.
<h3 id="d3js-data-driven-documents">D3.js — Data-Driven Documents</h3>
D3.js is an open source JavaScript library used for manipulating documents based on user data. It is a powerful tool which gives life to the data with the help of HTML, SVG, and CSS. D3 allows developers to bind arbitrary data to a DOM and then it applies the data-driven transformation to the DOM.

For Example: Consider an array of numbers, You can use it to generate an HTML table or you can use the same data to generate interactive&nbsp;bar or pie charts.

Official Website:&nbsp;<a href="https://d3js.org/" target="_blank" rel="nofollow noopener noreferrer">https://d3js.org/</a>
<h3>Google Charts</h3>
Google Charts is an open source chart library which is powerful and very simple to use. It has many interactive charts to display and render live data. It has a rich chart gallery that include options like pie charts, bar charts,&nbsp;Scatter Charts, donut charts, etc. Moreover, various customization options are available with the charts.

It also has charts like Histograms, timelines, trend lines, Sankey Diagrams, etc.

Official Website:&nbsp;<a href="https://google-developers.appspot.com/chart/" target="_blank" rel="nofollow noopener noreferrer">https://google-developers.appspot.com/chart/&nbsp;</a>
<h3>Chart.js</h3>
Chart.js is a community maintained chart library and by using it we can create responsive charts for your website. Using it we can generate mixed charts and it has great rendering capacity in modern browsers. It has very good documentation and samples available.

<a href="http://jtblin.github.io/angular-chart.js/" target="_blank" rel="nofollow noopener noreferrer">Angular Chart</a>&nbsp;is built on top of the Chart.js library, and for Angular projects it will be really easy to implement Angular charts.

Official Website:&nbsp;<a href="http://www.chartjs.org/" target="_blank" rel="nofollow noopener noreferrer">http://www.chartjs.org/</a>
<h3>Chartist.js</h3>
Chartist.js is also an open source JavaScript library similar to Chart.js. It has&nbsp;rich and response charts available. Using it, we can generate SVG charts that are DPI independent. It has support for most of the modern browsers and good community support. It has support for some other technologies like Node, Angular, Jjava, Wordpress, Ember, React, and Meteor.

Official Website:&nbsp;<a href="http://gionkunz.github.io/chartist-js/" target="_blank" rel="nofollow noopener noreferrer">http://gionkunz.github.io/chartist-js/</a>
<h3>n3-charts</h3>
n3-charts is also an open source JavaScript chart library and it makes the life of the Angular developer easy. n3-charts is built on top of D3.js and AngularJS, hence it posses more powerful charts and it's easy to implement.

Official Website:&nbsp;<a href="http://n3-charts.github.io/line-chart/#/home" target="_blank" rel="nofollow noopener noreferrer">http://n3-charts.github.io/line-chart/#/home</a>

If you're working on a project that requires data visualization, check out these five great open source libraries and see which one fits your nee...

Top 5 Best Open Source JavaScript Chart Libraries - TCMHACK

Top 5 Best Open Source JavaScript Chart Libraries

Uploading files on AWS S3 is very easy with AWS Javascript SDK. We're going to upload files to S3 in some simple steps.
Before going to next steps, I'm assuming you already have a file stored in fileToBeUpload variable in Javascript.
Let's Begin.
<h3>Step 1: Add the AWS SDK into the head section of your file.</h3>
<pre class="wp-block-preformatted">&lt;script src="<a href="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js">https://sdk.amazonaws.com/js/aws-sdk-2.207.0.min.js</a>"&gt;&lt;/script&gt; </pre>
<h3>Step 2: Initiate the AWS Configuration.</h3>
There are two to initialize the AWS Configuration.
A. By using the AWS Key &amp; Secret Key but it is not advisable to display your keys directly on page.
<pre class="wp-block-preformatted">&lt;script type="text/javascript"&gt;
&nbsp; &nbsp; AWS.config.update({
&nbsp; &nbsp; &nbsp; &nbsp; accessKeyId: 'AWS_ACCESS_KEY',
&nbsp; &nbsp; &nbsp; &nbsp; secretAccessKey: 'AWS_SECRET_KEY',
 region: 'AWS_REGION'
&nbsp; &nbsp; });
&lt;/script&gt;</pre>
B. By using the AWS Identity Pool Id (I recommand using the identityPoolId)
<pre class="wp-block-preformatted">&lt;script type="text/javascript"&gt;
&nbsp; &nbsp; AWS.config.update({
&nbsp; &nbsp; &nbsp; &nbsp; credentials: new AWS.CognitoIdentityCredentials({
 IdentityPoolId: 'AWS_Identity_Pool_Id'
 }),
 region: 'AWS_REGION'
&nbsp; &nbsp; });
&lt;/script&gt;</pre>
<h3>Step 3: Lets start the uploading</h3>
<div>
<pre>var bucketName = "AWS_BUCKET_NAME"; var fileToBeUpload = "FILE_TO_BE_UPLOAD"; var filePath = "demo/user_uploaded/"; // File will be saved to this folder on aws s3. // Initialize the AWS Object var bucket = new AWS.S3({ apiVersion: "2006-03-01", params: { Bucket: bucketName }, }); var params = { Key: filePath, ContentType: fileToBeUpload.type, Body: fileToBeUpload, ContentDisposition: "attachment", // if you want to enable file download via public url. }; /* turn off the timeout (Optional) */ AWS.config.httpOptions.timeout = 0; // upload file bucket.upload(params).on("httpUploadProgress", function (evt) { var uploaded = Math.round((evt.loaded / evt.total) * 100); console.log("File uploaded", uploaded, "%"); }) .send(function (err, data) { if (err) { // an error occurred, handle the error console.log(err, err.stack); return; } var fileUrl = data.Location; console.log("File URL:", fileUrl); alert("File is uploaded successfully!"); });</pre>
</div>
To upload the file successfully, you need to enable CORS configuration on S3.
Please comment below if you have any question.

Uploading files on AWS S3 is very easy with AWS Javascript SDK. We're going to upload files to S3 in some simple steps...

AWS S3 file upload with progress bar using javascript sdk - TCMHACK

AWS S3 file upload with progress bar using javascript sdk

Generally, the&nbsp;jQuery toggle()&nbsp;method is used to show and hide the HTML element on the web page. But if you don&rsquo;t want to use the jQuery library, the toggle effect can be easily added using JavaScript. Using JavaScript you can check the visibility of an element and show/hide the HTML element based on their visibility. The following code snippet checks the visibility and toggle between show &amp; hide the HTML element with JavaScript.
<ul class="bullet_disk_list">
<li>Use JavaScript&nbsp;style display&nbsp;property to check whether an element is hidden.</li>
<li>If the element is invisible, display it, otherwise hide it.</li>
</ul>
<pre>var element = document.getElementById('elementID');
if(element.style.display === "none"){
 element.style.display = "block";
} else {
 element.style.display = "none";
}</pre>
The following code snippet shows how you can hide and show the HTML element using JavaScript. JavaScript The toggle() function toggle display of the HTML element using JavaScript.
<ul class="bullet_disk_list">
<li>Pass the element ID which you want to show/hide based on the visibility.</li>
</ul>
<pre>&lt;script&gt;
 function toggle(ID){
 var element = document.getElementById(ID);
 if(element.style.display === "none"){
 element.style.display = "block";
 }else{
 element.style.display = "none";
 }
 }
&lt;/script&gt;</pre>
HTML Call the&nbsp;<code>toggle('elementID')</code>&nbsp;on click event to show/hide the DIV element.
<pre>&lt;button onclick="toggle('divID')"&gt;Toggle Hide/Show&lt;/button&gt;

&lt;div id="divID"&gt;
 This is a DIV element.
&lt;/div&gt;</pre>

Generally, the jQuery toggle() method is used to show and hide the HTML element on the web page. But if you don’t want to use the jQuer...

How to Toggle (Show/Hide) Element using JavaScript - TCMHACK

How to Toggle (Show/Hide) Element using JavaScript

Before submitting the user&rsquo;s input to the server-side, it&rsquo;s always a good approach to validate it on the client-side script. The Name input is a commonly used field for the HTML form of the web application. When you want the full name input from the user, the input value must be checked whether the user provides a valid name (first name and last name). Using JavaScript, the full name validation can be easily implemented in the form to check whether the user provides their first name and last name. The REGEX (Regular Expression) is the easiest way to validate Full Name (first name + last name) format in JavaScript. In the following code snippet, we will show you how to validate the first and last name with Regular Expression using JavaScript.
<ul class="bullet_disk_list">
<li>test()&nbsp;&ndash; This function is used to perform a regular expression match in JavaScript.</li>
</ul>
<pre>var regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
var name = document.getElementById('nameInput').value;
if(!regName.test(name)){
 alert('Invalid name given.');
} else {
 alert('Valid name given.');
}</pre>
The following code snippet shows how you can validate the input field for the full name in HTML form using JavaScript.
<pre>&lt;p&gt;Full Name: &lt;input id="name" value=""&gt;&lt;/p&gt;
&lt;input type="button" onclick="validate();" value="Validate Name"&gt;</pre>
<pre>&lt;script&gt;
function validate(){
 var regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
 var name = document.getElementById('name').value;
 if(!regName.test(name)){
 alert('Please enter your full name (first &amp; last name).');
 document.getElementById('name').focus();
 return false;
 } else {
 alert('Valid name given.');
 return true;
 }
}
&lt;/script&gt;</pre>

Before submitting the user’s input to the server-side, it’s always a good approach to validate it on the client-side script. The Name input is a ...

How to Validate First and Last Name with Regular Expression using JavaScript - TCMHACK

How to Validate First and Last Name with Regular Expression using JavaScript

When you working with the image dimensions, it’s always recommended to get the real width and height of the image. The naturalWidth and naturalHeight property provide an easy way to retrieve the original dimensions of the image using JavaScript. You can easily get the original size (width and height) of the image using JavaScript.

naturalWidth
Assume that you have an image which is originally 250px wide and you make it 550px wide by CSS style or HTML “width” property. The naturalWidth will return the original width 250 although the display width is 550.

naturalHeight
Assume that you have an image which is originally 100px high and you make it 250px high by CSS style or HTML “height” property. The naturalHeight will return the original height 100 although the display height is 250.
<pre>&lt;img src="tcmhack.png" id="image" width="500px" /&gt;</pre>
<pre>// HTML DOM image
var image = document.getElementById('image');

// image original width
var originalWidth = image.naturalWidth;

// image original height
var originalHeight = image.naturalHeight;</pre>
Get Real Image Dimensions by Button Click
The following code snippet shows how you can get the original size (width and height) of the image using JavaScript.
<pre>&lt;img src="tcmhack.png" id="image" width="500px" /&gt;

&lt;button onclick="getOriginalSize()"&gt;Get Dimensions&lt;/button&gt;
</pre>
<pre>function getOriginalSize(){ 
 var image = document.getElementById('image');
 
 var originalWidth = image.naturalWidth; 
 var originalHeight = image.naturalHeight;
 
 alert("Original width=" + originalWidth + ", " + "Original height=" + originalHeight);
}</pre>

When you working with the image dimensions, it’s always recommended to get the real width and height of the image. The naturalWidth and naturalHe...

How to Get Image Original Dimensions (Width & Height) using JavaScript - TCMHACK

How to Get Image Original Dimensions (Width & Height) using JavaScript

The&nbsp;window.onload&nbsp;event is very useful when you want to call a JavaScript function on page load without using jQuery. Generally,&nbsp;$( document ).ready()&nbsp;is used to execute the JavaScript code after Document Object Model (DOM) is ready. You can use the&nbsp;window.onload&nbsp;to load a function after page load using JavaScript. In the example code snippet, we will show you how to call function and execute code on page load using JavaScript.

The following code calls a JavaScript function named&nbsp;<code>showDelay()</code>&nbsp;on page load using window.onload event.
<pre>function showDelay(){
 //code goes here
}

// call function on page load
window.onload = showDelay;</pre>
The following code calls a JavaScript function with parameter on page load using window.onload event.
<pre>function showDelay(type){
 //code goes here
}

// call function with parameter
window.onload = function () {
 showDelay(2);
};</pre>

The&nbsp;window.onload&nbsp;event is very useful when you want to call a JavaScript function on page load without using jQuery. Generally,&nbsp;$...

Top 5 Best Open Source JavaScript Chart Libraries

AWS S3 file upload with progress bar using javascript sdk

How to Toggle (Show/Hide) Element using JavaScript

How to Validate First and Last Name with Regular Expression using JavaScript

How to Get Image Original Dimensions (Width & Height) using JavaScript

How to Call a JavaScript Function on Page Load without using jQuery