function demographic()
    {
        $bulan = addslashes($_GET['m']);
        if ($bulan == "") {
            $bulan = date("F Y");
            $days_ago = date('Y-m-01');
            // hard-coded '01' for first day
            $days_now = date('Y-m-t');
        } else {
            $bulan = urldecode($bulan);
            $days_ago = date('Y-m-01', strtotime($bulan));
            // hard-coded '01' for first day
            $days_now = date('Y-m-t', strtotime($bulan));
        }
        $numberDays = cal_days_in_month(CAL_GREGORIAN, date('n', strtotime($bulan)), date('Y', strtotime($bulan)));
        $days_ago = date('Y-m-01', strtotime($bulan));
        // hard-coded '01' for first day
        $days_now = date('Y-m-01', strtotime('+1 month', strtotime($bulan)));
        $t = time();
        //male female
        $ll = new LL_Account();
        global $db;
        $query3 = "Select (Select count(*) from {$ll->table_name} where macc_gender='Male' AND (macc_acquire_date BETWEEN '{$days_ago}' AND '{$days_now}')) AS Male,\n(Select count(*) from {$ll->table_name} where macc_gender='Female' AND (macc_acquire_date BETWEEN '{$days_ago}' AND '{$days_now}')) AS Female ";
        $gender = $db->query($query3, 1);
        //        pr($gender);
        //        macc_lyb_status
        $query4 = "Select (Select count(*) from {$ll->table_name} where macc_lyb_status='LYB Club' AND (macc_acquire_date BETWEEN '{$days_ago}' AND '{$days_now}')) AS Club,\n(Select count(*) from {$ll->table_name} where macc_lyb_status='The Body Shop Friend' AND (macc_acquire_date BETWEEN '{$days_ago}' AND '{$days_now}')) AS Stampcard,\n(Select count(*) from {$ll->table_name} where macc_lyb_status='LYB Fan' AND (macc_acquire_date BETWEEN '{$days_ago}' AND '{$days_now}')) AS Fan ";
        $lyb = $db->query($query4, 1);
        //        pr($lyb);
        //macc_address_city
        //        $query5="SELECT DISTINCT macc_address_city FROM {$ll->table_name} ";
        //
        //        $cities = $db->query($query5,2);
        ////        pr($cities);
        //
        //        foreach($cities as $number=>$city){
        //            if($city->macc_address_city!="") {
        //                $city->macc_address_city = str_replace(".","",$city->macc_address_city);
        //                $city->macc_address_city = str_replace(",","",$city->macc_address_city);
        //                $text[] = "(Select count(*) as count from {$ll->table_name} where macc_address_city='{$city->macc_address_city}' AND (macc_acquire_date BETWEEN '$days_ago' AND '$days_now')) AS " . str_replace("/", "", str_replace(" ", "", str_replace("-", "", $city->macc_address_city)));
        //            }
        ////            if($number>10)break;
        //        }
        ////        pr($text);
        //        $imp = "Select ". implode(",",$text)." ORDER BY count DESC";
        global $db;
        $q = "SELECT macc_address_city,COUNT(*) as count FROM {$ll->table_name} GROUP BY macc_address_city ORDER BY count DESC LIMIT 0,20";
        $arrSl = $db->query($q, 2);
        //        pr($arrSl);
        //        echo $imp;
        //        $nrcities = $db->query($imp,2);
        //        pr($nrcities);
        ?>
<div class="row">
    <div class="col-md-12">
        <h1>
            Demographic Dashboard
            <small><?php 
        echo $bulan;
        ?>
</small>
        </h1>
        <ol class="breadcrumb">
            <li>
                <?php 
        echo Lang::t('Select Timeframe');
        ?>
            </li>
            <li class="active">
                <?php 
        $start = new DateTime('11 months ago');
        // So you don't skip February if today is day the 29th, 30th, or 31st
        $start->modify('first day of this month');
        $end = new DateTime();
        $interval = new DateInterval('P1M');
        $period = new DatePeriod($start, $interval, $end);
        ?>
                <select id="apptimeselector_<?php 
        echo $t;
        ?>
">
                    <?php 
        foreach ($period as $dt) {
            ?>
                        <option value="<?php 
            echo urlencode($dt->format('F Y'));
            ?>
" <?php 
            if ($dt->format('F Y') == $bulan) {
                echo "selected";
            }
            ?>
>
                            <?php 
            echo $dt->format('F Y') . "<br>";
            ?>
                        </option>
                    <?php 
        }
        ?>

                </select>
                <script>
                    $("#apptimeselector_<?php 
        echo $t;
        ?>
").change(function(){
                        var slc = $("#apptimeselector_<?php 
        echo $t;
        ?>
").val();
                        openLw("Demographic","<?php 
        echo _SPPATH;
        ?>
BIWebDemographic/demographic?m="+slc,"fade");
                    });
                </script>
            </li>
        </ol>
    </div>
</div>

        <?php 
        $arrUserswPic = $ll->getWhere("macc_foto != '' AND (macc_acquire_date BETWEEN '{$days_ago}' AND '{$days_now}') ORDER BY macc_acquire_date DESC LIMIT 0,8");
        $arrUsers = $ll->getOrderBy(" macc_acquire_date DESC LIMIT 0,8");
        ?>
        <div class="row">
            <!--<div class="col-md-6">

                <div class="box box-danger">
                    <div class="box-header with-border">
                        <h3 class="box-title">Latest Members</h3>

                        <div class="box-tools pull-right">
                            <span class="label label-danger">8 New Members</span>
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>

                    <div class="box-body no-padding">
                        <ul class="users-list clearfix">
                            <?php 
        foreach ($arrUsers as $user) {
            if ($user->macc_foto == "") {
                $url = _SPPATH . "images/noimage.jpg";
            } else {
                $url = "http://43.231.128.129/" . $user->macc_foto;
            }
            ?>
                            <li>
                                <img src="<?php 
            echo $url;
            ?>
" alt="<?php 
            echo $user->macc_first_name . " " . $user->macc_last_name;
            ?>
">
                                <a class="users-list-name" href="#"><?php 
            echo $user->macc_first_name . " " . $user->macc_last_name;
            ?>
</a>
                                <span class="users-list-date"><?php 
            echo ago(strtotime($user->macc_acquire_date));
            ?>
</span>
                            </li>
                            <?php 
        }
        ?>

                        </ul>

                    </div>

                    <div class="box-footer text-center">
                        <a href="javascript::" class="uppercase">View All Users</a>
                    </div>

                </div>

            </div>
            -->
            <div class="col-md-6">
                <!-- USERS LIST -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Latest Customers</h3>

                        <!--<div class="box-tools pull-right">
                            <span class="label label-danger">8 New Members</span>
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                            </button>
                        </div>-->
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body no-padding">
                        <ul class="users-list clearfix">
                            <?php 
        foreach ($arrUserswPic as $user) {
            ?>
                                <li style="height: 160px;">
                                    <img src="<?php 
            echo _LOKASI;
            echo $user->macc_foto;
            ?>
" alt="User Image">
                                    <span class="users-list-name" ><?php 
            echo $user->macc_first_name . " " . $user->macc_last_name;
            ?>
</span>
                                    <span class="users-list-date"><?php 
            echo ago(strtotime($user->macc_acquire_date));
            ?>
</span>
                                </li>
                            <?php 
        }
        ?>

                        </ul>
                        <!-- /.users-list -->
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer text-center">
                        <a href="javascript:openLw('LL_Account', '<?php 
        echo _SPPATH;
        ?>
LLAccWeb/LL_Account', 'fade'); activkanMenuKiri('LL_Account');" class="uppercase">View All Customers</a>
                    </div>
                    <!-- /.box-footer -->
                </div>
                <!--/.box -->
            </div>

            <?php 
        $arrColor = array("#00a65a", "#00c0ef");
        $c = new Charting();
        $c->color = array_pop($arrColor);
        $c->label = "Male";
        $c->value = $gender->Male;
        $arrData[] = $c;
        $c = new Charting();
        $c->color = array_pop($arrColor);
        $c->label = "Female";
        $c->value = $gender->Female;
        $arrData[] = $c;
        ?>
<div class="col-md-3"><?php 
        Charting::morrisDonut("287px", $arrData, 1, "Gender", "default");
        ?>

            </div>
            <?php 
        $arrColor = array("#4da65a", "#7bcd03", "#53ddde");
        $arrData = array();
        $c = new Charting();
        //            $c->color = array_pop($arrColor);
        $c->color = "#e90057";
        $c->label = "Fan";
        $c->value = $lyb->Fan;
        $arrData[] = $c;
        $c = new Charting();
        //            $c->color = array_pop($arrColor);
        $c->color = "#cd6949";
        $c->label = "Club";
        $c->value = $lyb->Club;
        $arrData[] = $c;
        $c = new Charting();
        //            $c->color = array_pop($arrColor);
        $c->color = "#f4bb1b";
        $c->label = "Stampcard";
        $c->value = $lyb->Stampcard;
        $arrData[] = $c;
        ?>
<div class="col-md-3"><?php 
        Charting::morrisDonut("287px", $arrData, 1, "Member Type", "default");
        ?>

            </div>

            <?php 
        $arrData = array();
        $arrlegend = array();
        foreach ($arrSl as $attr => $value) {
            if ($value->macc_address_city == "") {
                $value->macc_address_city = "Unknown";
            }
            $c = new Charting();
            $c->color = "#" . $this->random_color();
            $c->label = str_replace(" ", "_", $value->macc_address_city);
            $c->value = $value->count;
            $arrData[] = $c;
            //                $arrlegend[$attr] = $value;
        }
        //            asort($arrlegend);
        //pr($arrlegend);
        //            $arrlegend = array_reverse($arrlegend,1);
        //            $arrData = array();
        //            foreach($arrSl as $attr=>$value){
        //                $c = new Charting();
        //                $c->color = "#".$this->random_color();
        //
        //                $c->label = str_replace(" ","_",$value->macc_address_city);
        //                $c->value = $value->count;
        //
        ////                $c->label = ucwords(strtolower(str_replace("_"," ",$attr)));
        ////                $c->value = $value;
        //                $arrData[] = $c;
        //                $arrColors[$attr] = $c->color;
        ////                $arrlegend[$attr] = $value;
        //            }
        ?>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="box box-default">
                    <div class="box-header with-border">
                        <h3 class="box-title">Locations</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body chart-responsive">

                <div class="col-md-6">
                <?php 
        Charting::morrisDonut("300px", $arrData, 0, "Locations", "default", 0);
        ?>
                </div>
                <div class="col-md-6">
                    <?php 
        ?>
                    <ul class="nav nav-pills nav-stacked">
                        <?php 
        foreach ($arrSl as $attr => $value) {
            if ($value->macc_address_city == "") {
                $value->macc_address_city = "Unknown";
            }
            ?>
                        <li style="line-height: 30px;">
                            <div style="margin-top:5px; float: left; width: 20px; height: 20px; background-color: <?php 
            echo $arrColors[$attr];
            ?>
;"></div>
                            &nbsp; <?php 
            echo ucwords(str_replace("_", " ", strtolower($value->macc_address_city)));
            ?>
                                <span class="pull-right "> <?php 
            echo $value->count;
            ?>
</span></li>

                        <?php 
        }
        ?>
                    </ul>
                </div>

                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </div>


        <style>
            ul.legend li{
                list-style: none;
                line-height: 30px;
            }
            ul.legend li div{
                float: left;
                margin-top: 10px;
                margin-right: 15px;
            }
            .legend-item{
                float: left;
                margin: 10px;
                line-height: 30px;
                margin-right: 5px;
            }
            .legend-item div{
                float: left;
                margin-top: 10px;
                margin-right: 5px;
            }
            .breadcrumb {
                padding: 8px 15px;
                margin-bottom: 20px;
                list-style: none;
                background-color: #f5f5f5;
                border-radius: 4px;
            }
            .breadcrumb {
                float: right;
                background: transparent;
                margin-top: 0;
                margin-bottom: 0;
                font-size: 12px;
                padding: 7px 5px;
                position: absolute;
                top: 15px;
                right: 10px;
                border-radius: 2px;
            }
            .users-list-name{
                white-space: nowrap;
            }
        </style>
<?php 
    }
    function app()
    {
        $bulan = addslashes($_GET['m']);
        if ($bulan == "") {
            $bulan = date("F Y");
            $days_ago = date('Y-m-01');
            // hard-coded '01' for first day
            $days_now = date('Y-m-t');
        } else {
            $bulan = urldecode($bulan);
            $days_ago = date('Y-m-01', strtotime($bulan));
            // hard-coded '01' for first day
            $days_now = date('Y-m-t', strtotime($bulan));
        }
        $numberDays = cal_days_in_month(CAL_GREGORIAN, date('n', strtotime($bulan)), date('Y', strtotime($bulan)));
        $days_ago = date('Y-m-01', strtotime($bulan));
        // hard-coded '01' for first day
        $days_now = date('Y-m-01', strtotime('+1 month', strtotime($bulan)));
        //user acquisitions
        $ll = new LL_Account();
        $arrUserNew = $ll->getWhere("(macc_acquire_date BETWEEN '{$days_ago}' AND '{$days_now}')", "macc_acquire_date");
        //new device
        $dev = new DeviceModel();
        $arrDevNew = $dev->getWhere(" (firstlogin BETWEEN '{$days_ago}' AND '{$days_now}') ");
        //device active
        $dlog = new DeviceLogger();
        $arrDevActive = $dlog->getWhere(" (log_date BETWEEN '{$days_ago}' AND '{$days_now}') ");
        //        count($arrDevActive);
        //user active
        $acclog = new LL_AccountLogger();
        $arrUserActive = $acclog->getWhere("(log_date BETWEEN '{$days_ago}' AND '{$days_now}')");
        //        count($arrUserActive);
        $arrStats["New Users"] = $arrUserNew;
        $arrStats["Active Users"] = $arrUserActive;
        $arrStats["New Devices"] = $arrDevNew;
        $arrStats["Active Devices"] = $arrDevActive;
        $t = time();
        ?>
        <div class="row">
            <div class="col-md-12">
            <h1>
                App Dashboard
                <small><?php 
        echo $bulan;
        ?>
</small>
            </h1>
            <ol class="breadcrumb">
                <li>
                    <?php 
        echo Lang::t('Select Timeframe');
        ?>
                </li>
                <li class="active">
                    <?php 
        $start = new DateTime('11 months ago');
        // So you don't skip February if today is day the 29th, 30th, or 31st
        $start->modify('first day of this month');
        $end = new DateTime();
        $interval = new DateInterval('P1M');
        $period = new DatePeriod($start, $interval, $end);
        ?>
                    <select id="apptimeselector_<?php 
        echo $t;
        ?>
">
                        <?php 
        foreach ($period as $dt) {
            ?>
                            <option value="<?php 
            echo urlencode($dt->format('F Y'));
            ?>
" <?php 
            if ($dt->format('F Y') == $bulan) {
                echo "selected";
            }
            ?>
>
                                <?php 
            echo $dt->format('F Y') . "<br>";
            ?>
                            </option>
                            <?php 
        }
        ?>

                    </select>
                    <script>
                        $("#apptimeselector_<?php 
        echo $t;
        ?>
").change(function(){
                            var slc = $("#apptimeselector_<?php 
        echo $t;
        ?>
").val();
                           openLw("App","<?php 
        echo _SPPATH;
        ?>
BIWebProd/app?m="+slc,"fade");
                        });
                    </script>
                </li>
            </ol>
            </div>
       </div>
        <div class="row">
            <div class="col-md-3">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3><?php 
        echo count($arrUserNew);
        ?>
</h3>
                    <p>New Users</p>
                </div>
                <div class="icon">
                    <i class="ion ion-bag"></i>
                </div>
                <!--                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
            </div>
            </div>
        <div class="col-md-3">
            <div class="small-box bg-green">
                <div class="inner">

                    <h3><?php 
        echo count($arrUserActive);
        ?>
</h3>

                    <p>Active Users</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
                <!--                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-yellow">
                <div class="inner">


                    <h3><?php 
        echo count($arrDevNew);
        ?>
</h3>

                    <p>New Devices</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
                <!--                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
            </div>
            </div>
            <div class="col-md-3">
                <div class="small-box bg-red">
                    <div class="inner">
                        <?php 
        ?>

                        <h3><?php 
        echo count($arrDevActive);
        ?>
</h3>

                        <p>Active Devices</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <!--                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>-->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">User Stats</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>
                <div class="box-body chart-responsive">

            <?php 
        //            $days_ago = date('Y-m-d', strtotime('-30 days', time()));
        //            $days_now =  date("Y-m-d");
        $data = self::getAppStats($arrStats, $days_ago, $days_now);
        ?>


                </div>
                <!-- /.box-body -->
            </div>
                </div>

        </div>
        <div class="row">

                <?php 
        $arrDType = array();
        foreach ($arrDevActive as $de) {
            $arrDType[$de->log_dev_type][] = $de;
        }
        $arrColor = array("#00a65a", "#00c0ef");
        foreach ($arrDType as $type => $arrDe) {
            $c = new Charting();
            $c->color = array_pop($arrColor);
            $c->label = $type;
            $c->value = count($arrDe);
            $totalanDevType[$type] = $c->value;
            $arrData[] = $c;
        }
        //                pr($arrData);
        ?>
<div class="col-md-6"><?php 
        Charting::morrisDonut("300px", $arrData, 1, "Device Type", "default");
        ?>

                </div>
                <div class="col-md-6">
                    <div class="box box-default">
                        <div class="box-header with-border">
                            <h3 class="box-title">Average</h3>

                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                            </div>
                        </div>
                        <div class="box-body chart-responsive">
                            <div class="average" style="padding: 20px;">
                                <?php 
        //                                pr($data);
        $maxUsers = max($data['New Users']);
        $maxActiveUsers = max($data['Active Users']);
        $maxNewDevice = max($data['New Devices']);
        $maxActiveDevice = max($data['Active Devices']);
        ?>
                                <p class="text-center">
                                    <strong></strong>
                                </p>


                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    <span class="progress-text">New Users per Day</span>
                                    <span class="progress-number"><b><?php 
        echo round(count($arrUserNew) / $numberDays, 2);
        ?>
</b>/<?php 
        echo $maxUsers;
        ?>
</span>

                                    <div class="progress sm">
                                        <?php 
        $percent = ceil(count($arrUserNew) / $numberDays) / $maxUsers * 100;
        ?>
                                        <div class="progress-bar progress-bar-red" style="width: <?php 
        echo $percent;
        ?>
%"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    <?php 
        $rata2 = round(count($arrUserActive) / $numberDays, 2);
        $percent = round($rata2 / $maxActiveUsers * 100);
        ?>
                                    <span class="progress-text">Active Users per Day</span>
                                    <span class="progress-number"><b><?php 
        echo $rata2;
        ?>
</b>/<?php 
        echo $maxActiveUsers;
        ?>
</span>

                                    <div class="progress sm">
                                        <div class="progress-bar progress-bar-yellow" style="width: <?php 
        echo $percent;
        ?>
%"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    <?php 
        $rata2 = round(count($arrDevNew) / $numberDays, 2);
        $percent = round($rata2 / $maxNewDevice * 100);
        ?>

                                    <span class="progress-text">New Device per Day</span>
                                    <span class="progress-number"><b><?php 
        echo $rata2;
        ?>
</b>/<?php 
        echo $maxNewDevice;
        ?>
</span>

                                    <div class="progress sm">
                                        <div class="progress-bar progress-bar-red" style="width: <?php 
        echo $percent;
        ?>
%"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    <?php 
        $rata2 = round(count($arrDevActive) / $numberDays, 2);
        $percent = round($rata2 / $maxActiveDevice * 100);
        ?>

                                    <span class="progress-text">Active Device per Day</span>
                                    <span class="progress-number"><b><?php 
        echo $rata2;
        ?>
</b>/<?php 
        echo $maxActiveDevice;
        ?>
</span>

                                    <div class="progress sm">
                                        <div class="progress-bar progress-bar-yellow" style="width: <?php 
        echo $percent;
        ?>
%"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    <span class="progress-text">Android vs iOS</span>
                                    <span class="progress-number"><b><?php 
        echo $totalanDevType['android'];
        ?>
</b>/<?php 
        echo $totalanDevType['android'] + $totalanDevType['ios'];
        ?>
</span>

                                    <div class="progress sm">
                                        <?php 
        $percent = round($totalanDevType['android'] / ($totalanDevType['android'] + $totalanDevType['ios']) * 100);
        ?>
                                        <div class="progress-bar progress-bar-aqua" style="width: <?php 
        echo $percent;
        ?>
%"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    <span class="progress-text">iOS vs Android</span>
                                    <span class="progress-number"><b><?php 
        echo $totalanDevType['ios'];
        ?>
</b>/<?php 
        echo $totalanDevType['android'] + $totalanDevType['ios'];
        ?>
</span>

                                    <div class="progress sm">
                                        <?php 
        $percent = round($totalanDevType['ios'] / ($totalanDevType['android'] + $totalanDevType['ios']) * 100);
        ?>
                                        <div class="progress-bar progress-bar-green" style="width: <?php 
        echo $percent;
        ?>
%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>

                </div>
        </div>
        <style>
            ul.legend li{
                list-style: none;
                line-height: 30px;
            }
            ul.legend li div{
                float: left;
                margin-top: 10px;
                margin-right: 15px;
            }
            .legend-item{
                float: left;
                margin: 10px;
                line-height: 30px;
                margin-right: 5px;
            }
            .legend-item div{
                float: left;
                margin-top: 10px;
                margin-right: 5px;
            }
            .breadcrumb {
                padding: 8px 15px;
                margin-bottom: 20px;
                list-style: none;
                background-color: #f5f5f5;
                border-radius: 4px;
            }
            .breadcrumb {
                float: right;
                background: transparent;
                margin-top: 0;
                margin-bottom: 0;
                font-size: 12px;
                padding: 7px 5px;
                position: absolute;
                top: 15px;
                right: 10px;
                border-radius: 2px;
            }
        </style>

        <?php 
    }
    function campaign()
    {
        $c = new Charting();
        $c->color = "#dceade";
        $c->label = "enak";
        $c->value = 15;
        $arrData[] = $c;
        $c = new Charting();
        $c->color = "#ff0011";
        $c->label = "ga enak";
        $c->value = 35;
        $arrData[] = $c;
        $c = new Charting();
        $c->color = "#6688aa";
        $c->label = "biasa";
        $c->value = 75;
        $arrData[] = $c;
        ?>
<div class="col-md-6"><?php 
        Charting::morrisDonut("300px", $arrData, 1, "Ini morris", "default");
        ?>
</div>
        <div class="col-md-6"><?php 
        Charting::chartJSPie("300px", $arrData, 50, 1, 1, "Bagan keren");
        ?>
</div><?php 
        //for line and area
        $xLabels = array("Jan", "Feb", "Mar", "April", "May");
        $c = new Charting();
        $c->label = "Shoes";
        $c->data = array(10, 15, 30, 12, 21);
        $c->color = "rgba(255,132,123,0.8)";
        $c->strokeColor = "red";
        $c->fillColor = "pink";
        $c->pointColor = "orange";
        $c->pointHighlightStroke = "blue";
        $c->pointStrokeColor = "black";
        $arrData2[] = $c;
        $c = new Charting();
        $c->label = "Apparel";
        $c->data = array(13, 25, 10, 12, 23);
        $c->color = "rgba(255,243,123,0.8)";
        $c->strokeColor = "green";
        $arrData2[] = $c;
        $c = new Charting();
        $c->label = "Books";
        $c->data = array(11, 15, 16, 13, 33);
        $c->color = "rgba(145,255,255,0.8)";
        $arrData2[] = $c;
        ?>
<div class="col-md-6"><?php 
        Charting::chartJSLine("300px", $xLabels, $arrData2, "false", 1, 1, "data kedua", "info");
        ?>
        </div>
    <style>
        ul.legend li{
           list-style: none;
            line-height: 30px;
        }
        ul.legend li div{
            float: left;
            margin-top: 10px;
            margin-right: 15px;
        }
        .legend-item{
            float: left;
            margin: 10px;
            line-height: 30px;
            margin-right: 20px;
        }
        .legend-item div{
            float: left;
            margin-top: 10px;
            margin-right: 5px;
        }
    </style>
        <div class="col-md-6">
        <?php 
        Charting::chartJSBar("300px", $xLabels, $arrData2, "false", 1, 1, "data terakhir", "danger");
        ?>
</div><?php 
    }