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

/* ------------------------------------------------------------------------------
 *
 *  # C3.js - lines and areas
 *
 *  Demo setup of line, step and area charts
 *
 *  Version: 1.0
 *  Latest update: August 1, 2015
 *
 * ---------------------------------------------------------------------------- */

$(function () {
    

    // Line chart
    // ------------------------------

    // Generate chart
    var line_chart = c3.generate({
        bindto: '#c3-line-chart',
        point: { 
            r: 4   
        },
        size: { height: 400 },
        color: {
            pattern: ['#4CAF50', '#F4511E', '#1E88E5']
        },
        data: {
            columns: [
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ],
            type: 'spline'
        },
        grid: {
            y: {
                show: true
            }
        }
    });

    // Change data
    setTimeout(function () {
        line_chart.load({
            columns: [
                ['data1', 230, 190, 300, 500, 300, 400]
            ]
        });
    }, 3000);
    setTimeout(function () {
        line_chart.load({
            columns: [
                ['data3', 130, 150, 200, 300, 200, 100]
            ]
        });
    }, 6000);
    setTimeout(function () {
        line_chart.unload({
            ids: 'data1'
        });
    }, 9000);



    // Line chart with regions
    // ------------------------------

    // Generate chart
    var chart_line_regions = c3.generate({
        bindto: '#c3-line-regions-chart',
        size: { height: 400 },
        point: {
            r: 4
        },
        color: {
            pattern: ['#E53935', '#5E35B1']
        },
        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}],
                'data2': [{'end':3}]
            }
        },
        grid: {
            y: {
                show: true
            }
        }
    });



    // Area chart
    // ------------------------------

    // Generate chart
    var area_chart = c3.generate({
        bindto: '#c3-area-chart',
        size: { height: 400 },
        point: {
            r: 4
        },
        color: {
            pattern: ['#E53935', '#3949AB']
        },
        data: {
            columns: [
                ['data1', 300, 350, 300, 0, 0, 0],
                ['data2', 130, 100, 140, 200, 150, 50]
            ],
            types: {
                data1: 'area-spline',
                data2: 'area-spline'
            }
        },
        grid: {
            y: {
                show: true
            }
        }
    });



    // Stacked area chart
    // ------------------------------

    // Generate chart
    var area_stacked_chart = c3.generate({
        bindto: '#c3-area-stacked-chart',
        size: { height: 400 },
        color: {
            pattern: ['#1E88E5', '#F4511E']
        },
        point: {
            r: 4
        },
        data: {
            columns: [
                ['data1', 300, 350, 300, 0, 0, 120],
                ['data2', 130, 100, 140, 200, 150, 50]
            ],
            types: {
                data1: 'area-spline',
                data2: 'area-spline'
            },
            groups: [['data1', 'data2']]
        },
        grid: {
            y: {
                show: true
            }
        }
    });



    // Step chart
    // ------------------------------

    // Generate chart
    var step_chart = c3.generate({
        bindto: '#c3-step-chart',
        size: { height: 400 },
        color: {
            pattern: ['#6D4C41', '#039BE5']
        },
        data: {
            columns: [
                ['data1', 300, 350, 300, 0, 0, 100],
                ['data2', 130, 100, 140, 200, 150, 50]
            ],
            types: {
                data1: 'step',
                data2: 'area-step'
            }
        },
        grid: {
            y: {
                show: true
            }
        }
    });


    // Resize chart on sidebar width change
    $(".sidebar-control").on('click', function() {
        line_chart.resize();
        chart_line_regions.resize();
        area_chart.resize();
        area_stacked_chart.resize();
        step_chart.resize();
    });
});