Qlik Community

Qlik Sense Documents

Documents about Qlik Sense.

Announcements
Coming your way, the Qlik Data Revolution Virtual Summit. October 27-29. REGISTER

[Widget editor] bar chart with images

Not applicable

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

}

Comments
Not applicable

hi,

the image source could be: src="../Content/Default/<filename>.jpg"

thanks,

tai.

0 Likes
Contributor
Contributor

is it possible to build this widget chart vertical?

0 Likes
Not applicable

sorry i was on vac.

i think it is possible but im not that into programming atm so i cant give u a direct solution.

0 Likes

Hello, I am trying to club text and Image at a time. Can you send the exact path to write in

When i am trying to get data from My path -- C:\Users\UserName\Documents\Qlik\Sense\Content\Default. It showing blur image

I had HTML this

<img src="C:\Users\UserName\Documents\Qlik\Sense\Content\Default\Desert.jpg">

Can you let me know how to change the IMG tag path in Qliksense? Anyone can help

0 Likes
Version history
Revision #:
1 of 1
Last update:
‎2016-08-24 04:30 AM
Updated by: