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

Proxy Design Pattern and Requisition List in Magento 2

Spread the love Requisition List in Magento 2 Requisition

Google Ads Conversion Tracking Through Magento Platform:

Spread the love Google Ads Conversion Tracking Through

Object Pool Pattern in Magento2

Spread the love What is Object Pool Pattern in Magento 2 An

JENKINS

Spread the love JENKINS Introduction and Installation

Virtual Type and Type

Spread the love Virtual type is one of the most common

Customize the length of Input field

Spread the love Sometimes we need to change the limit the

How to Add Custom Tab on Admin Dashboard and Count Website Total Visitor in Magento 2?

Spread the love In this blog we’ll see How to Add Custom

How to Add Sign Out Tab in Customer Account in Magento 2?

Spread the love In this blog we’ll see How to Add

How to create custom tab in product detail page in magento 2?

Spread the love In this blog we’ll see how to add

Understanding and Implementing CORS & CSRF

Spread the love What is security? The world has become more

bluethinkinc Blogs