Independent from jQuery

[chinmaymk]

Independent from jQuery

[chinmaymk]

That sounds quite good actually. Let me see if I can get jQuery out.

[dai-shi]

Thanks!

[dai-shi]

Just wanted to let you know that you can still use JQLite aka angular.element.

[chinmaymk]

Yup, the control of angular.element falls back to JQLite if jQuery is not present in the page.

[jcoffin]

Does this mean jQuery is no longer a requirement?

[chinmaymk]

I haven't pushed the relevant changes yet, will publish them next week; from next week angular-charts should be jQuery free. :)

[chinmaymk]

I have been trying to get this done, but as it seems, $compile method fails without jQuery. It's really weird behaviour. Trying to debug this issue.

[dai-shi]

Take it easy.

[dimirc]

@chinmaymk do you have any branch to try helping checking those problems? Btw are you keeping in mind that jqLite has a limited .find() method, I see that you use .find() in your code to select by classname and jqLite only allows by tag name

[afiedler]

Hey @chinmaymk, thanks for this library! A jQuery-free version would be great. I've just noticed that you have in bower.json the jQuery verison number as ~2.0.3. Lots of libraries still depend on jQuery 1.x.x series, so this makes a bower error. Since you're removing jQuery, you'll end up killing two birds with one stone!

[soyuka]

Where does it stands ? As I see in the code there is no really needs of jQuery instead of $compile.
Did you work on a different branch with no jQuery ? Could you push it to github so we can fork/help on it ?

Thanks.

[andreabenfatto]

Any news about a jQuery-free version?

[soyuka]

@andreabenfatto @afiedler @dai-shi @chinmaymk could you test my develop branch https://github.com/soyuka/angular-charts/tree/develop without jQuery and give me a feedback ?

[soyuka]

#44

[felipeleusin]

closed in pull request #44

[dai-shi]

Thanks, guys!

[askjervold]

Is this issue really fixed in release? If I don't include jQuery, I don't see any charts, and I get the error "Error: Please set height and width for the chart element". Same goes if I include jQuery after Angular. If I include jQuery before Angular, it draws the graphs, but I get some kind of infinite loop in my watchCollection because of some kind of change that is triggered continuously.

[soyuka]

Version used ?

[askjervold]

0.2.4, with Angular#1.2.9 and D3#3.3.13. angular-charts and D3 are those I got through regular bower install angular-charts

[chinmaymk]

angular-charts sets height from container height - declared in css. Hence the error "Error: Please set height and width for the chart element". Set height width using css and it should work.

#12

[soyuka]

#76 too ;)

@askjervold try to reproduce in a plunkr so that we could give it a try, thx!

[askjervold]

The height/width has been set in the css, and I can see the div expanding to that size, but no chart is drawn inside. I will try to reproduce in a plunkr, but I'm not familiar with the service, so I might not be able to

[askjervold]

I was unable to reproduce the problem in a plunkr, but we managed to find the cause for the error: the parent element is added to the DOM after angular-charts checks for height and width, causing it to not find a size of 0 during the link function. So the problem has nothing to do with this issue :) Why it worked when jQuery was included before Angular, I have no idea...

[soyuka]

That why we added $watch for it to work that way in #76.

Try commenting out the throw: https://github.com/chinmaymk/angular-charts/blob/bower/dist/angular-charts.js#L100 and see if it works.

[askjervold]

Unfortunately, that did not help. I got the d3 error below instead:

Error: Invalid negative value for attribute height="-26"

[soyuka]

It seems that the problem comes from your code, how the heck could you have a negative height?

[askjervold]

The height/width is set to 100 through the css, and the div does have that height and width on the resulting page. However, the clientHeight (and width) is currently 0 when the directive reaches the if-test. I think the negative value is just something weird with the svg or the d3 error itself (see #12 , which also has a negative value)

[soyuka]

I could really need a plunkr/jsfiddle there.

could you log the element[0] there https://github.com/chinmaymk/angular-charts/blob/bower/dist/angular-charts.js#L97 and paste the output here?

[askjervold]

This screenshot of my console shows that the height should be correctly set. I guess the d3 error could be preventing the directive from ever resolving the chart?

I apologize for not being able to supply a plunkr of the problem, but I don't know how I would add the box to the DOM at a later point there, without having to include the entire backend/handling of the boxes that will contain the charts.

Does the screenshot help clarify my issue?

[soyuka]

Almost,

Could you log:

console.dir(element[0]);

Uncomment the throw new Error.

It will output a JSON format element with all the required elements that you can copy/paste here (:.

[askjervold]

I've pasted the output on Pastebin. Here, with nothing expanded, and here showing a clientHeight/Width of 100 for the ownerElement of the attributes. Any other attributes you need expanded?

[soyuka]

clientHeight and clientWidth are set so I really don't know where this is coming from :/

Could you write me an email with an url to the web page? [email protected]

[askjervold]

I've sent you an e-mail now :) Thanks for trying to figure this out

[zevmo]

Any word on this? Getting a similar error (-24)