plotly.js integration?

Site and Services
#1

Has anyone done this? Are there any examples to share?

Many thanks.

#2

Hello @G40,
A custom Webix widget (usually based on primary ui.view) can serve as a container for a third-party widget (in other words, for any html content)
Please take a look at the basic example with Plotly.js:
https://snippet.webix.com/mes9i08n
The webix.protoUI which results in a Webix custom component is quite simple here. It features just:

  • rendering,
  • passing Plotly.js config from configuration of Webix view
  • resizing
  • ability to get the nested instance of Plotlyjs chart to use its API
 // custom Webix-Plotly view
  webix.protoUI({
    name:"plotlyChart",
    $init:function(config){
      this.$view.innerHTML = "<div style='width:100%; height:100%;'></div>";
      // make sure the parent view is ready
      this.$ready.push(()=>{
        this._initChart(config);
      })
    }, 
    $setSize:function(x,y){  
      if (webix.ui.view.prototype.$setSize.call(this,x,y))
        Plotly.Plots.resize(this.$view.firstChild);    
    },
    // a custom 'private' method
    _initChart:function(config){
      var chart = config.chartConfig;  
      this._plChartPromise = new Plotly.newPlot(this.$view.firstChild, chart);
      // this promise can be returned with getChart method
      this._plChartPromise.then((plChartNode) => {
        console.log(plChartNode.layout);
        console.log(plChartNode.data);
      });
    },
  }, webix.ui.view);
#3

@annazankevich thank you very much for the example. just what was needed to get started. much appreciated.