is it possible to toggle a visualization on off ?

[asaforon123]

i would like to make a button than makes certain visualizations disappear in a dashboard and reappear when clicked again. is this possible with the api plugin ?

[ytzlax]

Hi GlassRod, yes you can, Assuming you already create "memory" visualization(or any other visualization) by kibana API plugin or by kibana page administrator(localhost:5601), look at the next function:

//This function show and hide "memory" visualization 
private toggle() {   
    let visPartial = {"visIndex": "logstash-*"};
    if (!this.showVis) {
      visPartial["prevoiusVisId"] = "memory";
    }
    else {
      visPartial["visDashboardDefenetion"] = {
        col: 1,
        id: "memory",
        panelIndex: 9,
        row: 1,
        size_x: 3,
        size_y: 3,
        type: "visualization"
      };
    }

    this.showVis = !this.showVis;

    this.callPlugin({actionType: "setVisualization", visDefenetion: [visPartial]});
}

If you need more explanation please let me know

[asaforon123]

Worked like a charm, thanks !!!

[ytzlax]

:+1:

[rhautefeuille]

I am trying to remove a visualization from my dashboard with no luck:

function MyController($scope) {
    $scope.create = function(){        
        var iframe = document.getElementById('kibanaDashboard');
        var iWindow = iframe.contentWindow;
        iWindow.postMessage({actionType: "setVisualization", visDefenetion: [createVisualization("foobar", "dao/implementation", 1, 3)]}, '*');
    }

    $scope.remove = function(){
        let visPartial = {};    
        visPartial["prevoiusVisId"] = "foobar";
        var iframe = document.getElementById('kibanaDashboard');
        var iWindow = iframe.contentWindow;
        iWindow.postMessage({actionType: "setVisualization", visDefenetion: [visPartial]}, '*');
    }
}

function createVisualization(visId, field, col, panelIndex) {
    let visPartial = { id: visId };
    visPartial["isFullState"] = false;
    visPartial["visIndex"] = "myindex-*";
    visPartial["visState"] = { visType: 'pie', field: field, size: 100 };
    visPartial["visDashboardDefenetion"] = {
            col: col,
            id: visId,
            panelIndex: panelIndex,
            row: 1,
            size_x: 3,
            size_y: 3,
            type: "visualization"
        };
    return visPartial;
}

the visualization is properly shown when clicking create button, but I can't make it disapear. any idea?

[ytzlax]

What is your kibana and elasticsearch version and kibana API version?

[rhautefeuille]

I am using 6.0.0 for all three of them.

[ytzlax]

Hi @rhautefeuille , I updated the example I gave to GlassRod, because the example is for kibana 5.x and not for 6.x , in kibana 6 you need to send also the visIndex, in your example its need to look like :

$scope.remove = function(){
        let visPartial = {"visIndex": "myindex-*"}  
        visPartial["prevoiusVisId"] = "foobar";
        var iframe = document.getElementById('kibanaDashboard');
        var iWindow = iframe.contentWindow;
        iWindow.postMessage({actionType: "setVisualization", visDefenetion: [visPartial]}, '*');
    }

let me know if its work

[rhautefeuille]

yes I confirm that this workaround is working! thank you very much :)

[ytzlax]

Hi @rhautefeuille if you like this plugin please give a star. Thanks

[rhautefeuille]

sure!