DEV Community: gauharnawab

Getting Started with Chart.js – Make Beautiful Charts with Just a Few Lines of Code

gauharnawab — Tue, 03 Jun 2025 05:51:34 +0000

Hey there, aspiring developers! 👋

Ever looked at fancy websites with colorful charts and thought, "How do they do that?"
Well, today you're going to learn how to make your very own bar chart using a cool and beginner-friendly library called Chart.js!

What is Chart.js?

Chart.js is a simple JavaScript library that helps you create awesome and interactive charts (like bar charts, line charts, pie charts, and more!) using just a little bit of code.

It's super handy for:

Showing data in a visual way 📊
Making dashboards and reports prettier 🌈
Learning how JavaScript and data visualization work together 🤓

Step-by-Step: Let’s Build a Bar Chart

_1️⃣ Include Chart.js in Your HTML

You can add Chart.js to your project using a CDN (Content Delivery Network) — no need to download anything!_

Just add this line inside the

of your HTML:

<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

_2️⃣ Add a Element for the Chart
This is like a blank canvas where your chart will be painted! _

<body>
  <h2>My First Bar Chart</h2>
  <canvas id="myChart" width="400" height="200"></canvas>
</body>

3️⃣ Style It Using Basic CSS
Let’s add some simple styles to center the chart and make it look nice:

<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f9f9f9;
    padding: 20px;
  }

  canvas {
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
</style>

4️⃣ Add JavaScript to Create a Basic Bar Chart
Now comes the fun part — using JavaScript to make the chart appear!

<script>
  const ctx = document.getElementById('myChart').getContext('2d');

  const myChart = new Chart(ctx, {
    type: 'bar', // Type of chart
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // X-axis labels
      datasets: [{
        label: 'Votes',
        data: [12, 19, 3, 5, 2, 3], // Y-axis values
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)',
          'rgba(153, 102, 255, 0.6)',
          'rgba(255, 159, 64, 0.6)'
        ],
        borderColor: 'rgba(0, 0, 0, 0.1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true // Start Y-axis from 0
        }
      }
    }
  });
</script>

_Tips for Beginners:
_

Don’t be afraid to experiment! Try changing the colors or the data values.
If something breaks, check your browser console (right-click > Inspect > Console tab).
Want to try other charts? Just change type: 'bar' to 'line', 'pie', or 'doughnut'!

MULTITHREADING IN JAVA

gauharnawab — Mon, 06 May 2024 04:11:14 +0000

Multithreading in Java for Beginners

In Java multithreading is a process of executing multiple threads simultaneously.

Before we understand what is Thread in Java we must know about process, kernel, and context switching.

Process:

A process is a sequence of execution of a program or we can say that it is an abstraction of hardware and kernel.

Kernel:

A kernel is an interface or fundamental component of the operating system that acts between software applications and the computer hardware.

Context Switching: In an operating system, context switching is the process between user mode to kernel mode to execute the system call.

What is Thread in Java?

we know already that thread is a lightweight process, but it is a sub-task of a process that shares the same address space as that process.

In Java we can achieve Multithreading in 3 ways:

Thread Class:

Runnable Interface:

-> In Java runnable interface is used to define the task that can
be run as a thread. It has only one method void run() that can
be called when the thread is started.
-> It is a functional interface.

-> Functional Interface:
A functional Interface in Java is an interface that contains
only one abstract method.

Lambda Expression:
A lambda expression is a short block of code that takes in parameters and returns a value. Lambda expressions are similar to methods, but they do not need a name and they can be implemented
right in the body of a method

Priority Queue

gauharnawab — Tue, 23 Apr 2024 05:47:19 +0000

Priority Queue

Priority Queue provides the functionality of Heap Data Structure.

→ Before we understand priority queue we must know what is Heap Data Structure:-

HEAP DATA STRUCTURE

→ Heap is a special type of data structure where the root node and
parent node is compared with its left and right children and
arranged according to the children.

TYPES OF HEAPS

-> There are two main types of Heaps:-

Min Heap

→ In a min-heap, the parent nodes are smaller than or equal to
their children. So, the smallest element (5) is at the root,
and each parent node is smaller than its children.

→ Example using diagram:-
```
        5
      /   \\
     9     11
   /  \\   /  \\
 14   18  19  21
/  \\
33  17
```
Max Heap

-> In max-heap, the parent nodes are larger than or equal to
their children, So, the largest element (21) is at the root,
and each parent node is larger than its children.

