serie dots top-bottom axes for two series

simbiotica · May 3, 2015 · 5c23c22 · 5c23c22
1 parent c9e587e
commit 5c23c22
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 9 deletions.
diff --git a/charicharts.js b/charicharts.js
@@ -470,7 +470,20 @@ var p_axes = PClass.extend({
       .attr('height', 1)
       .attr('width', this.opts.fullWidth);
 
-    // this._renderXLabel('bottom');
+    if (this.data.length === 2) {
+      // Append top line indicator
+      model.el.append('circle')
+        .attr('cx', -this.opts.margin.left + 6)
+        .attr('cy', -11)
+        .attr('r', 4)
+        .style('fill', this.data[1].color);
+
+      model.el.append('circle')
+        .attr('cx', -this.opts.margin.left + 5)
+        .attr('cy', this.opts.height + 12)
+        .attr('r', 4)
+        .style('fill', this.data[0].color);
+    }
   },
 
   _renderBottom: function() {
@@ -599,7 +612,7 @@ var p_axes = PClass.extend({
       .attr('class', 'label')
       .attr('transform', h_getTranslate(orientation === 'left' ? -this.opts.margin.left :
         this.opts.width + this.opts.margin.right, this.opts.yaxis.textMarginTop))
-      .attr('y', -10)
+      .attr('y', -12)
       .attr('x', 0)
       .attr('text-anchor', orientation === 'left' ? 'start' : 'end')
       .text(label);

diff --git a/charicharts.min.js b/charicharts.min.js
diff --git a/demo/charicharts.js b/demo/charicharts.js
@@ -470,7 +470,20 @@ var p_axes = PClass.extend({
       .attr('height', 1)
       .attr('width', this.opts.fullWidth);
 
-    // this._renderXLabel('bottom');
+    if (this.data.length === 2) {
+      // Append top line indicator
+      model.el.append('circle')
+        .attr('cx', -this.opts.margin.left + 6)
+        .attr('cy', -11)
+        .attr('r', 4)
+        .style('fill', this.data[1].color);
+
+      model.el.append('circle')
+        .attr('cx', -this.opts.margin.left + 5)
+        .attr('cy', this.opts.height + 12)
+        .attr('r', 4)
+        .style('fill', this.data[0].color);
+    }
   },
 
   _renderBottom: function() {
@@ -599,7 +612,7 @@ var p_axes = PClass.extend({
       .attr('class', 'label')
       .attr('transform', h_getTranslate(orientation === 'left' ? -this.opts.margin.left :
         this.opts.width + this.opts.margin.right, this.opts.yaxis.textMarginTop))
-      .attr('y', -10)
+      .attr('y', -12)
       .attr('x', 0)
       .attr('text-anchor', orientation === 'left' ? 'start' : 'end')
       .text(label);

diff --git a/demo/simple-chart-date.html b/demo/simple-chart-date.html
@@ -49,15 +49,15 @@
 var data = [{
   id: 1005,
   type: 'line',
-  values: [],
+  values: getData(10, 100, 200),
   dots: true,
   unit: 'Euros',
   interpolation: 'step',
   color: '#444'
 },{
   id: 10025,
   type: 'line',
-  values: [],
+  values: getData(10, 100, 200),
   dots: true,
   unit: 'Euros',
   interpolation: 'step',

diff --git a/src/parts/axes.js b/src/parts/axes.js
@@ -73,7 +73,20 @@ var p_axes = PClass.extend({
       .attr('height', 1)
       .attr('width', this.opts.fullWidth);
 
-    // this._renderXLabel('bottom');
+    if (this.data.length === 2) {
+      // Append top line indicator
+      model.el.append('circle')
+        .attr('cx', -this.opts.margin.left + 6)
+        .attr('cy', -11)
+        .attr('r', 4)
+        .style('fill', this.data[1].color);
+
+      model.el.append('circle')
+        .attr('cx', -this.opts.margin.left + 5)
+        .attr('cy', this.opts.height + 12)
+        .attr('r', 4)
+        .style('fill', this.data[0].color);
+    }
   },
 
   _renderBottom: function() {
@@ -202,7 +215,7 @@ var p_axes = PClass.extend({
       .attr('class', 'label')
       .attr('transform', h_getTranslate(orientation === 'left' ? -this.opts.margin.left :
         this.opts.width + this.opts.margin.right, this.opts.yaxis.textMarginTop))
-      .attr('y', -10)
+      .attr('y', -12)
       .attr('x', 0)
       .attr('text-anchor', orientation === 'left' ? 'start' : 'end')
       .text(label);