Fix #9 (Add custom x axis labels)

saeidzebardast · Aug 4, 2016 · a03d83a · a03d83a
1 parent db81f97
commit a03d83a
Show file tree

Hide file tree

Showing 8 changed files with 442 additions and 22 deletions.
diff --git a/demo/nvd3-cumulative-line.html b/demo/nvd3-cumulative-line.html
@@ -12,15 +12,19 @@
 
 <body unresolved>
 
-  <p>An example of
-    <code>&lt;nvd3-cumulative-line&gt;</code>:</p>
+  <h1>Examples of
+    <code>&lt;nvd3-cumulative-line&gt;</code>:</h1>
 
-  <nvd3-cumulative-line auto-resize show-legend use-interactive-guideline>
+  <h2>Simple chart</h2>
+  <nvd3-cumulative-line id="chart-1" height="300" auto-resize show-legend use-interactive-guideline>
+  </nvd3-cumulative-line>
 
+  <h2>Chart with custom X Axis labels</h2>
+  <nvd3-cumulative-line id="chart-2" height="300" auto-resize show-legend use-interactive-guideline>
   </nvd3-cumulative-line>
 
   <script>
-    var el = document.querySelector('nvd3-cumulative-line');
+    var el = document.querySelector('#chart-1');
     el.data = [{
         "key": "North America",
         "values": [
@@ -61,6 +65,85 @@
         ]
       }
     ];
+
+    el = document.querySelector('#chart-2');
+    el.data = [{
+      "key": "North America",
+      "values": [
+        [1, 23.041422681023],
+        [2, 19.854291255832],
+        [3, 21.02286281168],
+        [4, 22.093608385173]
+      ]
+    },
+
+      {
+        "key": "Africa",
+        "values": [
+          [1, 7.9356392949025],
+          [2, 7.4514668527298],
+          [3, 7.9085410566608],
+          [4, 5.8996782364764]
+        ]
+      },
+
+      {
+        "key": "South America",
+        "values": [
+          [1, 7.9149900245423],
+          [2, 7.0899888751059],
+          [3, 7.5996132380614],
+          [4, 8.2741174301034]
+        ]
+      },
+
+      {
+        "key": "Asia",
+        "values": [
+          [1, 13.153938631352],
+          [2, 12.456410521864],
+          [3, 12.537048663919],
+          [4, 13.947386398309]
+        ]
+      },
+
+      {
+        "key": "Europe",
+        "values": [
+          [1, 9.3433263069351],
+          [2, 8.4583069475546],
+          [3, 8.0342398154196],
+          [4, 8.1538966876572]
+        ]
+      },
+
+      {
+        "key": "Australia",
+        "values": [
+          [1, 5.1162447683392],
+          [2, 4.2022848306513],
+          [3, 4.3543715758736],
+          [4, 5.4641223667245]
+        ]
+      },
+
+      {
+        "key": "Antarctica",
+        "values": [
+          [1, 1.3503144674343],
+          [2, 1.2232741112434],
+          [3, 1.3930470790784],
+          [4, 1.2631275030593]
+        ]
+      }
+    ];
+
+    el.xAxisLabels = {
+      "1": "Q 1",
+      "2": "Q 2",
+      "3": "Q 3",
+      "4": "Q 4"
+    }
   </script>
 </body>
 

diff --git a/demo/nvd3-line-with-focus.html b/demo/nvd3-line-with-focus.html
@@ -12,15 +12,18 @@
 
 <body unresolved>
 
-  <p>An example of
-    <code>&lt;nvd3-line-with-focus&gt;</code>:</p>
-
-  <nvd3-line-with-focus height="150" brush-extent='[35,50]' show-legend use-interactive-guideline auto-resize no-data="No Data Available!">
+  <h1>Examples of
+    <code>&lt;nvd3-line-with-focus&gt;</code>:</h1>
 
+  <h2>Simple chart</h2>
+  <nvd3-line-with-focus id="chart-1" height="250" brush-extent='[35,50]' show-legend use-interactive-guideline auto-resize no-data="No Data Available!">
   </nvd3-line-with-focus>
 
+  <h2>Chart with custom X Axis labels</h2>
+  <nvd3-line-with-focus id="chart-2" height="250" brush-extent='[1,2]' show-legend use-interactive-guideline auto-resize no-data="No Data Available!">
+  </nvd3-line-with-focus>
   <script>