-> Example using a diagram:-
```
        21
      /    \\
    19      18
   /  \\    /  \\
 17   11  14   5
/  \\
9   3
```

APPLICATION OF HEAP DATA STRUCTURE

Priority Queue
Graph Algorithms
Operating System

QUEUE

when we talk about queues, we often think of a "first-in, first-out" (FIFO) structure, where elements are processed in the order they were added. But what if we need to process elements based on their priority rather than their arrival time? That's where Priority Queues come into play.

Queue Interface Declaration

public interface Queue extends Collection

PRIORITY QUEUE

→ A Priority Queue is an abstract data type that stores a
collection of elements along with their associated
priorities. Unlike normal Queues, Priority Queue elements
are retrieved in ascending order.

→ Suppose, we want to retrieve the elements in the ascending
order. In this case, the head of the priority queue will be
the smallest element. Once the element is retrieved, the
next smallest element is the head of the queue.

→ For Example using code:-

    import java.util.*;
    public class PriorityQueueDemo{
            public static void main(String[] args){
            PriorityQueue<Integer> pq = new PriorityQueue<>();
            pq.add(4);
            pq.add(3);
            pq.add(2);
            pq.add(1);
            pq.add(5);
            pq.add(9);

    System.out.println("The Element of the Priority Queue is : " + pq);
    //System.out.println("head of the  Queue is : " + pq.peek());
    //System.out.println("Priority Queue Content is : " + pq);
    //System.out.println("head removed : " + pq.poll());
    //System.out.println("Priority Queue content is : " + pq);
    ```



            }
    }

    OUTPUT:-The Element of the Priority Queue is : [1, 2, 3, 4, 5, 9]

    Internally, it follows a min heap and can be visualized as a tree.

    →



    ```
            1
          /   \\
         2     3
       /  \\   /
      4    5  9

    min-heap
    ```




### Methods of Java Queue Interface

| Method | Description |
| --- | --- |
| boolean add(object) | It is used to insert the specified element into this queue and return true upon success. |
| boolean offer(object) | It is used to insert the specified element into this queue. |
| Object remove() | It is used to retrieve and remove the head of this queue. |
| Object poll() | It is used to retrieve and remove the head of this queue or returns null if this queue is empty. |
| Object element() | It is used to retrieve, but does not remove, the head of this queue. |
| Object peek() | It is used to retrieve, but does not remove, the head of this queue, or return null if this queue is empty. |

Earth Day CSS ART

gauharnawab — Sun, 21 Apr 2024 16:53:01 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

I chose to create CSS Art inspired by Earth Day. The goal was to convey the beauty and importance of our planet and encourage environmental awareness through creative design.

Demo

Unfortunately, I cannot directly embed an editor into this post. However, you can view the live demo on Netlify.
Project Demo

Journey

Creating this CSS Art for Earth Day was an exciting and challenging experience. I started by sketching out ideas and concepts that represent Earth Day, including elements like the Earth, trees, and recycling symbols.

Throughout the process, I experimented with various CSS techniques to bring these concepts to life. I utilized CSS gradients, shapes, animations, and transitions to create a visually appealing and interactive design.

One aspect I'm particularly proud of is the animation of the Earth spinning, symbolizing the continuous cycle of life on our planet. It was challenging to achieve the smooth rotation effect using CSS animations, but the end result was worth the effort.

LICENSE

MIT License

Deliciously Designed CSS Artistry at Its Finest

gauharnawab — Thu, 21 Mar 2024 05:35:02 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

Crafting a Delectable CSS Pizza: A Tasty Visual Treat 🍕

Crafted a delicious CSS pizza with lifelike toppings like pepperoni and paneer. Demonstrates CSS artistry and creativity, showcasing the versatility of CSS in visual content creation.``

Demo Link

Project Link

Project Image

Journey

I had fun making tasty CSS pizza art, and learning design tricks along the way. Proud of my lifelike pizza Next, I'm excited to learn ReactJS deployment.

Dropdown Menu

gauharnawab — Sat, 09 Mar 2024 05:01:33 +0000

Replit

Hey everyone! I just created a cool dropdown menu using HTML, Bootstrap, and some custom CSS, and I wanted to share it with you.

Description:
I have designed a responsive drop-down menu that is perfect for website navigation. It is sleek, user-friendly, and adaptable to any device.

Technology Used:
I utilized HTML for the structure, Bootstrap for the base styling and responsiveness, and added some custom CSS to tweak the design to my liking.

I am providing you with a
link to the above on the header check and comment.