11 Replies Latest reply: Aug 18, 2016 8:54 AM by Eric Hannert RSS

    create selectable bar chart in widget editor

    Eric Hannert

      hi com,

       

      how can i add the functionality to select a bar (country)  in a bar chart.

      I already build the bar chart in the editor, but i dont found anything that teaches me how to add the possiblity of interaction.

       

      thx in advance.

        • Re: create selectable bar chart in widget editor
          Elena Isupova

          Hi Eric,

           

          If you have dimension in your Bar-Chart "Country", then you can click on Done button and click on the corresponding bar. It will provide the selection due to bar chosen.

           

          Elena

          • Re: create selectable bar chart in widget editor
            Miguel Braga

            Hey there,

             

            All Bar Charts in my humble opinion are selectable. Just pick a country as you wish, and/or use the lasso when making selection and/or drag a line to select the Y values, like this:

             

            1) Selecting normally:

            Accept it and make it look like this:

            2) Using lasso...

             

            3) Using dragging...

             

            Hope this solves your question

             

            Regards,

            MB

              • Re: create selectable bar chart in widget editor
                Eric Hannert

                with the widget editor i created my own bar chart. I know how to select a standart Bar chart.

                But i made a new one with widget editor with another appearance to test some.

                And when i drag and drop my own chart into qlik sense there is no way of selecting anything.

                Cause i dont implemented this!!!!

                  • Re: create selectable bar chart in widget editor
                    Miguel Braga

                    Hi again,

                     

                    Can you share a screenshot or a sample code?

                     

                    Regards,

                    MB

                      • Re: create selectable bar chart in widget editor
                        Eric Hannert

                        here u see the chart with the standart barchart:

                         

                        2.PNG

                        and now what I did

                        1.PNG

                        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" style="width:{{row.measures[0].getPercentOfMax()}}%">

                                <span>{{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 -10px rgba(0,0,0,0.75);

                        text-align: center;

                        background-color: red;

                        span {

                        font-size: 20pt;

                        text-transform: uppercase;

                        }

                        }

                        @barColor: #5f5f5f;

                        .row {        //hauptbalken

                            transition: all 0.3s ease;

                            float: left;

                            width: 98%;

                            overflow: hidden;

                            border: 3px solid #ccc;

                            background-color: grey;

                            margin-bottom: 2px;

                            border-radius: 0px 9px 5px 0px;

                         

                        }

                        .bar {    //balken

                            float: left;

                            clear: left;

                            height: 30px;

                            background-color: yellowgreen;

                        }

                        .bar span {    //text filiale

                            font-weight: bold;

                            float: left;

                            margin-left: 5px;

                            margin-right: 5px;

                            margin-top: 7px;

                            color: #f0f0f0;

                            overflow: hidden;

                            text-overflow: ellipsis;

                            width: 90%;

                            white-space: nowrap;

                        }

                        .per {

                            position: relative;    //wert hinter inner balken

                        }

                        .per span {        //wert posi

                            font-weight: bold;

                            float: left;

                            margin-right: 5px;

                            margin-top: 5px;

                            margin-left: 5px;

                        }

                        .per span.over {    //wert im balken

                            position: absolute;

                            right: 15px;

                            color: #f0f0f0;

                        }