plotly.js integration?

G40G40
edited March 30 in General

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

Many thanks.

Tagged:

Comments

  • edited April 1

    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);
    
  • @annazankevich thank you very much for the example. just what was needed to get started. much appreciated.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion