4

requirejs-config.js file path isCodility/Customers/view/frontend/requirejs-config.js` and code is

var config = {
    paths: {
        'customhighcharts': 'Codility_Dashboard/js/customhighcharts'
},
    shim: {
        'customhighcharts': {
            deps: ['jquery']
        }
}
};

my js file path is code/Codility/Customers/view/frontend/web/js/customhighcharts.js

customhighcharts file code taken from https://code.highcharts.com/highcharts.js link

My phtml file path is code/Codility/Customers/view/frontend/templates/Seller/navigation.phtml and code is

<script type="text/javascript">
    require([
        "jquery",
        "customhighcharts",
        "domReady!"
    ], function ($, customhighcharts) {
        customhighcharts.chart('container', {
            title: {
                text: 'Solar Employment Growth by Sector, 2010-2016'
            },
            subtitle: {
                text: 'Source: thesolarfoundation.com'
            },
            yAxis: {
                title: {
                    text: 'Number of Employees'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },

            series: [{
                name: 'Installation',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
            }, {
                name: 'Manufacturing',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
            }, {
                name: 'Sales & Distribution',
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
            }, {
                name: 'Project Development',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
            }, {
                name: 'Other',
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }

        });
    });
</script>

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Graph is not shown and Error in console is

TypeError: customhighcharts is undefined

  • Do you see the code from your requirejs-config.js in MagentoROOT/pub/static/frontend/Magento/luma/en_US/requirejs-config.js ? If not you can delete this file and reload your page. – Taschert Jul 3 at 9:49
  • Yes Exactly in MagentoROOT/pub/static/frontend/Magento/luma/en_US/requirejs-config.js ? file my customhighcharts is exist – HaFiz Umer Jul 3 at 9:53
  • I have no idea in that case – Taschert Jul 3 at 11:16
  • What if you use define in js ? magento.stackexchange.com/questions/166126/… – BartZalas Jul 3 at 11:33
  • i don't think i use <script>// <![CDATA[ require([ 'jquery', 'domReady!' ], function ($) { // Your Code }); // ]]> </script> then also use define in js – HaFiz Umer Jul 3 at 12:47
0

The above share code having js file path issue

requirejs-config.js file path is Codility/Customers/view/frontend/requirejs-config.js and code is

var config = {
    paths: {
            'customhighcharts': 'Codility_Dashboard/js/customhighcharts'
...

and js file path is code/Codility/Customers/view/frontend/web/js/customhighcharts.js

so in requirejs-config.js instead of Codility_Dashboard it should be Codility_Customers

var config = {
        paths: {
                'customhighcharts': 'Codility_Customers/js/customhighcharts'
    ...

Hope this given solution will solve your concerns.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.