Raphael with Webix Question

Webix JS
1

Hello, Please excuse the off topic question; I’m trying to implement a Raphael SVG map in a Webix view defined as below, and was hoping someone might be able to provide an example of how to correctly interact with the ‘chart’.
id:"rchartView", view:"raphael-chart", resize:true, data:rdata, ready:function(){....
It renders correctly on initialisation, but trying to interact with the chart using things like $$("rchartView").refresh() or present it with new data or getting it to load new data gives me an error like undefined is not a function (evaluating '$$("rchartView").refresh()').
Any pointers would be most welcome
Thanks -SrvrSide

2

Hello,

You need to use getChart() method to get chart instance:

var chart = $$("rchartView").getChart();
chart.refresh();
3

Thank you very much for the feedback Maria, unfortunately using this code produces the same error…TypeError: undefined is not a function (evaluating 'chart.refresh()')
I couldn’t find any reference to this method searching through the documents. I tried it on a standard webix chart defined as below, to see how it “should” react and got the same error. Both the webix chart and the Raphael map render correctly for what it’s worth.
id:"webixChartView", autoheight:true, view:"chart", type:"scatter", ......
Do you have any suggestions on what I’m doing wrong?
Thanks again -SrvrSide

4

The things are a bit different, namely:

  • getChart() method of a Webix raphael-chart returns raphael instance (returned by Raphael(node, width, height) function call) that does not feature any refresh API.
  • The Webix raphael integrated chart doesn’t not have refresh API either.

To load new data and refresh its contents you can use the following code:

Define the onAfterLoad event handler for the rchartView that will draw the chart after the data is loaded into it. The same function you probably have in the ready handler, but this one is called only once, during initial loading.

webix.ui({
   id:"rchartView",
   view:"raphael-chart",
   data:data,
   on:{
      onAfterLoad:function(){
         //draw the chart 
      }
   }
});

Then load or parse new data:

//clientside data
$$("rchartView").parse([clientside_dataset]);
//serverside data
$$("rchartView").load("path_to_data_script");
5

Hello Helga, Thank you for this insight. I think I’m on the right track, but if I may ask you a further question. When using the “ready:function(){…” approach I was able to render the SVG within the required Webix view by initialising the object with var r = this.raphael;. Moving to the suggested “onAfterLoad:function(){…” approach this is no longer ‘available’. Trying the var r = Raphael( this, this.$width, this.$height ); you eluded to does render the SVG but not within the view :slight_smile:
Do you know how the ‘node’ is referenced to render within the required view? My assumption of ‘this’ is clearly flawed.
My apologies for the rudimentary questions. Thanks again -SrvrSide

6

doing some tests would ‘this.$view’ be appropriate?
Unfortunately the this.$width / this.$height and this.$getSize do not seem to be initialised…

7

Thank you for the pointers Helga – I have things working as required
-SrvrSide

8

Hello Helga,
I’m hoping you might able to help me again. After migrating the framework to v4.2.4 the assistance and direction you offered above no longer functions. Where as before this code would correctly render the JSON data on the Raphael map…
$$("theView").parse(json);

I changed to the following in line which my understanding of the v4.2 migration docs but this not only doesn’t work but gives the error map.parse is not a function

var map = $$("theView").getChart(true);
map.parse(json);

Could you please point me in the right direction again? I couldn’t find much in the way of documentation on this.
Thanks again
-SrvrSide