LimitLess-admin-panel/assets/js/charts/c3/c3_axis.js

/* ------------------------------------------------------------------------------
 *
 *  # C3.js - chart axis
 *
 *  Demo setup of chart axis with options
 *
 *  Version: 1.0
 *  Latest update: August 1, 2015
 *
 * ---------------------------------------------------------------------------- */

$(function () {
    

    // Categorized axis
    // ------------------------------

    // Generate chart
    var axis_categorized = c3.generate({
        bindto: '#c3-axis-categorized',
        size: { height: 400 },
        data: {
            columns: [
                ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
            ]
        },
        color: {
            pattern: ['#03A9F4']
        },
        axis: {
            x: {
                type: 'category',
                categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
            }
        },
        grid: {
            x: {
                show: true
            }
        }
    });



    // Additional axis
    // ------------------------------

    // Generate chart
    var axis_additional = c3.generate({
        bindto: '#c3-axis-additional',
        size: { height: 400 },
        data: {
            columns: [
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ],
            axes: {
                data1: 'y',
                data2: 'y2'
            }
        },
        color: {
            pattern: ['#4CAF50', '#607D8B']
        },
        axis: {
            y2: {
                show: true
            }
        },
        grid: {
            y: {
                show: true
            }
        }
    });



    // Axis tick culling
    // ------------------------------

    // Generate chart
    var axis_tick_culling = c3.generate({
        bindto: '#c3-axis-tick-culling',
        size: { height: 400 },
        data: {
            columns: [
                ['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]
            ]
        },
        color: {
            pattern: ['#FF5722']
        },
        axis: {
            x: {
                type: 'category',
                tick: {
                    culling: {
                        max: 4
                    }
                }
            }
        }
    });



    // Text label rotation
    // ------------------------------

    // Generate chart
    var axis_tick_rotation = c3.generate({
        bindto: '#c3-axis-tick-rotation',
        size: { height: 400 },
        data: {
            x : 'x',
            columns: [
                ['x', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                ['pv', 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400],
            ],
            type: 'bar'
        },
        color: {
            pattern: ['#00BCD4']
        },
        axis: {
            x: {
                type: 'category',
                tick: {
                    rotate: -90
                },
                height: 80
            }
        },
        grid: {
            x: {
                show: true
            }
        }
    });



    // Axis labels
    // ------------------------------

    // Generate chart
    var axis_labels = c3.generate({
        bindto: '#c3-axis-labels',
        size: { height: 400 },
        data: {
            columns: [
                ['sample', 30, 200, 100, 400, 150, 250],
                ['sample2', 130, 300, 200, 500, 250, 350]
            ],
            axes: {
                sample2: 'y2'
            }
        },
        color: {
            pattern: ['#9C27B0']
        },
        axis: {
            x: {
                label: 'X Label'
            },
            y: {
                label: 'Y Label'
            },
            y2: {
                show: true,
                label: 'Y2 Label'
            }
        }
    });



    // Resize chart on sidebar width change
    $(".sidebar-control").on('click', function() {
        axis_categorized.resize();
        axis_additional.resize();
        axis_tick_culling.resize();
        axis_tick_rotation.resize();
        axis_labels.resize();
    });
});