Clever Geek Handbook

How to disable the "Print Chart" button when there is no current chart

I have the following code

$.ajax({
        url: '@Url.Action("CollectionsBySuburb", "DashBoard")',
        data: { Period: 2015 },
        success: function (data) {
            var catArr = data.map(function (o) { return o.Category; });
            var paidArr = data.map(function (o) { return parseInt(o.TotalTax + o.TotalArrears + o.TotalDiscount); });
            var outArr = data.map(function (o) { return parseInt(o.TotalBillAmount - (o.TotalTax + o.TotalArrears + o.TotalDiscount)); });

            $('#CollectionsBySuburb').highcharts({
                chart: {
                    type: 'bar',
                    events: {
                        click: function () {
                            alert();
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                colors: ["#62BD00", "#FA1B02"],
                title: {
                    text: 'Amount  Collection By Suburb'
                },
                xAxis: {
                    categories: catArr
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Amount  ( '' )'
                    }
                },
                legend: {
                    reversed: true
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{point.color}">{series.name}</span>: GH₵ <b>{point.y}</b>'
                },
                series: [{
                    name: 'Paid',
                    data: paidArr
                }, {
                    name: 'Outstanding',
                    data: outArr
                }]
            });
        }
    });
 $.ajax({
 //Rendering other chart here
 });
 $.ajax({
 //Rendering other chart here
 });
 $.ajax({
 //Rendering other chart here
 });
 $.ajax({
 //Rendering other chart here
 });

So now my requirement is that I have multiple charts when I click the Print button. I want to check if the diagram is present, if any, then enable the options so that the user can load it, then hide the options to load. I tried different ways, but I cannot do it. Any help is appreciated.

enter image description here

+3


source to share


3 answers


You can catch legendItemClick and then iterate over all the series to check if they are all hidden. If yes, then you can hide the button with a function this.chart.exportSVGElements[0].hide();

.

events: {
                legendItemClick: function () {
                    var series = this.chart.series,
                        index = this.index,
                        allHidden = this.visible ? false : true;

                    $.each(series, function(i, serie){
                        if(serie.visible && i !== index)
                            allHidden = true;
                    });

                    if(!allHidden) {
                        this.chart.exportSVGElements[0].hide();
                    } else {
                        this.chart.exportSVGElements[0].show();
                    }

                }
            }


Example: http://jsfiddle.net/jL0u6o82/

+1


source


you can use exporting: { enabled: false }

in the highchart construct function.



http://api.highcharts.com/highcharts#exporting

+1


source


I do not fully understand your requirements, so I will demonstrate various methods.

  • Disable export button if no data is available:

    exporting: {
    enabled: data.length > 0 ? true : false
}

http://jsfiddle.net/v08j30n3/1/

  1. Remove specific buttons (pseudo-context here):

    function filterButtons(data) {

    //get default buttons
    var options = Highcharts.getOptions();
    var defaultButtons =   options.exporting.buttons.contextButton.menuItems;
    var wantedButtons = [];
    // add your condition here. I simply remove the printChart button.   
    for (var button in defaultButtons) {
        if(defaultButtons[button].textKey !== 'printChart') {
            wantedButtons.push(defaultButtons[button]);
        } else {
            if (data.length > 0) {
               wantedButtons.push(defaultButtons[button]);
            }
        }

    }
return wantedButtons;
}

And then at your high-latitude facility

exporting: {        
        buttons: {
            contextButton: {
                menuItems:   filterButtons(data)
             }
       }

See the code here: http://jsfiddle.net/v08j30n3/4/

+1


source






More articles:


All Articles