Org Chart select event

Forums SPJS Charts for SharePoint Org Chart select event

This topic contains 3 replies, has 2 voices, and was last updated by  Phil Grant 1 week ago.

  • Author
    Posts
  • #19190

    Phil Grant
    Participant

    Hi,
    It is possible to filter a sub chart from the master based on the filters used but is it possible to filter the sub chart based on a selection made in the master chart, this is in the Org Chart.

    I have a table chart view under the org chart view that has extra information shown and I would like to limit the table chart to the selected box in the org chart above.

    Cheers,
    Phil

  • #19214

    Alexander Bautz
    Keymaster

    Yes, you can use this custom js. You can put it in a script editor web part in the page where you have the chart or put it in a file and refer it in the “Load external JS or CSS” tab in the chart config. If you use a script editor web part you must wrap the code in a <script> tag.

    orgChartSelectHandler("YOUR_ORG_CHART_ID");
    function orgChartSelectHandler(id) {
        try {
            google.visualization.events.addListener(spjs.charts.data.charts[id], "select", function (e) {
                var selection = spjs.charts.data.charts[id].getSelection(), data = spjs.charts.data.chartData[id], item, selectedItem = "";
                for (var i = 0; i < selection.length; i++) {
                    item = selection[i];
                    selectedItem = data.getFormattedValue(item.row, 0);
                }
               jQuery("#ID_OF_FILTER_SELECT_IN_TABLE_CHART").val(selectedItem).trigger("change");
            });
        } catch (ignore) {
            setTimeout(function () {
                orgChartSelectHandler(id);
            }, 1000);
        }
    }

    You must edit the snippet and replace “YOUR_ORG_CHART_ID” with the ID of your org chart, and “ID_OF_FILTER_SELECT_IN_TABLE_CHART” with the ID of the dropdown select filter above your table chart (you must set up a filter in the table chart configuration). To find the ID, right click the dropdown select and click “inspect”. You will find the ID attribute in the HTML code

    Let me know how this works out.

    Alexander

  • #19231

    Phil Grant
    Participant

    Thanks for that, I’ll give it a try, I’m just delving into your dynamic forms wrapper at the moment …. Brilliant.

    Thanks,
    Phil

  • #19341

    Phil Grant
    Participant

    Alexander,
    It worked a treat thanks, once I’d figured out the correct filter ID in the table.

    Phil

You must be logged in to reply to this topic.