how to use charts in octobercms

OctoberCMS has some third party and own charting library to easily show statistical data in form of charts. It has data-api so we just need to assign data- attribut to display charts.

Let's check it's line chart for now as its used widely and visually appealing.

Line Chart

let's start with basics.

We have scenario where we want to show data values on y-axis based on some time period / labels which are on x-axis.

First we need to prepare our data.

// our data
$chartData = [
    ['label' => '1st Month', 'value' => 10],
    ['label' => '2nd Month', 'value' => 6],
    ['label' => '3rd Month', 'value' => 3],
    ['label' => '4th Month', 'value' => 20],
    ['label' => '6th Month', 'value' => 20],
    ['label' => 'nth Month', 'value' => 15],
];

But before showing this data to chart we need to convert this data into char library friendly data so, let's do it.

// preparing data for chart
$values = $labels = [];
foreach ($chartData as $key => $data) {
    $values[] = [$key, $data['value']];
    $labels[] = [$key, $data['label']];
}

$labelDataInJson = json_encode($labels);
// removing first and last [, ] so it can be valid data for chart
$chartDataInJson = strtr(json_encode($values), ['[[' => '[', ']]' => ']']);

// labels $labelDataInJson
// points $chartDataInJson

Now you just need to use this data in to char data-api

<div class="scoreboard" style="padding: 2rem;padding-top: 0;">
    <h3>Report</h3>
    <div 
        data-control="chart-line" 
        style="height: 200px;width: 100%;"
        data-chart-options='xaxis: {mode: "none", ticks: <?= $labelDataInJson ?>}'
    >
        <span 
            data-chart="dataset" 
            data-set-color="#008dc9" 
            data-set-name="Visits"
            data-set-data='<?= $chartDataInJson ?>'
        </span>
    </div>
</div>

Here you can see in above code data-control="chart-line" will make that div as chart control.

data-chart-options='xaxis: {mode: "none", ticks: <?= $labelDataInJson ?>}' will add labels.

data-set-data='<?= $chartDataInJson ?>' will add our data values.

Everything together

<?php

    // our data
    $chartData = [
        ['label' => '1st Month', 'value' => 10],
        ['label' => '2nd Month', 'value' => 6],
        ['label' => '3rd Month', 'value' => 3],
        ['label' => '4th Month', 'value' => 20],
        ['label' => '6th Month', 'value' => 20],
        ['label' => 'nth Month', 'value' => 15],
    ];

    // preparing data for chart
    $values = $labels = [];
    foreach ($chartData as $key => $data) {
        $values[] = [$key, $data['value']];
        $labels[] = [$key, $data['label']];
    }

    $labelDataInJson = json_encode($labels);
    // removing first and last [, ] so it can be valid data for chart
    $chartDataInJson = strtr(json_encode($values), ['[[' => '[', ']]' => ']']);

?>

<div class="scoreboard" style="padding: 2rem;padding-top: 0;">
    <h3>Report</h3>
    <div 
        data-control="chart-line" 
        data-time-mode="weeks" 
        style="height: 200px;width: 100%;"
        data-chart-options='xaxis: {mode: "none", ticks: <?= $labelDataInJson ?>}'
    >
        <span 
            data-chart="dataset" 
            data-set-color="#008dc9" 
            data-set-name="Visits"
            data-set-data='<?= $chartDataInJson ?>'
        </span>
    </div>
</div>

Final output

further more we will cover new charts next time.