    <div class="row">
         <!---Modal For Event-->
         <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">Events Data</h4>
                    </div>
                    <div class="modal-body">
                            <table class="table table-striped">
                                    <thead>
                                    <tr>
                                       <th scope="col">Event Name</th>
                                       <th scope="col">Number Of Events</th>
                                    </tr>
                                  </thead>
                                  <tbody id="event-tbody"> 
                                  </tbody>
                                </table>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                  </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->    
    
    
                <!---Modal For DrillDownEvent-Attribute -->
                <div class="modal fade" id="myattrModal">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                              <h4 class="modal-title">Drill Down Events Data</h4>
                            </div>
                            <div class="modal-body">
                                    <table class="table table-striped">
                                            <thead>
                                            <tr>
                                               <th scope="col">Event Name</th>
                                               <th scope="col">Number Of Events</th>
                                            </tr>
                                          </thead>
                                          <tbody id="eventattr-tbody"> 
                                          </tbody>
                                        </table>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                            </div>
                          </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                        </div><!-- /.modal -->    

<!--Popup Model for downloading Attributes -->
<div class="modal fade" id="modalDownloadPopup">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Select Attributes for Download </h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped" id="attrTable">

                    <thead>
                        <tr>
                            <td>
                                <input type="checkbox" id="toggle_chk">&nbsp;&nbsp;&nbsp;
                                <label> Select All</label><br>
                            </td>
                        </tr>

                    </thead>
                    <thead>
                        <tr>
                            <th scope="col">Attribute Name</th>
                        </tr>
                    </thead>

                    <tbody id="ddlEventattrList">

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal"
                    id="attrdownloadLink">Download</button>
            </div>
        </div>
    </div>
</div>
<!-- End model for Downloading attributes -->

<!-- PopUp FOR EVENT WITH NO ATTRIBUTES -->

<div id="noattrwarning" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">No attribute found for the selected event.</h5>
            </div>
            <div class="modal-body">
                <p>Please use the Events download section to download Events data</p>

                <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>

            </div>
        </div>
    </div>
</div>

