koolreport datatables add progress bar along with text

ankit raj commented on Nov 7, 2020

Hi , i need to put a progress bar along with text in a datatable because i need sortability and pagination and other stuff. How do i achieve it?

Sebastian Morales commented on Nov 9, 2020

Ankit, you could try DataTables' "formatValue" property like in this example:

https://www.koolreport.com/examples/reports/sparklines/datatables_sparklines/

DataTables::create(array(
        "columns"=>array(
            'SparkBar' => [
                'formatValue' => function($val, $row) {
                    $data = [$row['Q 1'], $row['Q 2'], 
                        $row['Q 3'], $row['Q 4']];
                    return sparklines\Bar::create(array(
                        "data" => $data,
                    ));
                }
            ],

But instead of sparklines' chart, use html5's progress tag:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

ankit raj commented on Nov 10, 2020

Thanks , i was able to get the graph , but the sorting is happening incorrect for negative values, any work around for that?

-2 is coming before -6 in ascending order , this is the code:

"columns"=>[

            $name=>[
              "footerText"=>"Total"
            ],
            "Serial Count"=>[
                'formatValue'=>function($value,$row){
            $neg_pos = abs($value);
            $text_label = '<span>'.$value.'&nbsp;</span>';
            if($value < 0) {
                return $text_label . '<div class="progress" style="display:inline-flex;height:6px;width:90%;flex-direction: row-reverse">
   <div class="progress-bar" style="width:' . $neg_pos . '%;background-color:red;"></div>

</div>';

            }
        else{
            return $text_label.'<div class="progress" style="display:inline-flex;height:6px;width:90%;">
<div class="progress-bar" style="width:'.$value.'%"></div>

</div>';

        }
        }

ankit raj commented on Nov 10, 2020

Thanks , i was able to get the graph , but the sorting is happening incorrect for negative values, any work around for that?

-2 is coming before -6 in ascending order , this is the code:

"columns"=>[

            $name=>[
              "footerText"=>"Total"
            ],
            "Serial Count"=>[
                'formatValue'=>function($value,$row){
            $neg_pos = abs($value);
            $text_label = '<span>'.$value.'&nbsp;</span>';
            if($value < 0) {
                return $text_label . '<div class="progress" style="display:inline-flex;height:6px;width:90%;flex-direction: row-reverse">
   <div class="progress-bar" style="width:' . $neg_pos . '%;background-color:red;"></div>

</div>';

            }
        else{
            return $text_label.'<div class="progress" style="display:inline-flex;height:6px;width:90%;">
<div class="progress-bar" style="width:'.$value.'%"></div>

</div>';

        }
        }

Sebastian Morales commented on Nov 11, 2020

Ankit, please try to change the column meta's type to "number" before saving to your datastore.

KoolReport's Forum

Koolreport datatables add progress bar along with text #1701

Build Your Excellent Data Report