<div class="card">
    <div class="card-header">
        <h5>Advanced Analysis</h5>
    </div>
    <button type="button" class="btn btn-success btn-xs blockanchor" id="fetch" title="Filter"><i class="fa fa-filter"></i> Load Data</button>
    <div id="wdr-component"></div>
    <div id="highchartsContainer"></div>
</div>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="/flexmonster/flexmonster.js"></script>
<script>
    let licenseKeyCode = @json($licenseKey);
    $("#fetch").on('click', function(){
        var pivot = new Flexmonster({
            container: "wdr-component",
            toolbar: true,
            report: {
                dataSource: {
                    dataSourceType: "json",
                    filename: "<?php echo url('analysis/districtanaylsisdata'); ?>"
                },
                options: {
                    grid: {
                        type: "flat",
                        showHeaders: true,
                        showDefaultSlice: false,
                        showTotals: "off",
                        showGrandTotals: "off",
                        showHierarchies: false
                    }
                }
            },
            licenseKey: licenseKeyCode,
            componentFolder: "/flexmonster/",
            jsPivotCreationCompleteHandler: onComplete
        });
    });

    // initialize a blank pivot table
    var pivot = new Flexmonster({
        container: "wdr-component",
        toolbar: false,
        licenseKey: licenseKeyCode,
        componentFolder: "/flexmonster/"
    });

    function onComplete() {
        var item = $("<li class='fm-ui'></li>");
        item.append('<span class="fm-ui" id="#fm-text-display">Custom item</span>');
        item.click(function(e) {
            e.stopImmediatePropagation();
        });
        //  $("#fm-context-menu ul").append(item);
    }
</script>
