How to use chart js library in Magento 2

Blog
Spread the love

In Magento 2, you can add a chart to an admin grid to display graphical data representation using the Chart Js Library. Here’s a step-by-step guide on how to do this:

Step 1:

Certainly, if you have a custom module named Bluethink_AdvanceReports, you need to include a JavaScript library file named lib-chart.js under the path view/adminhtml/web/js/, you can follow these steps to properly include the JavaScript library in your module:

Step 2:

Create view/adminhtml/requirejs-config.js file:

Here, the requirejs-config.js file is used to specified alias name for lib-char.js library by using map configuration.

The file contains below content:

Step 3: Create a template file in the module

In this step, we will create a template file to call the chart component within the desired layout. Follow these instructions to create the template:

View/adminhtml/templates/graph/index.phtml

Inside the newly created index.phtml file, we’ll write the below code to include and configure the chart component:

Here we’ve added a component “component”: “Bluethink_AdvanceReports/js/chart”
to call chart js library, so need to create the required JavaScript and HTML template files at the specified locations, you can follow these steps:

  • View/adminhtml/web/js/chart.js

The above file contains below content:

  • View/adminhtml/web/template/chart.html

The above file contains below content:

Now we can call our chart template file in the desired layout by using below code:

extention_2023

To fetch dynamic data for your chart using AJAX, you can follow the instructions below:

Create an AJAX Controller:

First, you’ll need to create a controller in your module to handle AJAX requests. This controller will fetch the dynamic data and respond with it in a format that can be used by your chart component.

Place the controller in the appropriate location within your module, often under Controller/Adminhtml, and name it something like Orderdata.php. In this controller, you’ll need to create an action that handles the AJAX request and returns the dynamic data.

Here’s a controller action that returns JSON data:

Now add we need to call ajax in chart.js

Create a function in chart.js

Call the above function under the “initialize” like below screenshot:

extention_2023

Now do the needful to set the value of labels and data objects.

bluethinkinc_blog

bluethinkinc_blog

2023-09-27

0

Leave a Reply

Your email address will not be published. Required fields are marked *

Find More Blogs

Customize lead qualification for a seamless experience

Spread the love When the 2024 Release Wave 2 was launched,

Create a Custom Console Command in Spryker

Spread the love In Spryker, developers can create custom

SALESFORCE

Spread the love Salesforce is a cloud-based software

CRUD Operation in Spryker Backoffice with a Custom Module

Spread the love Spryker is a highly flexible and modular

How to create custom module on Spryker for Backoffice?

Spread the love Creating a custom module in Spryker

How to Install Spryker Project with Docker on Local Machine

Spread the love Spryker is a flexible and scalable commerce

How to Add a Custom Tab to the Customer Order Detail Page in Magento 2

Spread the love Adding a custom tab to the Order Detail

Exception Handling in Java

Spread the love Introduction – Exception:An unwanted

How to add custom less file in Magento2

Spread the love Source files *.css included into layout

Spring Boot Microservices

Spread the love Microservices architecture has become

bluethinkinc Blogs