<div id="chartGeneration" style="height: 370px; width: 100%;"></div>

<script type="text/javascript">
    $(document).ready(function(){
        var dataPoints = [];
        var finalData = [];
        var counter = 0;
        var colors = ["#1979a9", "#e84a5f", "#33FF77", "#251f44"];
        var chart = new CanvasJS.Chart("chartGeneration",{
            animationEnabled: true,
            title: {
                text: "Berdasar Generasi ",
                fontFamily: "arial black",
                fontColor: "#695A42"
            },
            data: finalData
        });
        $.getJSON("<?php echo base_url('home/ChartOfGenerationAll');?>", function(data) {
            $.each(data, function(key, val){
                var data = {};
                var dataPointR = [];
                data["type"] = "stackedColumn";
                data["legendText"] = key;
                data["color"] = colors[counter++];
                data["showInLegend"] = true;
                data["name"] = key;
                $.each(val, function (key2, val2) {
                    dataPointR.push({"y": parseInt(val2.jumlah), "label": val2.cabang});
                });

                data["dataPoints"] = dataPointR;
                finalData.push(data);
            });
            //console.log(finalData);
            chart.render();
        });
    });
</script>