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.
Related Questions
- → OctoberCMS Backend Loging Hash Error
- → "failed to open stream" error when executing "migrate:make"
- → OctoberCMS - How to make collapsible list default to active only on non-mobile
- → Create plugin that makes objects from model in back-end
- → October CMS Plugin Routes.php not registering
- → OctoberCMS Migrate Table
- → How to install console for plugin development in October CMS
- → OctoberCMS Rain User plugin not working or redirecting
- → October CMS Custom Mail Layout
- → October CMS - How to correctly route
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → October CMS - Conditionally Load a Different Page
- → How to disable assets combining on development in OctoberCMS