sipadu_mbip/public/pages/chart/c3/c3-custom-chart.js

"use strict";
$(document).ready(function() {
    /*Stacked Area Chart*/
    setTimeout(function(){
        var chart = c3.generate({
            bindto: '#chart',
            data: {
                columns: [
                ['data1', 300, 350, 500, -10, 0, 320],
                ['data2', 130, 100, 180, 200, 150, 50]
                ],
                types: {
                    data1: 'area-spline',
                    data2: 'area-spline'
                // 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
            },
            colors: {
                data1: 'rgba(17, 193, 91, 0.92)',
                data2: 'rgba(68, 138, 255, 0.93)'
            },
            groups: [
            ['data1', 'data2']
            ]
        }
    });


        /*chart_bar_stacked*/
        var chart = c3.generate({
            bindto: '#chart1',
            data: {
                columns: [
                ['data1', -30, 200, 200, 400, -150, 250],
                ['data2', 130, 100, -100, 200, -150, 50],
                ['data3', -230, 200, 300, -300, 250, 250]
                ],
                type: 'bar',
                groups: [
                ['data1', 'data2']
                ],

            },
            color: {
                pattern: ['#11c15b', '#536dfe', '#ff5252']
            },
            grid: {
                y: {
                    lines: [{ value: 0 }]
                }
            }
        });
    },350);
setTimeout(function() {
    chart.groups([
        ['data1', 'data2', 'data3']
        ])
}, 1000);

setTimeout(function() {
    chart.groups([
        ['data1', 'data2', 'data3', 'data4']
        ])
}, 2000);


/*donut chart*/
setTimeout(function() {
    var chart = c3.generate({
        bindto: '#chart2',
        data: {
            columns: [
            ['data1', 30],
            ['data2', 120],
            ],
            type: 'donut',
            onclick: function(d, i) { console.log("onclick", d, i); },
            onmouseover: function(d, i) { console.log("onmouseover", d, i); },
            onmouseout: function(d, i) { console.log("onmouseout", d, i); }
        },
        color: {
            pattern: ['#11c15b', '#536dfe']
        },
        donut: {
            title: "Iris Petal Width"
        }
    });
},350);
setTimeout(function() {
    chart.unload({
        ids: 'data1'
    });
    chart.unload({
        ids: 'data2'
    });
}, 2500);

/*Pie Chart*/

var chart = c3.generate({
    bindto: '#chart3',
    data: {
        // iris data from R
        columns: [
        ['data1', 30],
        ['data2', 120],
        ],
        type : 'pie',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    },
    color: {
       pattern: ['#536dfe', '#11c15b', '#448aff', '#ff5252']
   },
});

setTimeout(function () {
    chart.load({
        columns: [
        ["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],
        ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
        
        ]
    });
}, 1500);

setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
    chart.unload({
        ids: 'data2'
    });
}, 2500);



/*Combination Chart*/
setTimeout(function() {
    var chart = c3.generate({
        bindto: '#chart4',
        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',
            colors: {
                data1: '#536dfe',
                data2: '#11c15b',
                data3: '#448aff',
                data4: '#ff5252',
                data5: '#FE8A7D',
                data6: '#69CEC6'
            },
            types: {
                data3: 'spline',
                data4: 'line',
                data6: 'area',
            },
            groups: [
            ['data1', 'data2']
            ]
        }
    });
    /*Step Chart*/
    var chart = c3.generate({
        bindto: '#chart5',
        data: {
            columns: [
            ['data1', 300, 350, 300, 0, 0, 100],
            ['data2', 130, 100, 140, 200, 150, 50]
            ],
            types: {
                data1: 'step',
                data2: 'area-step'
            },
            colors: {
                data1: 'rgb(255, 82, 82)',
                data2: 'rgba(68, 138, 255, 0.61)'
            }
        }
    });
    /*Scatter Plot Chart Chart*/
    var chart = c3.generate({
        bindto: '#chart6',
        size: { height: 400 },
        color: { pattern: ["#536dfe", "#11c15b"] },
        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'
            }
        }
    });
},350);

/*Scatter Plot Chart Ends*/

});