I am building a AngularJS web app with modal windows. In the modal window, I like to show a JQuery Flot real time chart, similar to this: http://people.iola.dk/olau/flot/examples/realtime.html
I copied the code from http://people.iola.dk/olau/flot/examples/realtime.html and put it in a file, called flot2.html, on my server. It works.
However, when I put the code into my template (index.html) file, which has the code for the modal windows, the chart does not work. The text shows up, but not the moving line curve or grid.
Does anybody have any suggestions on how to make this work?
We've used flot with angular to create a very complex real-time analytics app. (starting with angular 0.9.19 and forward). What would help would be to provide your code. I agree with Roy, that the using modal with angular is not a problem. If you are wanting a realtime chart that changes as the angular scope data changes, you might want to use the angular rootScope to broadcast when the data changes and in the method that listens for that data change event. Then you would call the flot $.plot to update your plot.
Hope this helps.
--dan
My apologies. I found out that the reason why the chart wouldn't show up was because DIV ID was in a ng-repeat, which means that multiple DIVs were created with the same ID.
This brings me to my next question: "How to pass AngularJS variable to Javascript?" which is posted at How to pass AngularJS variable to Javascript?. I need to be able to do this in order to draw multiple charts in ng-repeat.