first commit

2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
@@ -0,0 +1,170 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # C3.js - chart grid
+ *
+ *  Demo setup of chart grid with options
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+    
+
+    // Grid lines
+    // ------------------------------
+
+    // Generate chart
+    var grid_lines = c3.generate({
+        bindto: '#c3-grid-lines',
+        size: { height: 400 },
+        color: {
+            pattern: ['#2196F3']
+        },
+        data: {
+            columns: [
+                ['sample', 30, 200, 100, 400, 150, 250, 120, 200]
+            ]
+        },
+        grid: {
+            x: {
+                show: true
+            },
+            y: {
+                show: true
+            }
+        }
+    });
+
+
+
+    // Optional X grid lines
+    // ------------------------------
+
+    // Generate chart
+    var grid_lines_x = c3.generate({
+        bindto: '#c3-grid-lines-x',
+        size: { height: 400 },
+        color: {
+            pattern: ['#4CAF50']
+        },
+        data: {
+            columns: [
+                ['sample', 30, 200, 100, 400, 150, 250]
+            ]
+        },
+        grid: {
+            x: {
+                lines: [{value: 3, text: 'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
+            }
+        }
+    });
+
+
+
+    // Optional Y grid lines
+    // ------------------------------
+
+    // Generate chart
+    var grid_lines_y = c3.generate({
+        bindto: '#c3-grid-lines-y',
+        size: { height: 400 },
+        data: {
+            columns: [
+                ['sample', 30, 200, 100, 400, 150, 250],
+                ['sample2', 1300, 1200, 1100, 1400, 1500, 1250],
+            ],
+            axes: {
+                sample2: 'y2'
+            }
+        },
+        color: {
+            pattern: ['#607D8B', '#FF9800']
+        },
+        axis: {
+            y2: {
+                show: true
+            }
+        },
+        grid: {
+            y: {
+                lines: [{value: 50, text: 'Label 50'}, {value: 1300, text: 'Label 1300', axis: 'y2'}]
+            }
+        }
+    });
+
+
+
+    // Rects on chart
+    // ------------------------------
+
+    // Generate chart
+    var grid_region = c3.generate({
+        bindto: '#c3-grid-region',
+        size: { height: 400 },
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, 150, 250, 400],
+                ['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
+            ],
+            axes: {
+                data2: 'y2'
+            }
+        },
+        color: {
+            pattern: ['#607D8B', '#FF9800']
+        },
+        axis: {
+            y2: {
+                show: true
+            }
+        },
+        regions: [
+            {axis: 'x', end: 1, class: 'regionX'},
+            {axis: 'x', start: 2, end: 4, class: 'regionX'},
+            {axis: 'x', start: 5, class: 'regionX'},
+            {axis: 'y', end: 50, class: 'regionY'},
+            {axis: 'y', start: 80, end: 140, class: 'regionY'},
+            {axis: 'y', start: 400, class: 'regionY'},
+            {axis: 'y2', end: 900, class: 'regionY2'},
+            {axis: 'y2', start: 1150, end: 1250, class: 'regionY2'},
+            {axis: 'y2', start: 1300, class: 'regionY2'},
+        ]
+    });
+
+
+
+    // Data regions
+    // ------------------------------
+
+    // Generate chart
+    var grid_region_chart = c3.generate({
+        bindto: '#c3-grid-chart-region',
+        size: { height: 400 },
+        color: {
+            pattern: ['#009688', '#9C27B0']
+        },
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, 150, 250],
+                ['data2', 50, 20, 10, 40, 15, 25]
+            ],
+            regions: {
+                'data1': [{'start':1, 'end':2, 'style':'dashed'},{'start':3}], // currently 'dashed' style only
+                'data2': [{'end':3}]
+            }
+        }
+    });
+
+
+
+    // Resize chart on sidebar width change
+    $(".sidebar-control").on('click', function() {
+        grid_lines.resize();
+        grid_lines_x.resize();
+        grid_lines_y.resize();
+        grid_region.resize();
+        grid_region_chart.resize();
+    });
+});