Amount
dataviz
Show amount.
dataviz
Show amount.
Example | |
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 barsIf no total is given, total is counted from bar values. Use amount as valueIf value is not given, uses 1. Link and tooltipTooltip and link or onclick -event on bar. |
Wrapper to use element through PHP
Extends | eUiElementProgress | ||||||
Render | html | ||||||
Create arguments | total, value, title, color | ||||||
Methods |
|
||||||
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' ) )); |
Wrapper to use element through Javascript
Code example | Single valuevar $Amount = cms.get('ui','amount',{ value: '60', maxValue: '100', color: 'danger', size: 'large', title: 'Something', description: 'More info' }); Multiple valuesIf 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' }); |
Elements Css style
single | Only one bar (is added automaticly) |
jumbo | |
large | |
normal | |
small | |
mini | |
violet | |
purple | |
indigo | |
blue | |
azure | |
cyan | |
teal | |
darkgreen | |
green | |
lime | |
yellow | |
amber | |
orange | |
darkorange | |
red | |
pink | |
brown | |
white | |
lightgray | |
gray | |
darkgray | |
black | |
success | |
warning | |
danger | |
error | |
info | |
muted | |
selected | |
save | |
delete | |
load | |
cancel |