Chart V7 attachSPJSChartsSelectHandler

[Ian Patrick]

Hi Alex,
I’m using the attachSPJSChartsSelectHandler event handler as prescribed in user manual. When I have 1 chart on the page the event triggers correctly. When I put a second chart on the page and click on the chart with the event handler attached the event triggers twice! (In my case because I launch a new tab it opens two tabs in the browser. Is this a known issue and is there any way around it?
Secondly, can I attach a different events to two (or more) charts on the same page?

Kind regards
Ian
This is my modified code:
attachSPJSChartsSelectHandler(“Delivery”);

function attachSPJSChartsSelectHandler(id){
try{
google.visualization.events.addListener(spjs.charts.data.charts[id], ‘select’, function(e){
var selection = spjs.charts.data.charts[id].getSelection();
var data = spjs.charts.data.chartData[id];
var message = ”;
var _date=”;
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
_date=data.cache[item.row][0].Me;
var str = data.getFormattedValue(item.row, item.column);
message += ‘{row:’ + item.row + ‘,column:’ + item.column + ‘} = ‘ + str + ‘\n’;
} else if (item.row != null) {
var str = data.getFormattedValue(item.row, 0);
message += ‘{row:’ + item.row + ‘, column:none}; value (col 0) = ‘ + str + ‘\n’;
} else if (item.column != null) {
var str = data.getFormattedValue(0, item.column);
message += ‘{row:none, column:’ + item.column + ‘}; value (row 0) = ‘ + str + ‘\n’;
}
}
if (message == ”) {
message = ‘nothing’;
}
var _fdate=Date.parse(_date).toString(“yyyy-MM-dd”);
//Open a new window pass in date

//New window
window.open(‘https://MyCompany.sharepoint.com/sites/KPI/SitePages/KPIDetail.aspx?COL=’+_fdate,’_blank&#8217;);
//alert(‘You selected ‘ + message + ” : ” + _fdate);
});
}catch(ignore){
setTimeout(function(){
attachSPJSChartsSelectHandler(id);
},1000);
}
}

[Alexander Bautz]

Hi,
Are you sure you don’t load the attachSPJSChartsSelectHandler call two times?

If you are, you can try adding this code to ensure it doesn’t run twice:

var chart_attachedEvents = {};
attachSPJSChartsSelectHandler("Put the chart ID here");
function attachSPJSChartsSelectHandler(id) {
    if(chart_attachedEvents[id]) return; // Ensure it does not attache twice
    try {
        google.visualization.events.addListener(spjs.charts.data.charts[id], 'select', function (e) {
            chart_attachedEvents[id] = true;
            var selection = spjs.charts.data.charts[id].getSelection();
            var data = spjs.charts.data.chartData[id];
            var message = '';
            for (var i = 0; i < selection.length; i++) {
                var item = selection[i];
                if (item.row != null && item.column != null) {
                    var str = data.getFormattedValue(item.row, item.column);
                    message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
                } else if (item.row != null) {
                    var str = data.getFormattedValue(item.row, 0);
                    message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
                } else if (item.column != null) {
                    var str = data.getFormattedValue(0, item.column);
                    message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
                }
            }
            if (message == '') {
                message = 'nothing';
            }
            alert('You selected ' + message);
        });
    } catch (ignore) {
        setTimeout(function () {
            attachSPJSChartsSelectHandler(id);
        }, 1000);
    }
}

Look at line 1, 4 and 8.

Alexander

[Ian Patrick]

Hi Alex, Thank you. That worked very well. Brilliant as always.
Kind regards
Ian

[Author]

Posts