Different marker symbols can be set to line chart based on its value (Y-axis) using this script. But in some cases we may need to set icons for each category (X-axis), Here is a script to achieve this
Steps:
Create line chart and enable marker in design panel
Add below script to widget and update the variable 'categoryLogoMapping' with name of items in X-axis and its logo URL
Save script and refresh widget
categoryLogoMapping = {'Google': 'https://www.svgrepo.com/show/303108/google-icon-logo.svg',
'Apple': 'https://www.svgrepo.com/show/303110/apple-black-logo.svg',
'Twitter': 'https://www.svgrepo.com/show/303127/twitter-logo.svg',
'Facebook': 'https://www.svgrepo.com/show/303114/facebook-3-logo.svg',
'Whatsapp': 'https://www.svgrepo.com/show/303150/whatsapp-symbol-logo.svg'}
widget.on('processresult', function(se, ev){
ev.result.series[0].lineWidth = 0 //To disable connected line between markers
$.each(ev.result.series[0].data, function(index, value){
value.marker.symbol= `url(${categoryLogoMapping[value.selectionData[0]]})`
value.marker.width= 25
value.marker.height= 25
})
})
Comments