4 Replies Latest reply: Aug 24, 2016 4:15 AM by Eric Hannert RSS

    Widget editor adding images

    Eric Hannert

      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

        • Re: Widget editor adding images
          Eric Hannert

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

          • Re: Widget editor adding images
            Eric Hannert

            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