alxy / charts-plugin

Provides charts and scoreboard functionalities for OctoberCMS.

Charts plugin

Provides charts and scoreboard functionalities for OctoberCMS.

Available widgets

Pie chart

$pieChart = new PieChart($this);
$pieChart->data = [
    ['label' => 'Label 1', 'value' => 100], 
    ['label' => 'Label 2', 'value' => 200], 
    ['label' => 'Label 3', 'value' => 300],
    ['label' => 'Label 4', 'value' => 400]
];
$pieChart->cssClasses = ['scoreboard-item'];
$pieChart->bindToController();

Bar chart

$barChart = new BarChart($this);
$barChart->data = [
    ['label' => 'Label 1', 'value' => 100], 
    ['label' => 'Label 2', 'value' => 200], 
    ['label' => 'Label 3', 'value' => 300]
];
$barChart->cssClasses = ['scoreboard-item'];
$barChart->bindToController();

Line chart

$lineChart = new LineChart($this);
$lineChart->data = [
    ['x' => 1477857082000, 'y' => 400], 
    ['x' => 1477943482000, 'y' => 380], 
    ['x' => 1478029882000, 'y' => 300]
];
$lineChart->xAxisOptions = [
    'mode' => 'time'
];
$lineChart->cssClasses = ['scoreboard-item', 'w-300'];
$lineChart->bindToController();

Title value

$titleValue = new TitleValue($this);
$titleValue->title = 'Comments';
$titleValue->value = 12;
$titleValue->previousValue = 20;
$titleValue->showTrend = true;
$titleValue->cssClasses = ['scoreboard-item'];
$titleValue->bindToController();

Goal meter

$goalMeter = new GoalMeter($this);
$goalMeter->title = 'Goal meter';
$goalMeter->value = 12;
$goalMeter->goal = 20;
$goalMeter->cssClasses = ['scoreboard-item'];
$goalMeter->bindToController();

Scoreboard

This is a meta widget that can be used as a container for multiple chart widgets. It integrates nicely with the default list markup.

$charts = [
    'piechart' => [
        'data' => [
            ['label' => 'Label 1', 'value' => 100], 
            ['label' => 'Label 2', 'value' => 200], 
            ['label' => 'Label 3', 'value' => 300]
        ],
        'type' => 'piechart'
    ],
    'barchart' => [
        'data' => [
            ['label' => 'Label 1', 'value' => 100], 
            ['label' => 'Label 2', 'value' => 200], 
            ['label' => 'Label 3', 'value' => 300]
        ],
        'type' => 'barchart'
    ],
    'titlevalue' => [
        'title' => 'Comments',
        'value' => 12,
        'previousValue' => 20,
        'showTrend' => true,
        'type' => 'titlevalue'
    ]
];
$scoreboard = new ScoreBoard($this);
$scoreboard->charts = $charts;
$scoreboard->bindToController();

Render the widget

Once bound to the controller, the widget can be rendered from a controller partial using the $widget property as the alias of the widget. In the examkple below we rely on the default aliases, however, they can be changed as liked.

<div class="scoreboard">
    <div data-control="toolbar">
        <?= $this->widget->pieChart->render() ?>

        <?= $this->widget->barChart->render() ?>

        <?= $this->widget->lineChart->render() ?>

        <?= $this->widget->titleValue->render() ?>

        <?= $this->widget->goalMeter->render() ?>
    </div>
</div>

Behaviors

For easy integration with a controller, a behavior is provided that can be configured by a YAML configuration file.