Bug in Angular Chart (DataLoader)

Webix JS
1

You might want to check this out…

HTML markup (pseudo code):
ng-repeat assumption in assumptions
div webix-ui view=“chart” webix-data=“assumption.chartdata” type=“bar” value="#value#" borderless=“true”>

where assumptions is provided by a service and put on the controller’s scope and chartdata is a JSON object.

This generates an error orginitating in the webix-data directive $watchCollection → webix.DataLoader → _onLoad → return this._onLoadError(text, xml, loader);
Uncaught TypeError: Cannot call method ‘indexOf’ of undefined webix_debug.js:2221
(anonymous function) webix_debug.js:2221
webix.EventSystem.callEvent webix_debug.js:516
webix.AtomDataLoader._onLoadError webix_debug.js:1844
webix.DataLoader.webix.proto._onLoad webix_debug.js:7562
webix.AtomDataLoader.parse webix_debug.js:1828
(anonymous function)

if now I put the chartdata in an array on the controller’s scope:
$scope.chartdata = [];
assumptions.each(function(a) {$scope.chartdata.push(a.chardata)})

and change the html markup to

div webix-ui view=“chart” webix-data=“chartdata[$index]” type=“bar” value="#value#" borderless=“true”>

It works fine.

Note, that in the service provider, I make sure to use a dummy chartdata object while building it and then cloned it to the object which was being watched…otherwise I would get $digest.error maximum iterations exceeded…

2

Problem confirmed, I will provide the fixed build later today.

In above case the inner-error occurs during data loading, and to make things worse debugging system throws one more error while attempting to log details of the first error.

3

Try to use the updated build - https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/QIN5WV55xRyFso9/webix.zip

Most probably it will work correctly in above case.

4

Thanks Maksim.

It fixed some of the problems.

I’m not able to get either of the following to work:
(in an ng-repeat loop=“assumption in assumptions”

div webix-ui=“mcChartConfig” webix-data=“assumption.formattedPdf” style=“width:250px; height:150px;”

where,

    $scope.mcChartConfig =  {
            isolate: true,
            view: "chart",
            type: "bar",
            borderless: true,
            value: "#value#",
            tooltip:{
                template:"#xlabel#" //tooltip
            }

    };

nothing shows

and with,

div webix-ui view=“chart” webix-data=“histograms[$index]” color="#color#"
type=“bar” value="#value#" borderless=“true” xAxis="{‘title’: ‘Value’, ‘template’: ‘#xlabel#’}">/div>

the graph displays, but without the xAxis (likewise, if I replace xAxis by tooltip…and no title )

if I replace webix-data=‘assumption.formattedPdf’ nothing is plotted. Note that
$scope.histograms[i] = $scope.assumptions[i].formattedPdf

Basically, at this point, I cannot decorate the chart.

5

Maksim,

I need to create stacked area charts in an ng-repeat loop. Putting all the info in the markup isn’t working, nor is the preferred method of initing from a config object:

   $scope.mcChartConfig =  {
        isolate: true,
        view:"chart",
        type:"stackedArea",
        alpha:0.7,
        xAxis:{
            template:"'#period#"
        },
        yAxis:{
        },
         eventRadius: 5,
        series:[
            {

                value:"#bottom#",
                color: "#58dccd",
                tooltip:{
                    template:"#bottom#"
                }
            },
            {

                value:"#median#",
                color:"#a7ee70",
                tooltip:{
                    template:"#median#"
                }
            },
            {

                value:"#top#",
                color:"#36abee",
                tooltip:{
                    template:"#top#"
                }
            }
        ]
    };

div webix-ui=“mcChartConfig” webix-data=“quartileCharts[$index]” >

I really would appreciate your help in getting this working!

Thanks,

Larry

6

Problem with ng-repeat fixed, now you can use it with webix-ui directive. Something like next will work

  <div webix-ui>
    <div ng-repeat="chart in charts" view="chart" type="stackedArea"
      alpha="0.7" eventRadius="5" webix-data="chart.data">
      <config name="xAxis" template="#year#"></config>
      <config name="yAxis"></config>
      <config stack='series'>
        <config ng-repeat="serie in chart.series"  value="#{{serie.template}}#" color="{{serie.color}}">
          <config name="tooltip" template="#{{serie.template}}#"></config>
        </config>
      </config>
    </div>
  </div>

Also, update adds config sub-tag, which can be used to define complex properties, and it can be used with ng-repeat as well. You can check working sample in samples/33_angular/07_ng_repeat.html

Package - https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/Uu0JDGcKKcc3J8D/webix.zip

7

The current usage of ng-repeat works as one-time binding. If you change values in charts or series collections - webix views will not be updated.

Unfortunately it seems that angularJS doesn’t provide any event when ng-repeat removes element from collection, so it is not possible to reconfigure widget automatically, each time when collection changes.

8

Maksim,

I’m not able to get the config tags to be taken into account…

To reconfigure the elements automatically, I had to resort to an “ugly hack” when I was using highcharts in a custom directive:

I added an attribute “chart-actions” to the directive, which is basically a collection of flags. I then set a $watch on it.

for example, in the controller, I defined

$scope.chartActionList = [{‘refresh’: false, ‘redraw’: false, ‘clearAll’: false}]

then somewhere in the controller,
$scope.chartData = some new data;
$scope.chartActionList[‘refresh’] = true;

this would trigger the $watch on chartActionList and from there the appropriate method got called and the flag reset.

So, perhaps one way to fix the problem is to put a $watch on the directive’s webix-data attribute

like I said, an ugly hack…

9

Please check
http://webix.com/snippet/96418011

Latest build https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/YBe6dbSdkr0LuPJ/webix_1.4.2.zip