Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
wiki:graphs_or_charts [2018/12/30 20:16] – [Time Series Chart] ttzhouwiki: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. 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 ===== ===== Usages =====
 Example graphs could be found at [[https://c3js.org/examples.html|C3 Examples]]. Example graphs could be found at [[https://c3js.org/examples.html|C3 Examples]].
Line 44: Line 45:
 <code> <code>
 <c3> <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: {         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> </code>
  
Line 64: Line 62:
  
 <c3> <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: {         x: {
-            type: 'indexed', +            type: 'category', 
-            categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6']+            categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
         }         }
     }     }
Line 127: Line 123:
  
 ==== Spline Chart ==== ==== Spline Chart ====
 +<code>
 +<c3>
 +    data: {
 +        columns: [
 +            ['data1', 30, 200, 100, 400, 150, 250],
 +            ['data2', 130, 100, 140, 200, 150, 50]
 +        ],
 +        type: 'spline'
 +    }
 +</c3>
 +</code>
 +How the above code looks like in work:
  
 <c3> <c3>
Line 139: Line 147:
  
 ==== Simple XY Line Chart ==== ==== Simple XY Line Chart ====
 +<code>
 +<c3>
 +    data: {
 +        x: 'x',
 +        columns: [
 +            ['x', 30, 50, 100, 230, 300, 310],
 +            ['data1', 30, 200, 100, 400, 150, 250],
 +            ['data2', 130, 300, 200, 300, 250, 450]
 +        ]
 +    }
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
  
 <c3> <c3>
Line 148: Line 170:
             ['data2', 130, 300, 200, 300, 250, 450]             ['data2', 130, 300, 200, 300, 250, 450]
         ]         ]
 +    }
 +</c3>
 +
 +==== Additional Y Axis ====
 +<code>
 +<c3>
 +    data: {
 +        columns: [
 +            ['data1', 30, 200, 100, 400, 150, 250],
 +            ['data2', 50, 20, 10, 40, 15, 25],
 +        ],
 +        axes: {
 +            data1: 'y',
 +            data2: 'y2',
 +        },
 +    },
 +    axis: {
 +        y: {
 +            show: true,
 +            label: 'Axis Y',
 +        },
 +        y2: {
 +            show: true,
 +            label: 'Axis Y2',
 +        },
 +    }
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
 +
 +<c3>
 +    data: {
 +        columns: [
 +            ['data1', 30, 200, 100, 400, 150, 250],
 +            ['data2', 50, 20, 10, 40, 15, 25],
 +        ],
 +        axes: {
 +            data1: 'y',
 +            data2: 'y2',
 +        },
 +    },
 +    axis: {
 +        y: {
 +            show: true,
 +            label: 'Axis Y',
 +        },
 +        y2: {
 +            show: true,
 +            label: 'Axis Y2',
 +        },
     }     }
 </c3> </c3>
  
 ==== Multiple XY Line Chart ==== ==== Multiple XY Line Chart ====
 +<code>
 +<c3>
 +    data: {
 +        xs: {
 +            'data1': 'x1',
 +            'data2': 'x2',
 +        },
 +        columns: [
 +            ['x1', 10, 30, 45, 50, 70, 100],
 +            ['x2', 30, 50, 75, 100, 120],
 +            ['data1', 30, 200, 100, 400, 150, 250],
 +            ['data2', 20, 180, 240, 100, 190]
 +        ]
 +    }
 +</c3>
 +</code>
 +How the above code looks like in work:
 +
 <c3> <c3>
     data: {     data: {
Line 169: Line 260:
  
 ==== Line Chart with Regions ==== ==== Line Chart with Regions ====
 +<code>
 +<c3>
 +    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}]
 +        }
 +    }
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
 +
 <c3> <c3>
     data: {     data: {
Line 183: Line 291:
  
 ==== Step Chart ==== ==== Step Chart ====
 +<code
 +<c3>
 +    data: {
 +        columns: [
 +            ['data1', 300, 350, 300, 0, 0, 100],
 +            ['data2', 130, 100, 140, 200, 150, 50]
 +        ],
 +        types: {
 +            data1: 'step',
 +            data2: 'area-step'
 +        }
 +    }
 +</c3>
 +</code>
  
 +How the above code looks like in work:
  
 <c3> <c3>
Line 199: Line 322:
  
 ==== Area Chart ==== ==== Area Chart ====
 +<code>
 +<c3>
 +    data: {
 +        columns: [
 +            ['data1', 300, 350, 300, 0, 0, 0],
 +            ['data2', 130, 100, 140, 200, 150, 50]
 +        ],
 +        types: {
 +            data1: 'area',
 +            data2: 'area-spline'
 +        }
 +    }
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
 +
 <c3> <c3>
     data: {     data: {
Line 214: Line 354:
  
 ==== Stacked Area Chart ==== ==== Stacked Area Chart ====
 +<code>
 +<c3>
 +    data: {
 +        columns: [
 +            ['data1', 300, 350, 300, 0, 0, 120],
 +            ['data2', 130, 100, 140, 200, 150, 50]
 +        ],
 +        types: {
 +            data1: 'area-spline',
 +            data2: 'area-spline'
 +            // 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
 +        },
 +        groups: [['data1', 'data2']]
 +    }
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
  
 <c3> <c3>
Line 232: Line 390:
  
 ==== Bar Chart ==== ==== Bar Chart ====
 +<code>
 +<c3>
 +    data: {
 +        columns: [
 +            ['data1', 30, 200, 100, 400, 150, 250],
 +            ['data2', 130, 100, 140, 200, 150, 50],
 +            ['data3', 130, -150, 200, 300, -200, 100]
 +        ],
 +        type: 'bar'
 +    },
 +    bar: {
 +        width: {
 +            ratio: 0.5 // this makes bar width 50% of length between ticks
 +        }
 +        // or
 +        //width: 100 // this makes bar width 100px
 +    }
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
 +
 <c3> <c3>
     data: {     data: {
Line 251: Line 431:
  
 ==== Stacked Bar Chart ==== ==== Stacked Bar Chart ====
 +<code>
 +<c3>
 +    data: {
 +        columns: [
 +            ['data1', -30, 200, 200, 400, -150, 250],
 +            ['data2', 130, 100, -100, 200, -150, 50],
 +            ['data3', -230, 200, 200, -300, 250, 250],
 +            ['data4', 100, -50, 150, 200, -300, -100]
 +        ],
 +        type: 'bar',
 +        groups: [
 +            ['data1', 'data2'],
 +            ['data3', 'data4'],
 +        ]
 +    },
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
 +
 <c3> <c3>
     data: {     data: {
Line 268: Line 468:
  
 ==== Scatter Plot ==== ==== Scatter Plot ====
 +<code>
 +<c3>
 +    data: {
 +        xs: {
 +            setosa: 'setosa_x',
 +            versicolor: 'versicolor_x',
 +        },
 +        // iris data from R
 +        columns: [
 +            ["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
 +            ["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
 +            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
 +            ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
 +        ],
 +        type: 'scatter'
 +    },
 +    axis: {
 +        x: {
 +            label: 'Sepal.Width',
 +            tick: {
 +                fit: false
 +            }
 +        },
 +        y: {
 +            label: 'Petal.Width'
 +        }
 +    }
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
 +
 <c3> <c3>
     data: {     data: {
Line 298: Line 530:
  
 ==== Donut Chart ==== ==== Donut Chart ====
 +<code>
 +<c3>
 +    data: {
 +        columns: [
 +            ['data1', 30],
 +            ['data2', 120],
 +            ['data3', 80]
 +        ],
 +        type : 'donut',
 +    },
 +    donut: {
 +        title: "Iris Petal Width"
 +    }
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
  
 <c3> <c3>
Line 315: Line 564:
  
 ==== Gauge Chart ==== ==== Gauge Chart ====
 +<code>
 +<c3>
 +    data: {
 +        columns: [
 +            ['data', 91.4]
 +        ],
 +        type: 'gauge',
 +    },
 +    gauge: {
 +//        label: {
 +//            format: function(value, ratio) {
 +//                return value;
 +//            },
 +//            show: false // to turn off the min/max labels.
 +//        },
 +//    min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
 +//    max: 100, // 100 is default
 +//    units: ' %',
 +//    width: 39 // for adjusting arc thickness
 +    },
 +    color: {
 +        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
 +        threshold: {
 +//            unit: 'value', // percentage is default
 +//            max: 200, // 100 is default
 +            values: [30, 60, 90, 100]
 +        }
 +    }
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
  
 <c3> <c3>
Line 347: Line 628:
  
 ==== Combination Chart ==== ==== Combination Chart ====
 +<code>
 +<c3>
 +    data: {
 +        columns: [
 +            ['data1', 30, 20, 50, 40, 60, 50],
 +            ['data2', 200, 130, 90, 240, 130, 220],
 +            ['data3', 300, 200, 160, 400, 250, 250],
 +            ['data4', 200, 130, 90, 240, 130, 220],
 +            ['data5', 130, 120, 150, 140, 160, 150],
 +            ['data6', 90, 70, 20, 50, 60, 120],
 +        ],
 +        type: 'bar',
 +        types: {
 +            data3: 'spline',
 +            data4: 'line',
 +            data6: 'area',
 +        },
 +        groups: [
 +            ['data1','data2']
 +        ]
 +    },
 +    axis: {
 +        x: {
 +            type: 'category',
 +            categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6']
 +        }
 +    }
 +</c3>
 +</code>
 +
 +How the above code looks like in work:
  
 <c3> <c3>
wiki/graphs_or_charts.1546172161.txt.gz · Last modified: (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International


  • Show page
  • Old revisions
  • Backlinks
  • Recent Changes
  • Media Manager
  • Sitemap