3

How to create a graph in my custom module in Magento 2 admin side.

2

you can add graph code into your module:

template code :

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

requirejs-config.js

  var config = {
   map: {
    '*': {
        highchart:           '<module_name>/js/highcharts.js',
        exporting:           '<module_name>/js/exporting.js',
        customjs:           '<module_name>/js/custom.js',
       }
   }
}

Your custom js:

$(function () {
Highcharts.chart('container', {
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
       }]
   });
});

(NOTE: You need to edit custom js data to set your module data)

For more information you can refer This and you can find other type of charts too.

  • Thanks alot..Instead of requirejs-config.js, I include in xml (<link src="<module_name>/js/jquery.min.js"/> <link src="<module_name>/js/highcharts.js"/> <link src="<module_name>/js/custom.js"/>). this works fine for me... – Rahul Dec 5 '16 at 7:11
  • Any Time Happy to help :) – Ronak Chauhan Dec 5 '16 at 8:14

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.