Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Vertical

Description

Purpose: Vertical Bar Charts work well with visualizing statistics with rather many value labels and rather few meassurement items.
Composition: Vertical Bar Charts have one x-axis, which shows the messeaurement item labels and one y-axis, which shows the value labels. By default, value labels are numerical, but can be customized to be textual. The bars in Vertical Bar Charts run from the bottom up for positive values and from top to bottom for negative values.

Rivals

Horizontal Bar Charts: Horizontal Bar Charts work well with visualizing statistics with rather few value labels and rather many meassurement items.

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Chart\Bar\Vertical;
 
function base()
{
    //Loading factories
    global $DIC;
    $f = $DIC->ui()->factory();
    $df = new \ILIAS\Data\Factory();
    $renderer = $DIC->ui()->renderer();
 
    //Generating Dimensions
    $c_dimension = $df->dimension()->cardinal();
 
    //Generating Dataset with points
    $dataset = $df->dataset(["Dataset" => $c_dimension]);
 
    $dataset = $dataset->withPoint("Item 1", ["Dataset" => 80]);
    $dataset = $dataset->withPoint("Item 2", ["Dataset" => 0]);
    $dataset = $dataset->withPoint("Item 3", ["Dataset" => 18]);
    $dataset = $dataset->withPoint("Item 4", ["Dataset" => 55]);
 
    //Generating and rendering the vertical chart
    $bar_chart = $f->chart()->bar()->vertical(
        "A vertical bar chart",
        $dataset
    );
 
    // render
    return $renderer->render($bar_chart);
}

Example 2: Custom

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Chart\Bar\Vertical;
 
use ILIAS\UI\Component\Chart\Bar\Bar;
use ILIAS\UI\Component\Chart\Bar\BarConfig;
use ILIAS\UI\Component\Chart\Bar\YAxis;
 
function custom()
{
    //Loading factories
    global $DIC;
    $f = $DIC->ui()->factory();
    $df = new \ILIAS\Data\Factory();
    $renderer = $DIC->ui()->renderer();
 
    //Generating Dimensions
    $c_dimension = $df->dimension()->cardinal();
 
    //Generating Dataset with points and tooltips
    $dataset = $df->dataset([
       "Dataset 1" => $c_dimension,
        "Dataset 2" => $c_dimension,
        "Dataset 3" => $c_dimension,
    ]);
 
    $dataset = $dataset->withPoint(
        "Item 1",
        [
            "Dataset 1" => 75,
            "Dataset 2" => 80,
            "Dataset 3" => 100
        ]
    );
    $dataset = $dataset->withPoint(
        "Item 2",
        [
            "Dataset 1" => 45,
            "Dataset 2" => 30,
            "Dataset 3" => 90
        ]
    );
    $dataset = $dataset->withPoint(
        "Item 3",
        [
            "Dataset 1" => 50,
            "Dataset 2" => 100,
            "Dataset 3" => 65.5
        ]
    );
 
    //Generating Bar Configurations
    $b1 = new BarConfig();
    $b1 = $b1->withColor($df->color("#d38000"));
    $b2 = new BarConfig();
    $b2 = $b2->withColor($df->color("#307C88"));
    $b3 = new BarConfig();
    $b3 = $b3->withColor($df->color("#557b2e"));
 
    $bars = [
        "Dataset 1" => $b1,
        "Dataset 2" => $b2,
        "Dataset 3" => $b3
    ];
 
    //Generating and rendering the vertical chart
    $bar = $f->chart()->bar()->vertical(
        "A vertical bar chart",
        $dataset,
        $bars
    );
    $bar = $bar->withTitleVisible(false);
    $bar = $bar->withLegendPosition("left");
    $y_axis = new YAxis();
    $y_axis = $y_axis->withPosition("right");
    $y_axis = $y_axis->withStepSize(10);
    $y_axis = $y_axis->withBeginAtZero(false);
    $bar = $bar->withCustomYAxis($y_axis);
 
    // render
    return $renderer->render($bar);
}

Relations

Parents

UIComponent
Chart
Bar