Switch to using canvas text to draw the axis labels, fix a problem with axis box calculations

API.txt

@@ -178,6 +178,7 @@ Customizing the axes
 
     color: null or color spec
     tickColor: null or color spec
+    font: null or font spec object
 
     min: null or number
     max: null or number
@@ -222,6 +223,20 @@ you can also set the color of the ticks separately with "tickColor"
 (otherwise it's autogenerated as the base color with some
 transparency).
 
+You can customize the font used to draw the labels with CSS or
+directly with "font". The default value of null means that the font is
+read from the font style on the placeholder element (80% the size of
+that to be precise). If you set it directly with "font: { ... }", the
+format is like this:
+
+   {
+     size: 11,
+     style: "italic",
+     weight: "bold",
+     family: "sans-serif",
+     variant: "small-caps"
+   }
+
 The options "min"/"max" are the precise minimum/maximum value on the
 scale. If you don't specify either of them, a value will automatically
 be chosen based on the minimum/maximum data values. Note that Flot
@@ -677,8 +692,7 @@ above the data or below (below is default).
 
 "labelMargin" is the space in pixels between tick labels and axis
 line, and "axisMargin" is the space in pixels between axes when there
-are two next to each other. Note that you can style the tick labels
-with CSS, e.g. to change the color. They have class "tickLabel".
+are two next to each other.
 
 "borderWidth" is the width of the border around the plot. Set it to 0
 to disable the border. You can also set "borderColor" if you want the

FAQ.txt

@@ -6,7 +6,8 @@ Q: How much data can Flot cope with?
 A: Flot will happily draw everything you send to it so the answer
 depends on the browser. The excanvas emulation used for IE (built with
 VML) makes IE by far the slowest browser so be sure to test with that
-if IE users are in your target group.
+if IE users are in your target group (for large plots in IE, you can
+also check out Flashcanvas which may be faster).
 
 1000 points is not a problem, but as soon as you start having more
 points than the pixel width, you should probably start thinking about
@@ -25,10 +26,11 @@ conversion automatically.
 
 Q: Can I export the graph?
 
-A: This is a limitation of the canvas technology. There's a hook in
-the canvas object for getting an image out, but you won't get the tick
-labels. And it's not likely to be supported by IE. At this point, your
-best bet is probably taking a screenshot, e.g. with PrtScn.
+A: You can grab the image rendered by the canvas element used by Flot
+as a PNG or JPEG (remember to set a background). Note that it won't
+include anything not drawn in the canvas (such as the legend). And it
+doesn't work with excanvas which uses VML, but you could try
+Flashcanvas.
 
 
 Q: The bars are all tiny in time mode?
@@ -56,11 +58,9 @@ libraries") for details.
 
 Q: Flot doesn't work with [insert name of Javascript UI framework]!
 
-A: The only non-standard thing used by Flot is the canvas tag;
-otherwise it is simply a series of absolute positioned divs within the
-placeholder tag you put in. If this is not working, it's probably
-because the framework you're using is doing something weird with the
-DOM, or you're using it the wrong way.
+A: Flot is using standard HTML to make charts. If this is not working,
+it's probably because the framework you're using is doing something
+weird with the DOM or with the CSS that is interfering with Flot.
 
 A common problem is that there's display:none on a container until the
 user does something. Many tab widgets work this way, and there's

NEWS.txt

 Flot x.x
 --------
 
+API changes:
+
+Axis labels are now drawn with canvas text with some parsing to
+support newlines. This solves various issues but also means that they
+no longer support HTML markup, can be accessed as DOM elements or
+styled directly with CSS. Some older browsers lack this function of
+the canvas API (this doesn't affect IE); if this is a problem, either
+continue using an older version of Flot or try an emulation helper
+such as canvas-text or Flashcanvas.
+
+
+
+Changes:
+
+- Canvas text support for labels (sponsored by YCharts.com).
 
 Bug fixes
 
 - Fix problem with null values and pie plugin (patch by gcruxifix,
   issue 500).
-- Fix problem with threshold plugin and bars (based on patch by kaarlenkaski)
+- Fix problem with threshold plugin and bars (based on patch by
+  kaarlenkaski, issue 348).
+- Fix axis box calculations so the boxes include the outermost part of
+  the labels too.
   
 
 Flot 0.7

examples/interacting-axes.html

@@ -32,10 +32,10 @@ $(function () {
     }
 
     var data = [
-        { data: generate(0, 10, function (x) { return Math.sqrt(x)}), xaxis: 1, yaxis:1 },
-        { data: generate(0, 10, function (x) { return Math.sin(x)}), xaxis: 1, yaxis:2 },
-        { data: generate(0, 10, function (x) { return Math.cos(x)}), xaxis: 1, yaxis:3 },
-        { data: generate(2, 10, function (x) { return Math.tan(x)}), xaxis: 2, yaxis: 4 }
+        { data: generate(0, 10, function (x) { return Math.sqrt(x);}), xaxis: 1, yaxis:1 },
+        { data: generate(0, 10, function (x) { return Math.sin(x);}), xaxis: 1, yaxis:2 },
+        { data: generate(0, 10, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:3 },
+        { data: generate(2, 10, function (x) { return Math.tan(x);}), xaxis: 2, yaxis: 4 }
     ];
 
     var plot = $.plot($("#placeholder"),
@@ -54,29 +54,11 @@ $(function () {
                       });
 
     // now for each axis, create a div
-
-    function getBoundingBoxForAxis(plot, axis) {
-        var left = axis.box.left, top = axis.box.top,
-            right = left + axis.box.width, bottom = top + axis.box.height;
-
-        // some ticks may stick out, enlarge the box to encompass all ticks
-        var cls = axis.direction + axis.n + 'Axis';
-        plot.getPlaceholder().find('.' + cls + ' .tickLabel').each(function () {
-            var pos = $(this).position();
-            left = Math.min(pos.left, left);
-            top = Math.min(pos.top, top);
-            right = Math.max(Math.round(pos.left) + $(this).outerWidth(), right);
-            bottom = Math.max(Math.round(pos.top) + $(this).outerHeight(), bottom);
-        });
-        
-        return { left: left, top: top, width: right - left, height: bottom - top };
-    }
-    
     $.each(plot.getAxes(), function (i, axis) {
         if (!axis.show)
             return;
         
-        var box = getBoundingBoxForAxis(plot, axis);
+        var box = axis.box;
         
         $('<div class="axisTarget" style="position:absolute;left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width +  'px;height:' + box.height + 'px"></div>')
             .data('axis.direction', axis.direction)