Chart Interactivity

[Andrew Fletcher]

Is it possible to use any of the interactivity functions of the Google charts with SPJS Charts? I would like to be able to have individual slices of a chart be able to be clickable and then pass the click value to a SP list page with a URL filter. Link to documentation on Google Chart interactivity below just for reference.

https://google-developers.appspot.com/chart/interactive/docs/basic_interactivity

Many thanks,
Andrew

[Alexander Bautz]

Hi,
Unfortunately the documentation is not as good as it should be, but I have mentioned a “selectionHandler” here: https://spjsblog.com/2013/03/11/spjs-charts-for-sharepoint-export-to-excel-and-sp2013-support/#comment-48514

Here is the code example:

function spjs_chartSelectionHandler(chartID,selection,data){
	var message, item, value;
	message = "";
	value = "";
	item = selection[0];
	if(item.row !== null && item.column !== null){
		message = "{row:" + item.row + ",column:" + item.column + "}";
		value = data.getValue(item.row, item.column);
		if(message === "") {
			message = "nothing";
		}
		alert("You selected " + message +", the value is: "+value);	
	}
}

This code must be added to the MASTER CEWP – above the “spjs-charts-v4.js” script – for example below the license code.

Let me know how this works out.

Alexander

[Andrew Fletcher]

Thanks Alexander the solution above did work for the column charts I have but did not seem to work for the pie charts.

Additionally, if I have many pages that house many charts would I be able to add this code in a CEWP for each page to specify a case for each chart much the way you did in one of the previous posts here.

Thanks,
Andrew

[Alexander Bautz]

Hi,
Sorry for the delay – I have quite a bit of emails and forum posts to go trough…

I think this code must be somewhat custom made for each chart so I’m not sure you can create one that fits all.

Unfortunately I have not had the time to work on the Charts solution lately (most of my time goes into DFFS).

To have it work with a pie chart, you must debug the code (add some alerts or console.log) to locate the values to pick up, and change the code example accordingly.

Let me know how it goes.

Alexander

[Author]

Posts