Call $() on passed in elements to support DOM elements/CSS expressions too

git-svn-id: https://flot.googlecode.com/svn/trunk@112 1e0a6537-2640-0410-bfb7-f154510ff394

API.txt

@@ -5,11 +5,12 @@ Consider a call to the plot function:
 
    var plot = $.plot(placeholder, data, options)
 
-The placeholder is a jQuery object that the plot will be put into.
-This placeholder needs to have its width and height set as explained
-in the README (go read that now if you haven't, it's short). The plot
-will modify some properties of the placeholder so it's recommended you
-simply pass in a div that you don't use for anything else.
+The placeholder is a jQuery object or DOM element or jQuery expression
+that the plot will be put into. This placeholder needs to have its
+width and height set as explained in the README (go read that now if
+you haven't, it's short). The plot will modify some properties of the
+placeholder so it's recommended you simply pass in a div that you
+don't use for anything else.
 
 The format of the data is documented below, as is the available
 options. The "plot" object returned has some methods you can call.
@@ -131,7 +132,7 @@ Customizing the legend
     margin: number of pixels
     backgroundColor: null or color
     backgroundOpacity: number in 0.0 - 1.0
-    container: null or jQuery object
+    container: null or jQuery object/DOM element/jQuery expression
   }
 
 The legend is generated as a table with the data series labels and

FAQ.txt

@@ -13,21 +13,24 @@ Q: The bars are all tiny in time mode?
 
 A: It's not really possible to determine the bar width
 automatically. So you have to set the width with the barWidth option
-which it is NOT in pixels, but in the units of the x axis. For time
+which is NOT in pixels, but in the units of the x axis. For time
 mode that's milliseconds so the default value of 1 makes the bars 1
 millisecond wide.
 
 
 Q: Can I use Flot with libraries like Mootools or Prototype?
 
-A: Yes, and it's easy! In the API documentation and examples you
-simply replace $ with jQuery. Depending on how you include jQuery, you
-may have to do one more thing to prevent it from overwriting functions
-from the other libraries, see the documentation in jQuery ("Using
-jQuery with other libraries") for details.
+A: Yes, and it's easy! Call jQuery.plot instead of $.plot and put in
+DOM elements where the examples and the API documentation are using
+jQuery objects.
 
+Depending on how you include jQuery, you may have to do one more thing
+to prevent it from overwriting functions from the other libraries, see
+the documentation in jQuery ("Using jQuery with other libraries") for
+details.
 
-Q: Flot doesn't work with [framework xyz]!
+
+Q: Flot doesn't work with [widget or server-side framework xyz]!
 
 A: The problem is most likely within the framework, or your use of the
 framework.

NEWS.txt

@@ -9,6 +9,9 @@ New features:
 - Added support for having the autoscale algorithm skip points outside
   an axis range (autoscaleSkipPointsOutside on an axis).
 
+- Flot now calls $() on the placeholder and optional legend container
+  passed in so you can specify DOM elements or CSS expressions to make
+  it easier to use Flot with libraries like Prototype or Mootools.
 
 Bug fixes:
 

jquery.flot.js

@@ -100,7 +100,7 @@
         overlay = null,     // canvas for interactive stuff on top of plot
         eventHolder = null, // jQuery object that events should be bound to
         ctx = null, octx = null,
-        target = target_,
+        target = $(target_),
         axes = { xaxis: {}, yaxis: {}, x2axis: {}, y2axis: {} },
         plotOffset = { left: 0, right: 0, top: 0, bottom: 0},
         canvasWidth = 0, canvasHeight = 0,
@@ -1534,7 +1534,7 @@
 
             var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>';
             if (options.legend.container != null)
-                options.legend.container.html(table);
+                $(options.legend.container).html(table);
             else {
                 var pos = "";
                 var p = options.legend.position, m = options.legend.margin;