Amount

dataviz

Show amount.

Example
45%
HTML code
<DIV data-total='100' class="amount amount--single">
    <DIV data-value='40' class="amount__bar" style="width:40%">45%</DIV>
</DIV>
Type atom
Group dataviz
More examples

Count total from bars

If no total is given, total is counted from bar values.

214
879
1200

Use amount as value

If value is not given, uses 1.

Kalle
Tuomas
Antti

Link and tooltip

Tooltip and link or onclick -event on bar.

Click me!
click me too!

PHP

Wrapper to use element through PHP

Extends eUiElementProgress
Render html
Create arguments total, value, title, color
Methods
Method name Description
addBar(value, title, color) Add new bar element. First argument may also be an assoc array.
addBars(array) Add multiple bars.
Code example

Parameters as arguments

$this->get('ui', 'amount', 100, 45, 'Loading...', 'orange');

Parameters as array

// Parameter array
$this->get('ui', 'amount', Array(
  'total'   => 100,
  'value'   => 45,
  'title'   => 'Loading...',
  'color'   => 'orange'
));

Multiple bars

$this->get('ui', 'amount', Array(
  'total'   => 100,
  'size'    => 'large',
  'style'   => 'round',
  'color'   => 'red', // bar default
  ))
  ->addBar(25, 'First', 'blue')
  ->addBar( Array(
     'value'    => 25,
     'title'    => 'Second',
     'color'    => 'green',
     'link'     => 'table/customer',
     'onclick'  => "alert('Clicked!')",
     'tooltip'  => 'Tooltip text'
  ));

Multiple bars as array

$this->get('ui', 'amount', Array(
  'total'   => 100,
  'size'    => 'large',
  'style'   => 'round',
  'color'   => 'red',
  'bars'    => Array(
    Array(
      'value' => 25,
      'title' => 'First'
      'color' => 'blue'
    ),
    Array(
     'start'    => 10, // offset
     'value'    => 25,
     'title'    => 'Second',
     'color'    => 'green',
     'link'     => 'table/customer',
     'onclick'  => "javascriptFunction('var')",
     'tooltip'  => 'Tooltip text'
   )
));

Javascript

Wrapper to use element through Javascript

Code example

Single value

var $Amount = cms.get('ui','amount',{
    value:          '60',
    maxValue:       '100',
    color:          'danger',
    size:           'large',
    title:          'Something',
    description:    'More info'
});

Multiple values

If maxValue is not given, uses bar total

var $Amount = cms.get('ui','amount',{
    unit:     'h',
    size:     'large'
});

$Amount.addBar({
    value: '2',
    title: 'Tekemättä',
    description: 'Kuinka monta vielä tekemättä',
    color: 'danger'
});

$Amount.addBar({
    value: '2',
    title: 'Työnalla',
    description: 'Näitä tehdään parhaillaan',
    color: 'warning'
});

$Amount.addBar({
    value: '4',
    title: 'Tehty',
    description: 'Tehty',
    color: 'success'
});

Styles

Elements Css style

single
Single
Only one bar (is added automaticly)
jumbo
Jumbo
large
Large
normal
Normal
small
Small
mini
Mini
violet
Violet
purple
Purple
indigo
Indigo
blue
Blue
azure
Azure
cyan
Cyan
teal
Teal
darkgreen
Darkgreen
green
Green
lime
Lime
yellow
Yellow
amber
Amber
orange
Orange
darkorange
Darkorange
red
Red
pink
Pink
brown
Brown
white
White
lightgray
Lightgray
gray
Gray
darkgray
Darkgray
black
Black
success
Success
warning
Warning
danger
Danger
error
Error
info
Info
muted
Muted
selected
Selected
save
Save
delete
Delete
load
Load
cancel
Cancel