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

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

Unlocking AI with Spring Boot: Real-World Use Cases and Solutions

Spread the love Artificial Intelligence (AI) has moved from

Enhancing Performance with Reactive Java: A Beginner-Friendly Guide

Spread the love In today’s fast-paced software

Integrating Azure Function with Dynamics 365

Spread the love Signup on azure portal and make sure to

bluethinkinc Blogs