projects / dygraphs.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ca43385)
add custom styling for labels
authorDan Vanderkam <danvdk@gmail.com>
Wed, 2 Sep 2009 22:03:06 +0000 (22:03 +0000)
committerDan Vanderkam <danvdk@gmail.com>
Wed, 2 Sep 2009 22:03:06 +0000 (22:03 +0000)
dygraph.js patch | blob | blame | history
tests/customLabel.html [new file with mode: 0644] patch | blob

diff --git a/dygraph.js b/dygraph.js
index f5b5d72..53a7272 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -73,6 +73,17 @@ DateGraph.DEFAULT_HEIGHT = 320;
 DateGraph.DEFAULT_STROKE_WIDTH = 1.0;
 DateGraph.AXIS_LINE_WIDTH = 0.3;
 
+// Default attribute values.
+DateGraph.DEFAULT_ATTRS = {
+  pixelsPerXLabel: 60,
+  labelsDivWidth: 250,
+  labelsDivStyles: {
+    // TODO(danvk): move defaults from createStatusMessage_ here.
+  }
+
+  // TODO(danvk): default padding
+};
+
 /**
  * Initializes the DateGraph. This creates a new DIV and constructs the PlotKit
  * and interaction &lt;canvas&gt; inside of it. See the constructor for details
@@ -108,7 +119,9 @@ DateGraph.prototype.__init__ = function(div, file, labels, attrs) {
   this.sigma_ = attrs.sigma || 2.0;
   this.wilsonInterval_ = attrs.wilsonInterval || true;
   this.customBars_ = attrs.customBars || false;
-  this.attrs_ = attrs;
+
+  this.attrs_ = DateGraph.DEFAULT_ATTRS;
+  MochiKit.Base.update(this.attrs_, attrs);
 
   if (typeof this.attrs_.pixelsPerXLabel == 'undefined') {
     this.attrs_.pixelsPerXLabel = 60;
@@ -240,7 +253,7 @@ DateGraph.prototype.setColors_ = function(attrs) {
  */
 DateGraph.prototype.createStatusMessage_ = function(){
   if (!this.labelsDiv_) {
-    var divWidth = 250;
+    var divWidth = this.attrs_.labelsDivWidth;
     var messagestyle = { "style": {
       "position": "absolute",
       "fontSize": "14px",
@@ -251,6 +264,7 @@ DateGraph.prototype.createStatusMessage_ = function(){
       "background": "white",
       "textAlign": "left",
       "overflow": "hidden"}};
+    MochiKit.Base.update(messagestyle["style"], this.attrs_.labelsDivStyles);
     this.labelsDiv_ = MochiKit.DOM.DIV(messagestyle);
     MochiKit.DOM.appendChildNodes(this.graphDiv, this.labelsDiv_);
   }
diff --git a/tests/customLabel.html b/tests/customLabel.html
new file mode 100644 (file)
index 0000000..c6a1c92
--- /dev/null
+++ b/tests/customLabel.html
@@ -0,0 +1,36 @@
+<html>
+  <head>
+    <title>Label styles</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="excanvas.js"></script>
+    <![endif]-->
+    <script type="text/javascript" src="../dygraph-combined.js"></script>
+    <script type="text/javascript" src="../dygraph.js"></script>
+    <script type="text/javascript" src="data.js"></script>
+  </head>
+  <body>
+    <p>Labels are transparent and repositioned:</p>
+    <div id="g14" style="width:600px; height:300px;"></div>
+
+    <script type="text/javascript">
+      g14 = new DateGraph(
+            document.getElementById("g14"),
+            NoisyData, null, {
+              rollPeriod: 14,
+              errorBars: true,
+              labelsDivWidth: 160,
+              labelsDivStyles: {
+                'background-color': 'transparent',
+                'top': '10px'
+              },
+              padding: {
+                left: 40,
+                top: 0,
+                right: 10,
+                bottom: 10
+              }
+            }
+          );
+    </script>
+  </body>
+</html>
danvk/dygraphs fork supporting touch events