-    var el = document.querySelector('nvd3-line-with-focus');
+    var el = document.querySelector('#chart-1');
 
     el.data = [{
       "values": [{
@@ -631,8 +634,57 @@
       "key": "Cosine Wave",
       "color": "#2ca02c"
     }];
+
+
+    el = document.querySelector('#chart-2');
+
+    el.data = [{
+      "values": [{
+        "x": 0,
+        "y": 0
+      }, {
+        "x": 1,
+        "y": 3
+      }, {
+        "x": 2,
+        "y": 2
+      }, {
+        "x": 3,
+        "y": 5
+      }],
+      "key": "Line 1",
+      "color": "#ff7f0e"
+    }, {
+      "values": [{
+        "x": 0,
+        "y": 1
+      }, {
+        "x": 1,
+        "y": 4
+      }, {
+        "x": 2,
+        "y": 2
+      }, {
+        "x": 3,
+        "y": 3
+      }],
+      "key": "Line 2",
+      "color": "#2ca02c"
+    }];
+
+    el.xAxisLabels = {
+      "0": "Label 0",
+      "0.5": "Label 0.5",
+      "1": "Label 1",
+      "1.5": "Label 1.5",
+      "2": "Label 2",
+      "2.5": "Label 2.5",
+      "3": "Label 3",
+      "3.5": "Label 3.5",
+      "4": "Label 4"
+    }
   </script>
 
 </body>
 
-</html>
+</html>
diff --git a/demo/nvd3-line.html b/demo/nvd3-line.html
@@ -12,15 +12,20 @@
 
 <body unresolved>
 
-  <p>An example of
-    <code>&lt;nvd3-line&gt;</code>:</p>
+<h1>Examples of
+    <code>&lt;nvd3-line&gt;</code></h1>
 
-  <nvd3-line height="150" show-legend use-interactive-guideline auto-resize no-data="No Data Available!">
+<h2>Simple chart</h2>
+<nvd3-line id="chart-1" height="300" show-legend use-interactive-guideline auto-resize no-data="No Data Available!">
+</nvd3-line>
 
-  </nvd3-line>
+<h2>Chart with custom X Axis labels</h2>
+<nvd3-line id="chart-2" height="300" show-legend use-interactive-guideline auto-resize no-data="No Data Available!">
+</nvd3-line>
 
-  <script>
-    var el = document.querySelector('nvd3-line');
+<script>
+    var el;
+    el = document.querySelector('#chart-1');
 
     el.data = [{
       "values": [{
@@ -631,7 +636,52 @@
       "key": "Cosine Wave",
       "color": "#2ca02c"
     }];
-  </script>
+
+
+    el = document.querySelector('#chart-2');
+
+    el.data = [{
+        "values": [{
+            "x": 0,
+            "y": 0
+        }, {
+            "x": 1,
+            "y": 3
+        }, {
+            "x": 2,
+            "y": 2
+        }, {
+            "x": 3,
+            "y": 5
+        }],
+        "key": "Line 1",
+        "color": "#ff7f0e"
+    }, {
+        "values": [{
+            "x": 0,
+            "y": 1
+        }, {
+            "x": 1,
+            "y": 4
+        }, {
+            "x": 2,
+            "y": 2
+        }, {
+            "x": 3,
+            "y": 3
+        }],
+        "key": "Line 2",
+        "color": "#2ca02c"
+    }];
+
+    el.xAxisLabels = {
+        "0": "Label 0",
+        "1": "Label 1",
+        "2": "Label 2",
+        "3": "Label 3",
+        "4": "Label 4"
+    }
+</script>
 
 </body>
 

diff --git a/demo/nvd3-stacked-area.html b/demo/nvd3-stacked-area.html
@@ -12,15 +12,19 @@
 
 <body unresolved>
 
-  <p>An example of
-    <code>&lt;nvd3-stacked-area&gt;</code>:</p>
+  <h1>Examples of
+    <code>&lt;nvd3-stacked-area&gt;</code>:</h1>
 
-  <nvd3-stacked-area height="400" auto-resize show-legend use-interactive-guideline>
+  <h2>Simple chart</h2>
+  <nvd3-stacked-area id="chart-1" height="300" auto-resize show-legend use-interactive-guideline>
+  </nvd3-stacked-area>
 
+  <h2>Chart with custom X Axis labels</h2>
+  <nvd3-stacked-area id="chart-2" height="300" auto-resize show-legend use-interactive-guideline>
   </nvd3-stacked-area>
 
   <script>
-    var el = document.querySelector('nvd3-stacked-area');
+    var el = document.querySelector('#chart-1');
     el.data = [{
         "key": "North America",
         "values": [
@@ -91,6 +95,85 @@
         ]
       }
     ];
+
+    el = document.querySelector('#chart-2');
+    el.data = [{
+        "key": "North America",
+        "values": [
+          [1, 23.041422681023],
+          [2, 19.854291255832],
+          [3, 21.02286281168],
+          [4, 22.093608385173]
+        ]
+      },
+
+      {
+        "key": "Africa",
+        "values": [
+          [1, 7.9356392949025],
+          [2, 7.4514668527298],
+          [3, 7.9085410566608],
+          [4, 5.8996782364764]
+        ]
+      },
+
+      {
+        "key": "South America",
+        "values": [
+          [1, 7.9149900245423],
+          [2, 7.0899888751059],
+          [3, 7.5996132380614],
+          [4, 8.2741174301034]
+        ]
+      },
+
+      {
+        "key": "Asia",
+        "values": [
+          [1, 13.153938631352],
+          [2, 12.456410521864],
+          [3, 12.537048663919],
+          [4, 13.947386398309]
+        ]
+      },
+
+      {
+        "key": "Europe",
+        "values": [
+          [1, 9.3433263069351],
+          [2, 8.4583069475546],
+          [3, 8.0342398154196],
+          [4, 8.1538966876572]
+        ]
+      },
+
+      {
+        "key": "Australia",
+        "values": [
+          [1, 5.1162447683392],
+          [2, 4.2022848306513],
+          [3, 4.3543715758736],
+          [4, 5.4641223667245]
+        ]
+      },
+
+      {
+        "key": "Antarctica",
+        "values": [
+          [1, 1.3503144674343],
+          [2, 1.2232741112434],
+          [3, 1.3930470790784],
+          [4, 1.2631275030593]
+        ]
+      }
+    ];
+
+    el.xAxisLabels = {
+      "1": "Q 1",
+      "2": "Q 2",
+      "3": "Q 3",
+      "4": "Q 4"
+    }
   </script>
 </body>