Create charts with chart.js

Abhijeet Pratap Singh. — Fri, 03 May 2024 01:21:50 +0000

Chart.JS is the best javascript based open source charting library you can use to draw a large variety of charts including simple line and bar to more complex mixed and bubble charts or radar charts. You do not need to be a master of js to use chart.js because the library is simple to use and provides extensive customizations to make beautiful charts with the help of plugins.

Plugins like datalabels, tooltip and title can help you customize and make your charts more attractive while also more informative. Customizations and animations can help you draw and configure perfect looking charts. For example, you want to draw a simple bar chart but want to assign a different color to each bar, you do not need to do much work but simply using the backgroundColors variable you can assign a unique color to each of the several bars in your chart.
Why use chart.js?

Chart.js is easy to learn.
Can be easily included in html.
It is easy to install - you can use npm or the cdn link to install it.
Creating and configuring charts is much easier with chart,js compared to the other libraries.
It is the most popular js based charting library based on number of Github stars and downloads.
Plugins allow you to extend chart functionality
There is enough documentation and community support available to guide you.
Chart types can be changed with simple changes.
It is easy to draw charts with chart.js even with very large datasets.
You can easily set bar thickness and height depending on the size of your dataset. Ok, So let's try creating a simple bar chart with the help of chart.js. Let's see how easy or difficult it is to draw charts using chart.js. There are three main parts to creating the chart. First, we install the library using the cdn link or npm. Second, we draw a canvas for our chart and third we include the script to create the chart. If you want to install it on your server, here is the command: npm install chart.js

If you want, you can add the script to install the chart to your website's html head (before /head) and you can start creating charts on your website.
Here is the script to install the latest version (4.4.1):
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js" integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Now, that we have installed the charting library, we will first need to draw the canvas for our chart, which can be included inside a div element:

<div> <canvas id="myChart"></canvas> </div>

Simple? The canvas is followed by the script to load the real chart. Check how the final script looks:

const ctx = document.getElementById('myChart');

new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});

The data is added inside the datasets and it is easy to change the bar type by setting the type. For example, if you want the above chart to render a line chart instead of a bar chart, just change the chart type to line:

type: 'line',
That's all. Now, you will have a line chart instead of a bar chart. You can customize the background colors according to your need. By default, the chart will apply five or six different colors to your bars in sequence. If you are just starting out with chart.js, you can try changing the values for data and labels and see how it outputs an awesome looking chart. There are a lot more configurations and customizations you can learn from the chartjs.org website. The above script is just a sample. You can add a lot more customizations to it including datalabels, custom tooltip and so on. You can aslo extend the dataset to include many more items and still the chart will render very fast and without any issues.

How to Analyze/Diagnose and Recover from a Website Traffic/Impressions Drop

Abhijeet Pratap Singh. — Mon, 08 Apr 2024 17:52:25 +0000

So, your website experienced a sudden decline in the number of impressions/clicks. You are worried about what to do and how to recover from the situation.

There are many factors that can affect the number of impressions per day and can cause a sudden decline. However, it is not impossible to recover from it.

First of all, check if Google made a recent core update. If there has been an update and your site has been hit, check Google’s new guidelines and adjust your content strategy accordingly.

Focus on creating original and high quality content that offers unique value to users. Google is /penalizing content that is of mediocre quality/spam. Such content can be deindexed without any warning.

Check if there has been a manual action. You can find it out from your Google search console account.

Compare the Google search console data with the data for previous year to look for a seasonal patterns.

Check if you made a recent update to your website. Suppose, you added a piece of code manually yo your website or just changed your theme or installed a new plugin. Sometimes plugin conflicts or theme conflict can also hurt impressions and traffic. Try reverting these changes and waiting a few days. You can also switch to a Wordpress core theme if you are using Wordpress.

Did you make any changes to your server configurations or robots.txt? Check if any update to your server configurations/robots.txt/.htaccess file is causing an issue. In several cases, it is some technical issue that causes a sudden drop in traffic and reverting those changes brings the traffic back. Check out your DNS settings also.

How old is your website? If it is a fairly new website that is just a few months old, you will need to wait since Google might take some time to analyze the website fully and include it in search results. In the meantime add more good quality content to your website and focus on improving your backlink profile to bring traffic to your website. Social media sharing can also help improve visibility.

Continue to watch for changes in the Google search console and make improvements according to suggestions provided by Google. Keep a watch on your backlink profile inside the search console and see if you recently lost any valuable backlinks. You can also use tools like Semrush and Ahrefs to analyze backlinks and website ranking changes.

Focus on E-E-A-T. Experience, Expertise, Authoritativeness and Trust. These are important factors that Google considers to rank websites. Include a about us page on your website and showcase your expertise.

Check if your website provides a good user experience. continuously audit your website and optimize it to provide an excellent user experience.

At last, rather than focusing on keyword optimization, try writing original content that provides real value to visitors.

Key Takeaways:

User experience is important and make sure that your website is fast and provides a good user experience.
Focus on quality and not quantity. The latest core update by Google (March 2024) penalizes websites that generate low quality content at scale using automation/AI tools, humans or a mix of the two. Low quality content can be deindexed by Google. Google has adopted a no spam policy which could lead to removal of around 40% such websites from searches.
Rather than spending time on keyword optimization and manipulating SEO for rankings, spend time creating high quality and original content.

How to Analyze and Regain Lost Traffic

DEV Community: Abhijeet Pratap Singh.

Create charts with chart.js

How to Analyze/Diagnose and Recover from a Website Traffic/Impressions Drop