Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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
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
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!!
Maybe you could put the images at your widget folder.
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.
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