Montag, 16. Oktober 2017

Stacked Column Bar with Chart.js in Oracle Apex


1-  Include chart.js File

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js


2- Create your Service. In my Case:

https://apex.oracle.com/pls/apex/pierrealli/hr/employees/




3-  Add the below code in Execute when Page Load

var mgr = [],

    mgr_data_bgcolor = [];

var mgr_data_bocolor = [];

var color1 = 'rgb(35, 123, 177)';
var border = 'none';


var sal = [];

var sal_bgcolor = [];

var sal_bocolor = [];

var color2 = 'rgb(104, 193, 130)';



var comm = [];

var comm_bgcolor = [];

var comm_bocolor = [];

var color3 = 'rgb(250, 213, 92)';



var deptno = [];

var deptno_bgcolor = [];

var deptno_bocolor = [];

var color4 = 'rgb(237, 102, 71)';

var dt = [];



$.ajax({
        url: 'https://apex.oracle.com/pls/apex/pierrealli/hr/employees/',
        async: false

    })
    .done(function(data) {
        for (var i = 0, len = data.items.length; i < len; i++) {
            var e = data.items[i].mgr;

            mgr.push(e)
            mgr_data_bgcolor.push(color1);
            mgr_data_bocolor.push(border);



            var e1 = data.items[i].sal;

            sal.push(e1)
            sal_bgcolor.push(color2);
            sal_bocolor.push(border);



            var e2 = data.items[i].comm;

            comm.push(e2)
            comm_bgcolor.push(color3);
            comm_bocolor.push(border);

            var e4 = data.items[i].deptno;

            deptno.push(e4)
            deptno_bgcolor.push(color4);
            deptno_bocolor.push(border);

            var e3 = data.items[i].ename;

            dt.push(e3)

        }

        var object1 = {
            label: 'Management',
            data: mgr,
            backgroundColor: mgr_data_bgcolor,
            borderColor: mgr_data_bocolor,
            borderWidth: 0
        }




        var object2 = {
            label: 'Salary',
            data: sal,
            backgroundColor: sal_bgcolor,
            borderColor: sal_bocolor,
            borderWidth: 0
        }




        var object3 = {
            label: 'Commission',
            data: comm,
            backgroundColor: comm_bgcolor,
            borderColor: comm_bocolor,
            borderWidth: 0
        }


        var object4 = {
            label: 'Department',
            data: deptno,
            backgroundColor: deptno_bgcolor,
            borderColor: deptno_bocolor,
            borderWidth: 0
        }




        var datacolection = [];
        datacolection.push(object1);
        datacolection.push(object2);
        datacolection.push(object3);
        datacolection.push(object4);




        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: dt,
                datasets: datacolection
            },
            options: {
                responsive: false,
                maintainAspectRatio: false,
                legend: {
                    display: true
                },
                scales: {
                    yAxes: [{
                        stacked: true,
                        ticks: {
                            beginAtZero: true

                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: false
                        },
                        stacked: true,
                        ticks: {
                            beginAtZero: true,
                            autoSkip: false
                        },
                        scaleLabel: {
                            labelString: 'Month'
                        }
                    }]

                }
            }

        });



    }).always(function() {
        console.log("okay");

    });


4- Demo : https://apex.oracle.com/pls/apex/f?p=123868:60




Kommentare: