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

PODMAN

Spread the love 1.Introduction Podman: The Modern Container

Running Your Java Program (JAR) 24/7 on AWS EC2 Automatically

Spread the love Introduction Running a Java application

Building a REST API with Spring Boot

Spread the love Introduction REST (Representational State

Custom API to Fetch Customer Data by Customer ID in Spryker

Spread the love Introduction In this blog post, we will

Creating a Custom Module for a Custom Frontend Page in Spryker

Spread the love To create a custom module for a custom

How to create custom module api get category list without access token in Spryker

Spread the love To create a custom API for fetching a

Creating a Custom Glue API in Spryker

Spread the love Spryker’s Glue API is a powerful tool

Get AI Generated 360-Degree View of Account Summary in Dynamics 365 Sales

Spread the love Navigating the demanding landscape of sales

Enhancing Productivity with Dynamics 365: The Power of Session Restore

Spread the love Enhancing Productivity with Dynamics 365:

Salesforce Admin

Spread the love In our last blog, we discussed common

bluethinkinc Blogs