Add Images from External Table Instead of Labels in Pie Chart

[ILLIA]

Add Images from External Table Instead of Labels in Pie Chart

Disclaimer: Please note that this blog post contains one possible custom workaround solution for users with similar use cases. We cannot guarantee that the custom code solution described in this post will work in every scenario or with every Sisense software version. As such, we strongly advise users to test solutions in their environment prior to deploying them to ensure that the solutions proffered function as desired in their environment. For the avoidance of doubt, the content of this blog post is provided to you "as-is" and without warranty of any kind, express, implied, or otherwise, including without limitation any warranty of security and or fitness for a particular purpose. The workaround solution described in this post incorporates custom coding, which is outside the Sisense product development environment and is, therefore, not covered by Sisense warranty and support services.

This script helps you to put respective images, instead of text labels values in a Pie Chart.

How it works: 

The script makes JAQL call to your source of images to query pairs of values [your_text_label_value, your_image_for_text_value_label], then adds formatting for labels that locates your labels in the previous JAQL result and replaces the labels with image tag which refers for your image link.

How to use: 

For this solution, you need a Pie Chart Widget and any cube that has the necessary relations to make [your_text_label_value, your_image_for_text_value_label] pairs. Here simple fetch generated by a browser has been used, we can replace the fetch function with the one we need by doing these steps:

1. Create a dashboard that uses relevant cube
2. Create a table widget that has 2 columns to query your text label value and respective image URL
   Example:
   
   
3. Go to developer tools, click the Network tab, refresh the dashboard
4. In the Network tab, find 'jaql' request
5. Right-click on it, choose Copy => Copy as Node.JS fetch
6. Replace the fetch call with the copied one.

Please note that your Pie Chart source cube and label/images pairs source cube can be one cube or different cubes so the user needs to have permission to query data from them.

Currently, image links are being identified by the present '://' string in it, please note that if your image links do not contain protocol in it, you might want to change the identifier to something else.

Result:

Code:

widget.on("initialized", async ()=>{
	let rawResult = await fetch("https://main.sisense.com/api/datasources/gender%20images/jaql", {
  	"body": "{\"datasource\":{\"fullname\":\"localhost/gender images\",\"id\":\"localhost_agenderIAAaimages\",\"address\":\"LocalHost\",\"database\":\"agenderIAAaimages\",\"live\":false,\"title\":\"gender images\"},\"metadata\":[{\"jaql\":{\"table\":\"Untitled spreadsheet - Sheet1 (2).csv\",\"column\":\"Gender\",\"dim\":\"[Untitled spreadsheet - Sheet1 (2).csv.Gender]\",\"datatype\":\"text\",\"merged\":true,\"title\":\"Gender\"},\"instanceid\":\"F23A6-0644-63\",\"field\":{\"id\":\"[Untitled spreadsheet - Sheet1 (2).csv.Gender]\",\"index\":0}},{\"jaql\":{\"table\":\"Untitled spreadsheet - Sheet1 (2).csv\",\"column\":\"image\",\"dim\":\"[Untitled spreadsheet - Sheet1 (2).csv.image]\",\"datatype\":\"text\",\"merged\":true,\"title\":\"image\"},\"instanceid\":\"5398A-A692-52\",\"field\":{\"id\":\"[Untitled spreadsheet - Sheet1 (2).csv.image]\",\"index\":1}}],\"ungroup\":true,\"offset\":0,\"m2mThresholdFlag\":0,\"isMaskedResult\":true,\"format\":\"json\",\"widgetType\":\"tablewidget\",\"by\":\"widget\",\"dashboard\":\"64aecdaa99a2cf002a9be3b0;get images \",\"widget\":\"64aecdb999a2cf002a9be3b2;\",\"queryGuid\":\"383F7-AA27-86BE-74E9-6CD5-499B-5950-6879-5\",\"count\":220}",
  	"method": "POST"
	})
	widget.imagesData = await rawResult.json()
})





widget.on("processresult", (scope, args) => {

	args.result.plotOptions.series.dataLabels.useHTML = true
	args.result.plotOptions.series.dataLabels.formatter = function(){

		let image = widget.imagesData.values.find(point => point.find(data => data.text === this.key))
		if(image){
		return`<img src="${image.find(point => point.data.includes('://')).data}" style="width: 30px; height: 30px;"/>`
		}
		return this.key
	}
	
	
})