Overview
Sisense's default behavior is to use values directly from the Elasticube to set the X-Axis. But what if you want to do more? Modifying the x-axis labels is very easy and very flexible. Let's look at the base code.
widget.on('render', function(widget,args){
widget.queryResult.xAxis = {
categories: widget.queryResult.xAxis.categories,
//Runs every value in the category through this function
labels: {
formatter: function () {
},
}
}
})This code does absolutely nothing. It processes each category label and returns it without modification, but the formatter function is where the fun begins.
Here’s our base chart.
Not bad but let’s look at what else we can do.
Step 1: Text Manipulation
Let’s say we don’t want the city names, we just want the team name, we could write our formatter to only grab the last word of each team name. But let’s say you’re not a huge fan of the Golden State Warriors, well we can build special cases in for that as well.
widget.on('render', function(widget,args){
widget.queryResult.xAxis = {
categories: widget.queryResult.xAxis.categories,
//Runs every value in the category through this function
labels: {
formatter: function () {
if(this.value == 'Golden State Warriors') {
return 'Warriors Suck'
} else {
starArr = this.value.split(' ')
return strArr[strArr.length - 1]
}
},
}
}
})In this code we take each value and split it on the white space, this returns an array of words. Then we select the last word to return. And if it’s the Warriors, then we label them appropriately.
Let’s see how it looks.
Perfect
Step 2: HTML Editing
We don’t have to just return text. We can return full HTML elements. All we need to do is return a valid HTML string. Let’s color each label with the team color. An example might be
<font color=”grey”>San Antonio Spurs</font>
Let’s see what that would actually look like.
widget.on('render', function(widget,args){
var colorDict = {
'Golden State Warriors': 'yellow',
'Boston Celtics': 'green',
'Chicago Bulls': 'red',
'Los Angeles Lakers': 'purple',
'San Antonio Spurs': 'grey'
}
widget.queryResult.xAxis = {
categories: widget.queryResult.xAxis.categories,
//Runs every value in the category through this function
labels: {
formatter: function () {
return '<font color="' + colorDict[this.value] + '">' + this.value + '</font>'
},
useHTML: true
}
}
})So here we make a dictionary object (basically a JavaScript object which maps strings to other strings). We map each team to its color. And then in our formatter we return a font html string substituting in the color from the map for each teach. We also need to inform Sisense that we are rendering html elements, so we set the useHTML to true.
What gets returned from the formatter looks something like
Spiffy!
Step 3: Links
An html link has a format that looks something like
<a href="example.com">Click me!</a>
The href value is the url to navigate to. And the text between the angle brackets is the link text. Let’s link each team to its Wikipedia page.
widget.on('render', function(widget,args){
widget.queryResult.xAxis = {
categories: widget.queryResult.xAxis.categories,
//Runs every value in the category through this function
labels: {
formatter: function () {
var urlString = this.value.replace(' ','_')
return '<a target=_blank href="http://en.wikipedia.org/wiki/' + urlString + '">' + this.value + '</a>'
},
useHTML: true
}
}
})On line 7 we replace all the ‘ ‘ in our string with ‘_’ in order to match Wikipedia’s format. The attribute target=”_blank” indicates to the browser to open the page in a new tab as opposed to navigating the current tab to the url.
Nice.
Step 4: Compound data
Our data set also contains the name of each team’s arena and we want to make the hover over to our links the name of the arena. If you want to pass multiple columns of data into the formatter, the best way is to make a new custom field that concatenates the values for the columns you need and then splitting on it in the function. Let’s see an example.
widget.on('render', function(widget,args){
widget.queryResult.xAxis = {
categories: widget.queryResult.xAxis.categories,
labels: {
formatter: function () {
var strArray = this.value.split('-')
var urlString = strArr[0].replace(' ','_')
return '<a title"' + strArr[1] + '" target=_blank href="http://en.wikipedia.org/wiki/' + urlString + '">' + strArr[0] + '</a>'
},
useHTML: true
}
}
})There are a few things happening here. First, we split the value on the ‘-‘ such that the first element in the array is the team and the second is the arena. We do our same underscore replace on the team to create the url string. And then we add the title attribute which sets the hover over value.
And there we see the hover over value set correctly.
Step 5: Images
We can return any valid HTML, and that includes images. Check it out.
widget.on('render', function(widget,args){
var picDic = {
'Golden State Warriors': 'http://nba.com/warriors-logo.png',
'Boston Celtics': 'http://nba.com/celtics-logo.png',
'Chicago Bulls': 'http://nba.com/bulls-logo.png',
'Los Angeles Lakers': 'http://nba.com/lakers-logo.png',
'San Antonio Spurs': 'http://nba.com/spurs-logo.png'
}
widget.queryResult.xAxis = {
categories: widget.queryResult.xAxis.categories,
labels: {
formatter: function () {
var strArray = this.value.split('-')
var urlString = strArr[0].replace(' ','_')
return '<a target=_blank href="http://en.wikipedia.org/wiki/' + urlString + '"><img width="50" height="50" src="' + picDic[strArr[0]] + '"></a>'
},
useHTML: true
}
}
})We set up the same map as before for colors, but with links to images for each team. And then instead of displaying text, we pass in an image tag.
Slick!
In conclusion, some key things to remember:
- The formatter function can be used to run a set function for each label in the series.
- If you need information from multiple columns, create a new custom column with all the needed data concatenated together and use that as your X-Axis label.
- If the data isn’t in your database, you can always create a dictionary in the function to map values to.
- Set useHTML to true as in the examples above when you are returning html elements and not just text
Cheers!
