Passing arguments to a new window after click on a Shield UI JavaScript pie chart

Question

I am using a Shield UI JavaScript chart on a web page. The current type of the chart is pie. What I need is to provide the users some more data after they click on a slice of the pie. The data will be provided in a separate window, and I also need to pass some parameters in the URL of the opened document. I tried some techniques; however none of them is working properly. I use the pointSelect events

            events: {
                pointSelect: function(args) {
                }
            },

but am stuck at this point. Will appreciate any help.

Answer 1

If you open the window with window.open, you can reference that window afterwards:

var w = window.open("http://www.google.com/", "popup");

// wait for the window to load and then so something
w.onload = function(){
    w.doSomething();
};

See https://developer.mozilla.org/en-US/docs/Web/API/window.open

If you just have to pass some parameters, you can also make use of the location.hash, for example, link to page.html#/some/variables/here and then split the location.hash, etc.

Answer 2

It is quite simple as a matter of fact. There is a list of available arguments for the pointSelect event here: https://www.shieldui.com/documentation/javascript.chart/events/pointSelect Let’s pick up the args.point.x argument. This is the number of the slice, starting from the first one. We can use a collection of links, or we can assigner the value of the argument to the link- this is a matter of choice mainly. For instance you may take use of the following code:

            events: {
                pointSelect: function(args) {
                    var URL="http://www.url.com/?parameterA="+args.point.x;
                    var WindowName="Details"+args.point.x;
                    window.open(URL, WindowName, "height=200,width=200");
                }
            },

Since you are mentioning a new window, and not tab, I am adding values for the dimensions of the window, so it really appears as a new window and not a tab. There is one important detail. Shall you need a separate window to appear for each slice, so you need to change it’s name:

var WindowName="Details"+args.point.x;

Or you can use one window, which if left open will display the next data once the user clicks on another tab:

var WindowName="Details";