<!--END PopUp FOR EVENT WITH No ATTRIBUTES -->

        <div class="panel-body">
            <div class="col-md-6">
                <h5>What Do Users Do</h5>
                <h5 ng-if="message != ''">{{message}}</h5>
            </div>
            <div class="col-md-6" style="margin-top: 15px;">
                <form class="form-inline pull-right">
                    <div>
                        <div class="form-group m-r-10">
                            <label class="col-md-3 control-label">Events</label>
                        </div>
                        <div class="form-group m-r-10">
                            <select id="ddlEventList" multiple="multiple" style="width:200px;height:35px;">

                            </select>
                        </div>
                        <div class="form-group m-r-10">
                            <a class="btn btn-primary m-r-5" id="downloadLink">Download</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-10">
            <canvas id="topEventsChart" height="100" width="150"></canvas>
            <div id="chartjs-tooltip"></div>

        </div>
        <div class="col-md-2" style="overflow-y:scroll; overflow-x:hidden; height:450px;" ng-if="topGraphEvents">
            <div ng-repeat="stack in topGraphEvents | orderBy:'-value'" ng-click="selectedSpecificEvent(stack);">
                <div class="div_5f93_4" ng-if="stack.selected==true"
                    style="float: left;padding: 5px 3px;font-size: 18px;"><i
                        class="icon-submenu lnr lnr-checkmark-circle" style="color:#348fe2;"></i></div>
                <div class="div_5f93_4" ng-if="stack.selected==false"
                    style="float: left;padding: 5px 3px;font-size: 18px;"><i
                        class="icon-submenu lnr lnr-checkmark-circle"></i></div>
                <div class="weekly-summaryX text-rightX div_5f93_5" width="80%"
                    style="padding:5px 3px; border-bottom:3px solid {{stack.backgroundColor}};">
                    <div class="info-label div_5f93_6" align="left" style="margin-top: 2px;word-wrap: break-word"
                        width="100%">{{stack.label}}</div>
                    <div class="info-label div_5f93_7" align="right" width="100%"><strong>{{stack.value}}</strong></div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div id="divController">
            <div class="panel panel-primary" ng-show="drillDown">
                <div class="panel-heading">
                                                        <!-- BUTTON FOR DOWNLOAD POPUP -->
                    <button class="pull-right btn btn-white" data-toggle="modal" id="popupBtn" style="position: relative;
                        top: -2px; padding-top: 1px; padding-bottom:1px ;">Download Details</button>
                    <div class="btn-group pull-right" ng-show="isCEventAttribute">
                        <button type="button" id="swiu2"
                            class="btn btn-white btn-xs">{{selectedCEventAttribute}}</button>
                        <button aria-expanded="false" type="button" class="btn btn-white btn-xs dropdown-toggle"
                            data-toggle="dropdown" style="margin-right: 10px;">
                            <span class="caret"></span>
                        </button>

                        <ul class="dropdown-menu" role="menu" style=" height: 300px; overflow: auto; width: 200px;"
                            ng-if="cList.length > 10">
                            <li ng-repeat="attr in cList" ng-if="attr.type=='string'">
                                <a href ng-click="showCAttributeStats(attr.name)">{{attr.name}}</a>
                            </li>
                        </ul>
                        <ul class="dropdown-menu" role="menu" ng-if="cList.length <= 10">
                            <li ng-repeat="attr in cList" ng-if="attr.type=='string'">
                                <a href ng-click="showCAttributeStats(attr.name)">{{attr.name}}</a>
                            </li>
                        </ul>

                    </div>
                    <div class="btn-group pull-right">
                        <button type="button" id="swiu1" class="btn btn-white btn-xs"
                            style="text-transform: capitalize;">{{selectedEventAttribute}}</button>
                        <button aria-expanded="false" type="button" class="btn btn-white btn-xs dropdown-toggle"
                            data-toggle="dropdown" style="margin-right: 10px;">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" ng-if="eventList.length > 10"
                            style=" height: 300px; overflow: auto; width: 200px;">
                            <li ng-repeat="attr in eventAttributeList" ng-if="attr.type=='string'">
                                <a href ng-click="showAttributeStats(attr.name, attr.cname)"
                                    style="text-transform: capitalize;">{{attr.name}}</a>
                            </li>
                        </ul>
                        <ul class="dropdown-menu" role="menu" ng-if="eventList.length <= 10">
                            <li id="noAttrs" style="color: black;text-align: center;">No Attributes Found</li>
                            <li ng-repeat="attr in eventAttributeList" ng-if="attr.type=='string'">
                                <a href ng-click="showAttributeStats(attr.name, attr.cname)"
                                    style="text-transform: capitalize;">{{attr.name}}</a>
                            </li>
                        </ul>

                    </div>
                   <!-- start pull right for Event in Drill down Section -->
                    <div class="btn-group pull-right">
                        <button type="button" id="swiu" class="btn btn-white btn-xs"
                            style="text-transform: capitalize;">{{selectedEvent}}</button>
                        <button aria-expanded="false" type="button" class="btn btn-white btn-xs dropdown-toggle"
                            data-toggle="dropdown" style="margin-right: 10px;">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu " role="menu" ng-if="eventList.length > 10"
                            style=" height: 300px; overflow: auto; width: 200px;">
                            <li ng-repeat="evt in eventList">
                                <a style="text-transform: capitalize;" href
                                    ng-click="populateEventAttributes(evt.event)"
                                    ng-if="evt.event != '_App_Stop' &&  evt.event != '_App_Start'">{{evt.event}}</a>
                            </li>
                        </ul>
                        <ul class="dropdown-menu " role="menu" ng-if="eventList.length <= 10">
                            <li ng-repeat="evt in eventList">
                                <a style="text-transform: capitalize;" href
                                    ng-click="populateEventAttributes(evt.event)"
                                    ng-if="evt.event != '_App_Stop' &&  evt.event != '_App_Start'">{{evt.event}}</a>
                            </li>
                        </ul>


                    </div>
                    <!-- end pull right for Event in Drill down Section -->

                    <!-- start pull right for select a journey dropdown -->
                    <div class="btn-group pull-right"  ng-show="journeyKey == true">
                        <button type="button" id="journeyType" class="btn btn-white btn-xs"
                            style="text-transform: capitalize;">{{selectedJourneyType}}</button>
                        <button aria-expanded="false" type="button" class="btn btn-white btn-xs dropdown-toggle" data-toggle="dropdown"
                            style="margin-right: 10px;">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu " role="menu" style=" height: auto; overflow: auto; width: 200px;">
                            <li ng-repeat="journey in journeysArray">
                                <a style="text-transform: capitalize;" href ng-click="onJourneySelect(journey)">{{journey}}</a>
                            </li>
                        </ul>
                    </div>
                     <!-- End pull right for select a journey dropdown -->
                    <h4 class="panel-title p-heading">Drill-down into Event Attributes</h4>
                </div>
                <div class="panel-body">
                </div>

            </div>
            <div class="col-md-10">
                <canvas id="eventAttributeChart" height="80" width="150"></canvas>

            </div>
            <div class="col-md-2" style="overflow-y:scroll; overflow-x:hidden; height:400px;" ng-if="bottomGraphEvents">
                <div ng-repeat="stack in bottomGraphEvents | orderBy:'-value'"
                    ng-click="selectedSpecificEventAttribute(stack);">
                    <div class="div_5f93_4" ng-if="stack.selected==true"
                        style="float: left;padding: 5px 3px;font-size: 18px; color:#348fe2;"><i
                            class="icon-submenu lnr lnr-checkmark-circle"></i></div>
                    <div class="div_5f93_4" ng-if="stack.selected==false"
                        style="float: left;padding: 5px 3px;font-size: 18px;"><i
                            class="icon-submenu lnr lnr-checkmark-circle"></i></div>
                    <div class="weekly-summaryX text-rightX div_5f93_5" width="80%"
                        style="padding:5px 3px; border-bottom:3px solid {{stack.color}};">
                        <div class="info-label div_5f93_6" align="left" style="margin-top: 2px;word-wrap: break-word"
                            width="100%">{{stack.label}}</div>
                        <div class="info-label div_5f93_7" align="right" width="100%"><strong>{{stack.value}}</strong>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>