[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:


    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!!




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

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



        <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 class="per">

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










         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;


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


    .bar {

        float: left;

        clear: left;

        height: 30px;

        background-color: lightskyblue;


    .bar span {


        font-weight: bold;

        margin-left: 5px;

        margin-right: 5px;

        color: grey;


        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;