Allow adding a title to a graph. This sort of goes with the axis labe…

…l stuff that's still in the works.
leto · Aug 4, 2008 · 7ecd23c · 7ecd23c
1 parent 154c85c
commit 7ecd23c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/examples/setting-options.html b/examples/setting-options.html
@@ -58,7 +58,9 @@ <h1>Flot Examples</h1>
                          color: "#BBB",
                          axis:  'x' } ],
             backgroundColor: "#fffaff"
-        }
+        },
+        title: "Graph Settings Demo",
+        titleColor: "purple"
     });
 });
 </script>

diff --git a/jquery.flot.js b/jquery.flot.js
@@ -112,6 +112,9 @@
                 mode: null, // one of null, "x", "y" or "xy"
                 color: "#e8cfac"
             },
+            title: null,
+            titleFontSize: 20,
+            titleColor: 'black',
             shadowSize: 4,
             sortData: true
         };
@@ -130,7 +133,8 @@
             workarounds = {},
             // buffer constants
             RIGHT_SIDE_BUFFER = 10,
-            BOTTOM_SIDE_BUFFER = 10;
+            BOTTOM_SIDE_BUFFER = 10,
+            TOP_SIDE_BUFFER = 20;
 
         this.setData = setData;
         this.setupGrid = setupGrid;
@@ -795,6 +799,10 @@
 
             plotWidth = canvasWidth - plotOffset.left - plotOffset.right - RIGHT_SIDE_BUFFER;
 
+            if (options.title) {
+                plotOffset.top += TOP_SIDE_BUFFER;
+            }
+
             // set width for labels; to avoid measuring the widths of
             // the labels, we construct fixed-size boxes and put the
             // labels inside them, the fixed-size boxes are easy to
@@ -974,6 +982,18 @@
         }
 
         function insertAxisLabels() {
+            if (options.title) {
+                yLocation = plotOffset.top - options.titleFontSize * 1.25;
+                xLocation = plotOffset.left;
+                color = options.titleColor ? options.titleColor : options.grid.color;
+                titleDiv = $("<div id='graph_title' style='color:" + color +
+                             ";text-align:center;position:absolute;top:" + yLocation +
+                             "px;left:" + xLocation + "px;font-weight:bold;font-size:" +
+                             options.titleFontSize + "px;width:" + plotWidth + "px;'>" +
+                             options.title + "</div>");
+                target.append(titleDiv);
+            }
+
             if (options.xaxis.label) {
                 yLocation = plotOffset.top + plotHeight + (xaxis.labelHeight * 1.5);
                 xLocation = plotOffset.left;