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

/* ------------------------------------------------------------------------------
 *
 *  # 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();
    });
});