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

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

Implementation of WireMock for better testing

Spread the love WireMock is a flexible and powerful tool

Magento 2: How to selected default option in configurable options?

Spread the love Configurable products in Magento 2 allow

How To Implement Simple JWT Authentication in Django Rest Framework

Spread the love We’ll learn how to use simple JWT

Optimizing Search: Integrating Elasticsearch in Django Applications

Spread the love What is Elasticsearch? Elasticsearch is a

How to create Customer Segments

Spread the love In Magento 2, “customer

Proxy Design Pattern and Requisition List in Magento 2

Spread the love Requisition List in Magento 2 Requisition

bluethinkinc Blogs