Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Add ChartJs in custom module

SOLVED
Go to solution
‎09-05-2019 06:32 AM
‎09-05-2019 06:32 AM

Add ChartJs in custom module

Hi,

I'm beginner and I want to add Chartjs in one of my admin page!

I succeed to modify js with this code:

 

In view/adminhtml/web/css/custom_test.js 

require([
"jquery"
], function($){
	$(document).ready(function() {
    	  alert("Hi, I am from custom_test.js");
	});
});

In view/adminhtml/layout/exampleadminnewpage_alerte_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <script src="MyCompany_ExampleAdminNewPage::js/custom_test.js"/>
    </head>
    <body>
      <referenceContainer name="content">
            <block class="Magento\Backend\Block\Template" template="MyCompany_ExampleAdminNewPage::alerte.phtml"/>
        </referenceContainer>
    </body>
</page>

I don't know how include a library in magento2, when I read documentation or post in forums, I don't really know where called the library. I think I have to edit requirejs-config.js but what?

 

Thanks

0 Kudos
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
‎09-05-2019 09:02 AM
‎09-05-2019 09:02 AM

Re: Add ChartJs in custom module

I hope you are asking, How to load custom Js via requirejs?

 

Suppose if you keep your chart.js in app/code/Vendor/Module/view/adminhtml/web/js/chart.js

 

You can easily load the chart.js in phtml using requirejs like below without any changes in the require-config.js.

 

    <script type="text/javascript">
        requirejs(['Vendor_Module/js/chart'], function(chart){
              // here your logic
        });
    </script>

 

OPTIONAL: Need to add path alias in require-config.js when you want a short name for your js model (Vendor_Module/js/chart).

View solution in original post

Reply
2 REPLIES 2
‎09-05-2019 09:02 AM
‎09-05-2019 09:02 AM

Re: Add ChartJs in custom module

I hope you are asking, How to load custom Js via requirejs?

 

Suppose if you keep your chart.js in app/code/Vendor/Module/view/adminhtml/web/js/chart.js

 

You can easily load the chart.js in phtml using requirejs like below without any changes in the require-config.js.

 

    <script type="text/javascript">
        requirejs(['Vendor_Module/js/chart'], function(chart){
              // here your logic
        });
    </script>

 

OPTIONAL: Need to add path alias in require-config.js when you want a short name for your js model (Vendor_Module/js/chart).

Reply
‎09-11-2019 09:41 PM
‎09-11-2019 09:41 PM

Re: Add ChartJs in custom module

Hello,

 

You can refer the steps at https://meetanshi.com/blog/add-custom-js-file-in-magento-2-admin-panel/

 

Thanks.

---
If you've found my answer useful, please give"Kudos" and "Accept as Solution"
0 Kudos
Reply