Add sample for multiple charts

11 years ago · 6fedcb869d
1 changed files with 60 additions and 0 deletions
--- a/htdocs/samples/multiple_charts.html
+++ b/htdocs/samples/multiple_charts.html
@ -0,0 +1,60 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart1" style="height:300px;"></div>
+    <div id="chart2" style="height:150px;"></div>
+    <div id="chart3" style="height:150px;"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+//          xs: {
+//            'data2': 'data1',
+//          },
+          columns: [
+            ['data1', 130, 210, 120, 440, 250, 350],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+//          type: 'scatter'
+//          type: 'pie'
+          selection: {
+            enabled: true
+          }
+        },
+        zoom: {
+          enabled: true
+        },
+        subchart : {
+          show: true
+        }
+      });
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 150, 120, 210, 240, 215, 125]
+          ],
+//          type: 'scatter'
+//          type: 'pie'
+        },
+      });
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 550, 520, 510, 540, 515, 525]
+          ],
+//          type: 'scatter'
+//          type: 'pie'
+        },
+      });
+    </script>
+  </body>
+</html>