Skip to content

Replace Visualization

ytzlax edited this page Aug 20, 2017 · 6 revisions

This functionality create new visualization and replace it with other visualization. This functionality is like "add dashboard" beside one parameter,"prevoiusVisId", this parameter say to the plugin which visualization to replace;

use partial functionality

//Define visualization object

//Set visualiztion ID
let visPartial = {id: "bytes"};

//Set isFullState to false meaning: the programmer pass minimal defenetion attributes
visPartial["isFullState"] = false;

//Set the elasticsearch index where the data store
visPartial["visIndex"] = "logstash-*";

//Set minimal attributes of the visualization, in this example, create pie visualization on the field bytes
visPartial["visState"] = {visType: 'pie', field: 'bytes'};

//Replace visualization with id=memory with the new visualization 
visPartial["prevoiusVisId"] = "memory";

in javascript use:

var iWindow=iframe.contentWindow

in typescript use:

var iWindow = (<HTMLIFrameElement>iframe).contentWindow;
iWindow.postMessage({actionType: "setVisualization", visDefenetion: [visPartial]}, '*');

use full state functionality

 
let visDefenetion = {id: "tags"}
    visDefenetion["isFullState"] = true;

//Define full state visualization, set visState to well formed visualization state
    visDefenetion["visState"] = {
      "title": "tags",
      "type": "tagcloud",
      "params": {
        "scale": "linear",
        "orientation": "single",
        "minFontSize": 18,
        "maxFontSize": 72
      },
      "aggs": [
        {
          "id": "1",
          "enabled": true,
          "type": "count",
          "schema": "metric",
          "params": {}
        },
        {
          "id": "2",
          "enabled": true,
          "type": "terms",
          "schema": "segment",
          "params": {
            "field": "@tags.raw",
            "size": 5,
            "order": "desc",
            "orderBy": "1"
          }
        }
      ],
      "listeners": {}
    };
    visDefenetion["visIndex"] = "logstash-*";
    visDefenetion["prevoiusVisId"] = "number_of_cars";

in javascript use:

var iWindow=iframe.contentWindow

in typescript use:

var iWindow = (<HTMLIFrameElement>iframe).contentWindow;

iWindow.postMessage({actionType: "setVisualization", visDefenetion: [visDefenetion]}, '*');
Clone this wiki locally