Looking for multiple on click events


#1

Hello,

I am looking to have multiple click events that trigger other graphs. I was able to get #1 graph working to change the query by region on #3 graph. Now I want to be able to click on #2 drop-down and further more filter #3 graph by question selected. I saw this was done with the help desk example but I haven’t been able to get two queries working. I also not only need to query by single questions but initially when graph #3 loads I want it to have all the questions loaded and once the drop down menu is selected filter by the selected question.

On #2 I am doing a rest call to get all the columns that contain “Question” and I just append those options to the select field. The dropdown menu Id is “Questions”.

this is my Datasource/Advance code:

var handlers = {};
handlers.requestInit = function (query, data, logger) {
        var Region = "";
        var hash = location.hash.substr(1);
        var idx = hash.indexOf('Region=');
        var view = query.get_viewXml();
  
        if (idx !== -1) {
            Region = decodeURIComponent(hash.substr(idx)
                                  .split('&')[0]
                                  .split('=')[1]);
            if (isNaN(Region)) {
                Region = "";
            }
        }
        if (Region !== "") {
            view = view.replace('{Filter}', '<Where>\
              <Eq>\
                  <FieldRef Name="Region" />\
                  <Value Type="Text" >' + Region + '</Value>\
              </Eq>\
              </Where>');
     	
            query.set_viewXml(view);
          console.log(view);
        } 
  			else {
            query.set_viewXml(view.replace('{Filter}', ''));
        }
            console.log(view);
        }
  
var Firstcolumns = [];
var FinalColumns = [];

$.ajax({
    type: "GET",
    dataType: "json",
    url: "https://office365tenant/sites/sitecollection/_api/web/lists/getbytitle('list')/fields",
    success: function (data) {
       $.each(data.value, function(i){
        Firstcolumns.push(data.value[i].EntityPropertyName);
        });
        $.each(Firstcolumns, function(i,e){
            if(e.indexOf('Question') > -1)
                FinalColumns.push(e);
        });
        $.each(FinalColumns, function(i){
            $("#Questions").append("<option value='"+i+"'>"+FinalColumns[i]+"</option>")
        })
          $('#Questions').change(function() {
    				view = view.replace('{Filter2}', 
                        '<FieldRef Name="'+this.value+'"/>');
                        query.set_viewXml(view);
                        console.log(view);
                        console.log(this.value);
    					return true;
  });
    }
});
    
        return true;
    }

//Dashboard/Advance code:

var handlers = {};
handlers.preRender = function (config, logger, processor, el) {
    logger.debug('Configuration: ', config);
  			var Region = "";
   			var hash = location.hash.substr(1);
        var idx = hash.indexOf('Region=');
  			Region = decodeURIComponent(hash.substr(idx)
                                .split('&')[0]
                                .split('=')[1]);
  
    if (processor && !processor.subscribed) {
        $(window).bind('hashchange', function () {
            el.empty().html('<img alt="loading..." src="/_layouts/15/images/gears_anv4.gif" />');
            processor.process(el);
        });
        processor.subscribed = true;
    }
 
    if (location.hash.indexOf('Region=') !== -1) {
      	console.log(config);
        config.title = 'Overall Score of ' + Region;
    }
 
    return true;
}

So im looking to have #3 graph display all questions on page load which means I need to add all the agregates and categories dynamically and then apply the filter by dropdown when value changes.

As of now I only have three questions to show but this particular list has over 60 questions so im looking to automate this as much as possible.

Graph #3 configuration:

<View>
  <Query>
    <OrderBy>
      <FieldRef Name="Region"/>
    </OrderBy>{Filter}</Query><ViewFields>
     {Filter2}
    <FieldRef Name="Region"/>
    <FieldRef Name="Staff"/>
    <FieldRef Name="_x0025__x0020_of_x0020_Yes_x0020"/>
  </ViewFields>
</View>

Thanks!


#2

Dear Riftsan,
As you’ve correctly noticed, HelpDesk sample does have a similar case, so, please, use it to your own advantage - https://plumsail.com/sharepoint-dashboard-designer/documentation/helpdesk-dashboard/

The issue with two queries, is that you’ll need to check for both conditions, if either is true, and then apply the correct filtering. Since only one type of filtering can be used. This will allow you to use both conditions at the same time.


#3

Thanks for the response. Are you saying that I shouldn’t be using two filters? Or I can only use one filter?
I also failed to describe that on #1 I was using on click(graph) filtering and on #2 I wanted on change event (select field) filtering with the value that #1 had selected. Is this possible?

Thanks,

Andres.


#4

Dear Andres,
It is possible with the correct use of JavaScript. You have two variables here - one from Graph #1 and another from the dropdown menu. Try to write filter for each one, so they work independently.

Then, you need to add a condition, which checks if both variables are available, and in this case apply a third filter which will use both variables! This way, it should work.

  1. First, make sure that the dropdown filter also works
  2. Add condition to check if both variables are available
  3. In this case, apply a third filter which will filter by both

This should work.