Data Not Rendering From Custom Service

[kaizenlabs]

Hey Bud, great job on this package, really works great.

Having a bit of an issue I've been racking my brain trying to fix for the last three days. I built a custom service that my controller is assigning $scope variables from and then I'm trying to interpolate those $scope variables into the gauge charts at the "column-values" attribute.

When I try to do this without the custom service, the $scope variables interpolate just fine and the gauge shows the data from the $scope variables. When I use the custom service however, the gauge seems to be rendering before the data is returned from the service. When I look in the HTML, the data is there in the "column-values" attribute, but it seems the gauge itself already rendered from null values (thus displaying 0.0%) before the interpolated values were inserted.

Is there a way I can delay the chart from rendering until the data is returned? Either that or reload the chart after some setTimeout period? Really lost on this, checked everywhere on Github and StackOverflow.

[jettro]

Some running sample code of what you are doing would be handy. Can you put it somewhere?

[kaizenlabs]

Thanks for your help in advance, man.

https://github.com/JohnAntonusMaximus/app-issue

Basically I have a custom service in assets/js/app/service.js that is querying an API on the server to get records from a database. The service is then manipulating that data through a variety of functions before returning an object.

In controllers.js, I inject the custom service, call the only exposed function on it, and assign properties of the returned service object to the $scope variables, that are then being interpolated into the second, third and fourth gauges in the directive I created. (assets/js/app/directives/gauges.html)

So the weird thing is... the interpolated $scope variables are showing up in the HTML in the "column-values" attribute for each chart when the page has loaded, but the graph is not displaying the values, which is telling me that the graph is being generated before the custom service finishes manipulating returning and interpolating the data into the DOM.

So I either have to delay the rendering of the gauges until the custom service finishes and returns the data, or just reload the charts after a setTimeout which is less ideal, but would probably work as well.

And I don't know how to go about doing either of those solutions.

[kaizenlabs]

Just FYI, this code won't be a running code because the API that the custom service is calling is secured and requires some middleware for user authentication, but besides that, this is the exact setup.

[kaizenlabs]

SOLVED: I used a $scope variable as a flag to change to 'true' within of the controller once the data is returned, and then used an 'ng-if' on the directive to display when true. Works like a charm.

[dairdev]

I found a way to update the gauge chart without ng-if, also you can update the max value with a variable from the controller or component. I hope this can help someone else. angularjs-c3-gauge.tar.gz

[kzadorlr]

@dairdev thats exactly what i've been looking for, would you mind explain your code a little bit? Thanks in advance.

[dairdev]

@kzadorlr what i did, was to follow the example of dynamic gauge http://jettro.github.io/c3-angular-directive/examples/index.html#/gauge , and mix it with http://jettro.github.io/c3-angular-directive/examples/index.html#/callback Once i had the chart object, i was able to modify the info using the c3 functions, and using flush() method, the chart is updated in the browser. function updateGauge(){ vm.gauge.data = [{ 'Category': vm.gaugeValue }]; vm.gaugeChart.internal.config.gauge_max = vm.gaugeMax; vm.gaugeChart.flush(); }