A simple horizontal bar chart with SelectableItem. Can be used to filter and link data to other widgets, as well as receive filters from other widgets. If you want a DATE/TIME column to be the SelectableItem, use another template or change selectvalue to:
|
1 |
selectvalue="{moment($T.row[$P.dr_bars_horizontal_2_col_selectColumn]).toDate().floor('day').toString('yyyy-MM-dd HH:mm:ss')},{new Date(moment($T.row[$P.dr_bars_horizontal_2_col_selectColumn]).toDate().setSeconds(1)).ceil('day').toString('yyyy-MM-dd HH:mm:ss')}" |
Template:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!--DO NOT USE FOR DATE SELECTION. User other Template for that--> <!--SETTINGS--> {#param name=selectColumn value="Ort"} <!--Type in the name of the ID Column: value="name of your id column"--> {#param name=dr_bars_horizontal_2_col_selectColumn value="Ort"} <!--Type in the name of your ID Column: value="name of the id column"--> {#param name=dr_bars_horizontal_2_col_property1 value="Totalsumma"} <!--Type in the name of the Property Column: value="name of the property column"--> {#param name=dr_bars_horizontal_2_col_barcolor value="#2c4985"} <!--Set Bar Color--> {#param name=dr_bars_horizontal_2_col_textcolor1 value="#111111"} <!--Set Text Color for ID Column--> {#param name=dr_bars_horizontal_2_col_textcolor2 value="#ffffff"} <!--Set Text Color for Property Column (text in bars)--> <!--END SETTINGS--> <!--CUSTOMIZE--> {#literal} <style> .dr-bars-horizontal-2-col { padding-top: .5em; } .dr-bars-horizontal-2-col .column { font-size: 1.1em; line-height: 1; } .dr-bars-horizontal-2-col .column-name { box-sizing: border-box; padding-right: .5em; text-align: right; } .dr-bars-horizontal-2-col .column-bar { border: 1px solid hsla(0, 0%, 45%, .3); box-sizing: border-box; padding: .35em 0 .25em .15em; } </style> {#/literal} {#param name=dr_bars_horizontal_2_col_MaxValue value=0} {#foreach $T.rows as row} {#param name=dr_bars_horizontal_2_col_MaxValue value=((($P.dr_bars_horizontal_2_col_MaxValue < $T.row[$P.dr_bars_horizontal_2_col_property1]) && ( $T.row[$P.dr_bars_horizontal_2_col_selectColumn] != "" ) ) ? $T.row[$P.dr_bars_horizontal_2_col_property1] : $P.dr_bars_horizontal_2_col_MaxValue)} {#/for} <div class="dr-bars-horizontal-2-col"> <table class="dr-bars-horizontal-2-col-container"> <tbody> {#foreach $T.rows as row} {#if $T.row[$P.dr_bars_horizontal_2_col_selectColumn] != ""} <tr class="column SelectableItem" selectcolumn="{$P.selectColumn}" selectvalue="{$T.row[$P.dr_bars_horizontal_2_col_selectColumn]}"> <td class="column-name" style="color:{$P["dr_bars_horizontal_2_col_textcolor1"]}">{$T.row[$P.dr_bars_horizontal_2_col_selectColumn].substring(0,20)}</td> <td width="100%"> <div class="column-bar" style="background-color:{$P["dr_bars_horizontal_2_col_barcolor"]}; color:{$P["dr_bars_horizontal_2_col_textcolor2"]}; width: {($T.row[$P.dr_bars_horizontal_2_col_property1] / $P.dr_bars_horizontal_2_col_MaxValue) * 100}%"> {fixAndFormatIfNumber($T.row[$P.dr_bars_horizontal_2_col_property1], 2)} </div> </td> </tr> {#/if} {#/for} </tbody> </table> </div> <!--Author: @digrealtime.com--> <!--Created: 2016-06-21--> <!--Modified: 2016-06-21--> |
Song ¿~ …ArT