Combo Bar-Line Chart

The above example shows you how to create ComboChart using ChartJs package. In this example, for purpose of chart demonstration only, we do use mock-up data from array. As you can see, the KoolReport's widget in general support dataSource could be DataStore, Process, DataSource or even simple array.

This example shows how to build a combo chart using the type property and specifying the type for each column.

If no type property, type will be bar chart

For example:

...
'columns' => array(
    "month",
    "Dataset 1" => array(
        ...
        "config" => array(
            "type" => "line",
        )
    ),
    "Dataset 2" => array(
        ...
    ),
    "Dataset 3" => array(
        ...
    )
)
...
<?php
require_once "../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run();
?>
<?php
if (isset($_POST['command'])) {
?>
    <div id='report_render'>
        <?php
        $report->render();
        ?>
    </div>
<?php
    exit;
}
?>

<?php
if (isset($_GET)) {
?>
    <div id='report_render'>
        <?php
        $report->render();
        ?>
    </div>
<?php
}
?>


<html>

<head>
    <title>
        Combo Bar-Line Chart
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <br>
    <button id="randomizeData" class="btn">Randomize Data</button>

    <script>
        $(document).ready(function() {
            $('#randomizeData').click(function(e) {
                e.preventDefault();
                $.ajax({
                    type: "POST",
                    url:"run.php",
                    data: {
                        command: 'randomizeData',
                    },
                    success: function(response) {
                        $('#report_render').html(response);
                    }
                })
            })
        })
    </script>
    <div>
        <div id='report_render'>
        </div>
    </div>
</body>

</html>
<?php
class MyReport extends \koolreport\KoolReport
{
    
}
<div id="report_render">
    <?php
    function randomScalingFactor()
    {
        return mt_rand(-100, 100);
    }

    $data = [
        ['month' => 'February',  'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
        ['month' => 'January',   'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
        ['month' => 'March',     'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
        ['month' => 'April',     'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
        ['month' => 'May',       'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
        ['month' => 'June',      'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
        ['month' => 'July',      'Dataset 1' => randomScalingFactor(), 'Dataset 2' => randomScalingFactor(), 'Dataset 3' => randomScalingFactor()],
    ];

    \koolreport\chartjs\ComboChart::create(array(
        'dataSource' => $data,
        'columns' => array(
            "month",
            "Dataset 1" => array(
                "borderWidth" => 2,
                "borderColor" => 'rgb(54, 162, 235)',
                "fill" => false,
                "config" => array(
                    "type" => "line",
                )
            ),
            "Dataset 2" => array(
                "borderWidth" => 2,
                "borderColor" => 'white',
                "backgroundColor" => 'rgb(255, 99, 132)'
            ),
            "Dataset 3" => array(
                "backgroundColor" => 'rgb(75, 192, 192)',
                "borderColor" => 'rgb(75, 192, 192)'
            )
        ),
        "options" => array(
            "responsive" => true,
            "title" => array(
                "display" => true,
                "text" => 'Chart.js Combo Bar Line Chart'
            ),
            "tooltip" => array(
                "mode" => "index",
                "intersect" => true
            )
        )
    ));
    ?>
</div>

What People Are Saying

"KoolReport helps me very much in creating data report for my corporate! Keep up your good work!"
-- Alain Melsens

"The first use of your product. I was impressed by its easiness and powerfulness. This product is a great and amazing."
-- Dr. Lew Choy Onn

"Fantastic framework for reporting!"
-- Greg Schneider

Download KoolReport Get KoolReport Pro