Creating a visualisation that you can interact with

#1

Hi,

I am looking to connect the following visualisation:

  1. A pie chart that shows the full year for different waste streams

38
Screenshot 2018-12-07 at 13.38.38.png1036×704 51.7 KB

  1. When you click on one of the waste streams, I would then like to be taken to a bar chart when it only looks at the waste stream you have clicked on, but now shows the progress throughout the year by month.

59

Essentially, it is possible to connect these two charts or would a certain style of drill down work for this?

I appreciate your support and hope I’ve explained myself clearly.

Thanks!

Claudia

#2

This should help you get started,
https://www.dundas.com/Support/developer/script-library/data/get-click-or-interactive-data

That shows you how to capture the click event of clicking on one of the waste streams in the pie chart.

Then depending on what kind of filter parameter you have on the second chart you can then use that to filter the second chart, see these examples to find the best match:

https://www.dundas.com/Support/developer/script-library/filter-and-parameter/

here is one of my scripts that changes the filter on a table:
debugger;
var args = dundas.Utility.getAdapterHitTestArguments(e.originalEvent, managementEffectivenessPieChart); // Handles touch, zooming, etc.
var result = managementEffectivenessPieChart.control.hitTest(args.offsetX, args.offsetY, args.target);

if (result && result.point) {
var status = result.point.xValues[0];
// var value = result.point.yValues[0]; // might be needed
var baseViewService = this.getService(“BaseViewService”);
var myParameter = baseViewService.currentView.control.viewParameters.filter(function(item) {
return item.name === “YOUR_ViewParameter”;
})[0];

myParameter.parameterValue.clearValues();
myParameter.parameterValue.clearTokens();
// what came out was not same as what was to go in so I did a switch statement, this was done early into my dundas careerer, I bet there is an easier way
switch(status.toString())
{
case “Green.Overall”:
var filterValue = new dundas.data.MemberValue({
hierarchyUniqueName: “Overall”,
levelUniqueName: “Overall”,
uniqueName: “Green.Overall”
});
break;
case “Blue.Overall”:
var filterValue = new dundas.data.MemberValue({
hierarchyUniqueName: “Overall”,
levelUniqueName: “Overall”,
uniqueName: “Blue.Overall”
});
break;
case “Yellow.Overall”:
var filterValue = new dundas.data.MemberValue({
hierarchyUniqueName: “Overall”,
levelUniqueName: “Overall”,
uniqueName: “Yellow.Overall”
});
break;
case “Red.Overall”:
var filterValue = new dundas.data.MemberValue({
hierarchyUniqueName: “Overall”,
levelUniqueName: “Overall”,
uniqueName: “Red.Overall”
});
break;
}
myParameter.parameterValue.token = null;
myParameter.parameterValue.values.length = 0;
myParameter.parameterValue.values.push(filterValue);

myParameter.refreshAllAdapters();
}

#3

This should be pretty straight forward to do using the filter/navigate/hover interactions (none of those require scripting - just a few clicks). There is a short video explaining how it works as well as detailed documentation for each type of interaction.

Specifically in your case, the key would be to have the waste stream assigned as a slicer on the bar chart metric set and then create a view parameter for it (note the view parameter doesn’t have to require a visible parameter control on the dashboard). Then depending on the design you want (i.e. a click on a slice that will take you to another dashboard will require a navigate interaction, but if you want to just hover over a slice and have a pop-up showing the bar on top of it you would go with a hover interaction. You can also have the bar displayed on the same dashboard and have it show different waste streams trends based on the clicked slice of the pie using the filter interaction). For all of those, you will need to setup the parameters mapping within the interaction setup menu where you will need to map the filter value of the waste stream on the pie (that will be the value the user clicked on) to the view parameter that is connected to the waste stream slicer on the bar chart.

1 Like
#4

Thanks Ariel. I’ve set it up using the filter interaction now. Now the next question I have is whether it’s possible to change the legend so only show the Waste streams that you have clicked on i.e. if you don’t click on anything within the pie chart, it should show all the waste streams, but if you click on one waste stream, is should then only show that waste stream. Or is there another way to label the bar chart to make it clearer which waste stream it is currently showing? Thanks!

#5

The legend will show what’s on the chart so while you selected a certain slice on the pie, all the other slices are still showing and hence why the legend is showing all items.
Indeed there are other ways to show which waste stream was selected for the bar chart. The easiest way to do so would be by showing the filter control for the waste stream view parameter that you connected to your bar chart. If you don’t have one on your dashboard you could just drag it from the parameters tab onto the dashboard. That said, to fully control the chart title and style it nicely, I’d recommend using a data label visualization which is also very easy to setup. That was explained in details (including a short video) under this forum post.

#6

I forgot to mention another option to highlight what was selected - you can configure that in addition or instead of the options I mentioned above. Highlighting the selected values on a visualization is done using a simple property - see this tip for details.

#7

Thanks a lot Ariel. All very helpful. Do you know why by any chance, whenever I check in the dashboard it no longer lets me interact with the charts? It’s so strange. I’ve re-set it up a few times now and it always works until I check it in and then I have to start all over again :S

#8

Indeed it sounds very strange. I’ve sent this question to our support team to look into it and I suspect they will need additional information such as what is actually happening once the dashboard is checked-in and you try to interact (for example, if you click on the pie chart do you get an error message or just nothing happens? Can you right click and see the context menu etc.)

#9

When I click on the chart nothing happens and yes I can see the context menu when I right click.