Differences

This shows you the differences between two versions of the page.

--- wiki:graphs_or_charts [2018/12/31 04:55] – [Simple XY Line Chart] ttzhou
+++ wiki:graphs_or_charts [2019/03/31 00:37] (current) – external edit 127.0.0.1
@@ Line 7: / Line 7: @@
 This plugin accepts the same JavaScript object that C3 takes to generate a chart. Any chart describable by a static JavaScript object is supported. All types of charts natively supported by C3 can be rendered, such as line/bar/pie/donut charts, as well as scatter plots.
+<alert info>To add captions to figures or tables, please see [[:wiki:tables_and_figures]].</alert>
 ===== Usages =====
 Example graphs could be found at [[https://c3js.org/examples.html|C3 Examples]].
@@ Line 44: / Line 45: @@
 <code>
 <c3>
-  // some comment
+    data: {
-  data: {
+        columns: [
-    columns: [
+            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
-      ['data1', 30, 200, 100, 400, 150, 250], /* more comment */
+        ],
-      ['data2', 50, 20, 10, 40, 15, 25],
+        type : 'bar',
-    ],
+    },
-    type : 'line',
+    axis: {
-  },
-  axis: {
         x: {
-            type: 'indexed',
+            type: 'category',
-            categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6']
+            categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
         }
-    }
+    }/c3>
-</c3>
 </code>
@@ Line 64: / Line 62: @@
 <c3>
-  // some comment
+    data: {
-  data: {
+        columns: [
-    columns: [
+            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
-      ['data1', 30, 200, 100, 400, 150, 250], /* more comment */
+        ],
-      ['data2', 50, 20, 10, 40, 15, 25],
+        type : 'bar',
-    ],
+    },
-    type : 'line',
+    axis: {
-  },
-  axis: {
         x: {
-            type: 'indexed',
+            type: 'category',
-            categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6']
+            categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
         }
     }
@@ Line 183: / Line 179: @@
         columns: [
             ['data1', 30, 200, 100, 400, 150, 250],
-            ['data2', 50, 20, 10, 40, 15, 25]
+            ['data2', 50, 20, 10, 40, 15, 25],
         ],
         axes: {
             data1: 'y',
-            data2: 'y2'
+            data2: 'y2',
-        }
+        },
     },
     axis: {
+        y: {
+            show: true,
+            label: 'Axis Y',
+        },
         y2: {
-            show: true
+            show: true,
-        }
+            label: 'Axis Y2',
+        },
     }
 </c3>
@@ Line 204: / Line 205: @@
         columns: [
             ['data1', 30, 200, 100, 400, 150, 250],
-            ['data2', 50, 20, 10, 40, 15, 25]
+            ['data2', 50, 20, 10, 40, 15, 25],
         ],
         axes: {
             data1: 'y',
-            data2: 'y2'
+            data2: 'y2',
-        }
+        },
     },
     axis: {
+        y: {
+            show: true,
+            label: 'Axis Y',
+        },
         y2: {
-            show: true
+            show: true,
-        }
+            label: 'Axis Y2',
+        },
     }
 </c3>