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!