I want to show statistics graph in custom phtml.

My question is, how can I call my custom.phtml before order grid

1 Answer 1


Add new block in your custom module for your custom phtml

File path should be like: app\code\Vendor\Module\Block\Adminhtml\Yourblockname.php

namespace Vendor\Module\Block\Adminhtml;

class Yourblockname extends \Magento\Backend\Block\Widget\Container
     * @var string
    protected $_template = 'custom.phtml';

     * @param \Magento\Backend\Block\Widget\Context $context
     * @param array $data
    public function __construct(\Magento\Backend\Block\Widget\Context $context, array $data = [])
        parent::__construct($context, $data);

    // Add whatever functions you want to use in your phtml


Add your block in your module layout file in referenceContainer content section above where your grid block call in xml

Path of xml should be: app\code\Vendor\Module\view\adminhtml\layout\vendor_module_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="content">
            <block class="Vendor\Module\Block\Adminhtml\Yourblockname" name="vendor_module_yourblockname" template="Vendor_Module::custom.phtml" />

Your custom phtml path should be like this: app\code\Vendor\Module\view\adminhtml\templates\custom.phtml

   //do whatever html you want to add

For graph I would recommend Google charts, I share one of the example, you need to customize it up to your needs. Add this library and example in your phtml javascript code

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load("current", {packages:["corechart"]});
        function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ["City", "Amount", { role: "style" } ],
            ["abc", "123234", "somecolorcode" ],
var view = new google.visualization.DataView(data);
        view.setColumns([0, 1,
                        { calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation" },

        var options = {
            title: "Your title",
            width: 600,
            height: 400,
            bar: {groupWidth: "95%"},
            legend: { position: "none" },
        var chart = new google.visualization.ColumnChart(document.getElementById("amount_barchart_values"));
        chart.draw(view, options);

I hope this will help

  • Thanks for the answer. Though I solve this problem but forgot to answer my own question. You also gave the right approach in the answer. I hope it helps others as well. Jun 10, 2019 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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