[Widget editor] bar chart with images

    Hi com,

     

    i tried around with the widget editor. So after a lot of trail and error i found out how to display a picture matching to a dimension object in a bar chart.

    This is just a work of a person how starts with Qlik Sense and is trying out some stuff and wants to help others with the same problem.

    So if u have advices or improvements let me know.(sorry for my poor english)

     

    So put every picture into the folder:

    C:\Users\yourusername\Documents\Qlik\Sense\Content\Default

    with the name of the product etc.(dimensionobject name)

     

    use this code in the widget editor and improve and customize it to ur needs.

    Have Fun!!

    --------------------------------------------------------------------------------------

    HTML:

    --------------

    <div style="height:100%;overflow:auto">

    <div class="header"><span>verkauft in filialen</span></div>

    <span>{{data.headers[1].qFallbackTitle}}</span>

     

        <div ng-repeat="row in data.rows" class="row" title="{{row.dimensions[0].qText}}">

                 <div class="bar selectable" style="width:{{row.measures[0].getPercentOfMax()}}%" ng-class="{'selected':row.dimensions[0].selected}" qva-activate="row.dimensions[0].select()">

            <span><img src="http://localhost:4848/content/default/{{row.dimensions[0].qText}}.png" class="pic">  {{row.dimensions[0].qText}}</span>

             </div>

               <div class="per">

                <span class="{{row.measures[0].getPercentOfMax()>95 ? 'over':'' }}">{{row.measures[0].qText}}

                </span>

            </div>

        </div>

    </div>

     

    ------------------------------------------------------------------------------------------- 

    CSS:

    ----------

    .header{

         height: 50px;

         line-height: 50px;

         margin-left: 10px;

         margin-right: 15px;

         margin-bottom: 10px;

         padding-left: 20px;

         box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);

         text-align: center;

         background-color: lightblue;

        

         span {

             font-size: 20pt;

              text-transform: uppercase;

         }

    }

     

    .row {

        transition: all 0.3s ease;

        float: left;

        width: 92%;

        overflow: hidden;

        border: 3px solid #ccc;

        background-color: grey;

        margin-bottom: 2px;

        margin-left:30px;

        border-radius: 9px 9px 20px 9px;

    }

    .bar {

        float: left;

        clear: left;

        height: 30px;

        background-color: lightskyblue;

    }

    .bar span {

        position:relative;

        font-weight: bold;

        margin-left: 5px;

        margin-right: 5px;

        color: grey;

        float:left;

        overflow: hidden;

        text-overflow: ellipsis;

        width: 90%;

        white-space: nowrap;

    }

    .per {

        position: relative;

    }

    .per span {   

        font-weight: bold;

        float: left;

        margin-right: 5px;

        margin-top: 5px;

        margin-left: 5px;

        color: lightskyblue;

    }

    .per span.over {

        position: absolute;

        right: 15px;

        color: grey;

    }

    .pic

    {

        height:30px;

    }