UPDATE-RATE

Die Test-Installation wird aktuell zwischen 8:00 und 18:00 Uhr stündlich zur vollen Stunde aktualisiert.
Alles neu macht der Mai

ILIAS 9 ist da! Alle Infos zu den Highlights der neuen Version gibt es hier!

Documentation

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

Horizontal

Description

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

Rivals

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

Example 1: Base

Dataset
  • Item 1: 3
  • Item 2: 1.5
  • Item 3: 0
  • Item 4: 2.8
  • Item 5: -2
  • Item 6: 2.2
  • Item 7: 1
  • Item 8: -1.75
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Chart\Bar\Horizontal;
 
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" => 3]);
    $dataset = $dataset->withPoint("Item 2", ["Dataset" => 1.5]);
    $dataset = $dataset->withPoint("Item 3", ["Dataset" => 0]);
    $dataset = $dataset->withPoint("Item 4", ["Dataset" => 2.8]);
    $dataset = $dataset->withPoint("Item 5", ["Dataset" => -2]);
    $dataset = $dataset->withPoint("Item 6", ["Dataset" => 2.2]);
    $dataset = $dataset->withPoint("Item 7", ["Dataset" => 1]);
    $dataset = $dataset->withPoint("Item 8", ["Dataset" => -1.75]);
 
    //Generating and rendering the horizontal chart
    $bar_chart = $f->chart()->bar()->horizontal(
        "A horizontal bar chart",
        $dataset
    );
 
    // render
    return $renderer->render($bar_chart);
}
 

Example 2: Custom

Target
  • Item 1: low
  • Item 2: high
  • Item 3: high
  • Item 4: medium
  • Item 5: high
  • Item 6: -
Dataset 1
  • Item 1: low
  • Item 2: low
  • Item 3: 0
  • Item 4: medium
  • Item 5: low
  • Item 6: 0
Dataset 2
  • Item 1: 0
  • Item 2: high
  • Item 3: low
  • Item 4: -
  • Item 5: low
  • Item 6: high
Dataset 3
  • Item 1: Custom 1
  • Item 2: Custom 2
  • Item 3: Custom 3
  • Item 4: Custom 4
  • Item 5: Custom 5
  • Item 6: Custom 6
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Chart\Bar\Horizontal;
 
use ILIAS\UI\Component\Chart\Bar\Bar;
use ILIAS\UI\Component\Chart\Bar\BarConfig;
use ILIAS\UI\Component\Chart\Bar\XAxis;
 
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(["", "low", "medium", "high"]);
    $r_dimension = $df->dimension()->range($c_dimension);
 
    //Generating Dataset with points and tooltips
    $dataset = $df->dataset([
        "Target" => $r_dimension,
        "Dataset 1" => $c_dimension,
        "Dataset 2" => $c_dimension,
        "Dataset 3" => $c_dimension,
    ]);
 
    $dataset = $dataset->withPoint(
        "Item 1",
        [
            "Target" => [0.99, 1.01],
            "Dataset 1" => 1,
            "Dataset 2" => 0,
            "Dataset 3" => 1
        ]
    );
    $dataset = $dataset->withPoint(
        "Item 2",
        [
            "Target" => [2.99, 3.01],
            "Dataset 1" => 1,
            "Dataset 2" => 3,
            "Dataset 3" => 1.5
        ]
    );
    $dataset = $dataset->withPoint(
        "Item 3",
        [
            "Target" => [2.99, 3.01],
            "Dataset 1" => 0,
            "Dataset 2" => 1,
            "Dataset 3" => 0.75
        ]
    );
    $dataset = $dataset->withPoint(
        "Item 4",
        [
            "Target" => [1.99, 2.01],
            "Dataset 1" => 2,
            "Dataset 2" => null,
            "Dataset 3" => 2.5
        ]
    );
    $dataset = $dataset->withPoint(
        "Item 5",
        [
            "Target" => [2.99, 3.01],
            "Dataset 1" => 1,
            "Dataset 2" => 1,
            "Dataset 3" => 1.8
        ]
    );
    $dataset = $dataset->withPoint(
        "Item 6",
        [
            "Target" => [0, 0.01],
            "Dataset 1" => 0,
            "Dataset 2" => 3,
            "Dataset 3" => 0.2
        ]
    );
 
    $dataset = $dataset->withAlternativeInformation(
        "Item 1",
        [
            "Target" => "low",
            "Dataset 1" => null,
            "Dataset 2" => null,
            "Dataset 3" => "Custom 1"
        ]
    );
    $dataset = $dataset->withAlternativeInformation(
        "Item 2",
        [
            "Target" => "high",
            "Dataset 1" => null,
            "Dataset 2" => null,
            "Dataset 3" => "Custom 2"
        ]
    );
    $dataset = $dataset->withAlternativeInformation(
        "Item 3",
        [
            "Target" => "high",
            "Dataset 1" => null,
            "Dataset 2" => null,
            "Dataset 3" => "Custom 3"
        ]
    );
    $dataset = $dataset->withAlternativeInformation(
        "Item 4",
        [
            "Target" => "medium",
            "Dataset 1" => null,
            "Dataset 2" => null,
            "Dataset 3" => "Custom 4"
        ]
    );
    $dataset = $dataset->withAlternativeInformation(
        "Item 5",
        [
            "Target" => "high",
            "Dataset 1" => null,
            "Dataset 2" => null,
            "Dataset 3" => "Custom 5"
        ]
    );
    $dataset = $dataset->withAlternativeInformation(
        "Item 6",
        [
            "Target" => "-",
            "Dataset 1" => null,
            "Dataset 2" => null,
            "Dataset 3" => "Custom 6"
        ]
    );
 
    //Generating Bar Configurations
    $b1 = new BarConfig();
    $b1 = $b1->withRelativeWidth(1.1);
    $b1 = $b1->withColor($df->color("#000000"));
    $b2 = new BarConfig();
    $b2 = $b2->withRelativeWidth(0.6);
    $b2 = $b2->withColor($df->color("#d38000"));
    $b3 = new BarConfig();
    $b3 = $b3->withRelativeWidth(0.6);
    $b3 = $b3->withColor($df->color("#307C88"));
    $b4 = new BarConfig();
    $b4 = $b4->withRelativeWidth(0.6);
    $b4 = $b4->withColor($df->color("#557b2e"));
 
    $bars = [
        "Target" => $b1,
        "Dataset 1" => $b2,
        "Dataset 2" => $b3,
        "Dataset 3" => $b4
    ];
 
    //Generating and rendering the horizontal chart
    $bar_chart = $f->chart()->bar()->horizontal(
        "A horizontal bar chart",
        $dataset,
        $bars
    );
    $bar_chart = $bar_chart->withTitleVisible(false);
    $x_axis = new XAxis();
    $x_axis = $x_axis->withMinValue(0);
    $x_axis = $x_axis->withMaxValue(3);
    $bar_chart = $bar_chart->withCustomXAxis($x_axis);
 
    // render
    return $renderer->render($bar_chart);
}
 

Relations

Parents
  1. UIComponent
  2. Chart
  3. Bar