Add Visualization

This functionality creates a new visualization and adds it to the dashboard

use partial functionality

example:

//Define visualization object

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

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

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

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

//Set the visualization position inside the dashboard, and the size  
visPartial1["visDashboardDefenetion"] = {
        col: 1,
        id: "bytes",
        panelIndex: 9,
        row: 1,
        size_x: 3,
        size_y: 3,
        type: "visualization"
      };

var iframe = document.getElementById('Iframe');

in javascript use:

var iWindow=iframe.contentWindow

in typescript use:

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

//Call the plugin, with the visualization object,this code will create new visualization
iWindow.postMessage({actionType: "setVisualization", visDefenetion: [visPartial1]}, '*');

As you can see, in this example we are using partial visState, so we need to set "isFullState" to false, then we pass three more fields:

id: the new visualization ID
visType: the new visualization type , "pie" or "histogram"
field : the elasticsearch field we need to create visualization on it.

that's all, know we have new visualization on our iframe embeded dashboard

If we want we can create more specific visualization, to do that we need to add property to our visState:

example:

var visPartial2 = {id: "myNewVis"}; 
visPartial2["isFullState"] = false;

//Set minimal attributes of the visualization, in this example, create pie visualization on the field bytes,with tool tip, with legend close....
visPartial2["visState"] = {visType: 'pie', field: bytes',size:20,addTooltip:true,addLegend:false,aggBucketType:'range',aggMetricType:'count'};

iWindow.postMessage({actionType: "setVisualization", visDefenetion: [visPartial1,visPartial2]}, '*');

look at Partial Properties, to get all properties you can use.

use full state functionality

example:

 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["visDashboardDefenetion"] = {
        col: 1,
        id: "tags",
        panelIndex: 3,
        row: 1,
        size_x: 3,
        size_y: 3,
        type: "visualization"
      };

 var iframe = document.getElementById('Iframe');

in javascript use:

var iWindow=iframe.contentWindow

in typescript use:

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

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