From 5785c2db5679e1fed9a49b3c09e77fa6b6bd55ba Mon Sep 17 00:00:00 2001 From: "olau@iola.dk" Date: Thu, 20 Nov 2008 10:25:51 +0000 Subject: [PATCH] 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 | 13 +++++++------ FAQ.txt | 17 ++++++++++------- NEWS.txt | 3 +++ jquery.flot.js | 4 ++-- 4 files changed, 22 insertions(+), 15 deletions(-) diff --git a/API.txt b/API.txt index 3d9b7f5..2595bf2 100644 --- a/API.txt +++ b/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 diff --git a/FAQ.txt b/FAQ.txt index 84e510b..d2a78ed 100644 --- a/FAQ.txt +++ b/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. diff --git a/NEWS.txt b/NEWS.txt index 7b6c171..d904f5f 100644 --- a/NEWS.txt +++ b/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: diff --git a/jquery.flot.js b/jquery.flot.js index 60f95c0..542e48e 100644 --- a/jquery.flot.js +++ b/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 = '' + fragments.join("") + '
'; 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;