Widget editor adding images

[#1]

hi com,

i just tried out the widget editor. I created a barchart and now i wanted to add a picture into every bar.

That was quite easy, but when i link to a pic there is just nothing in the dashboard(sense), but in the widget editor there is the symbol for no image. But when i link to no image i have the no image symbol in both widget editor and dashboard(sense).

Does someone was an example for that!

Thx for help in advance

[#2]

so the src link is :

<img src="http://localhost:4848/content/default/...>

now the question is how to get the picture to each object in a measure

But the problem is i dont know how to seperate the path and the var

default/(separation)row.dimensions[0].qText(separation).png

hope u can help!!

[Anonymous]

Maybe you could put the images at your widget folder.

[#4]

Hi,

i tried this but i dont got it to work. So i put the image into the content default folder that is already there and linked to it.

[#5 · Accepted solution]

So,

i now i found a way to display Dimension-Images in a bar chart with the Widget editor.

so first just build a chart like u want it to be.

Put all ur Images into the folder : C:\Users\Username\Documents\Qlik\Sense\Content\Default

and name the images with the matching Object(for example product "a" for picture with a on it)

In ur HTML of ur chart put

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

into the .bar span

so ur code maybe will look like

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:

.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;

    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;

}

Have fun with it