Search Results

Here is an example of calling a rest API using Blox and displaying its response. This example is to display a list of Sisense folders owned by the logged in user. You can use any other url instead. Steps: Create a blox widget with 3 value panels, Name, Id and Type. Type 0 instead of formula in all panels as in the screenshot below. 2. Copy and paste below blox script. In the below script, replace "/api/folders" (line 21) with any other URL you need to call. Blox Script: { "style": ".blox-slides:not(:first-child) .fetch-button{display:none; !important;} .blox-slides .btn{margin-bottom:10px; font-weight:bold; color:black; font-size:1em}", "script": "", "title": "", "carouselAnimation": { "delay": 0 }, "body": [ { "type": "ActionSet", "class": "fetch-button", "style": { "padding": "5px" }, "actions": [ { "type": "fetchFromAPI", "class": "fetch-button", "title": "Get Data", "data": { "apiUrl": "/api/folders" }, "style": { "background-color": "#1f8038", "color": "#ffffff" } } ] }, { "type": "ColumnSet", "separator": false, "columns": [ { "type": "Column", "width": "25%", "separator": true, "items": [ { "type": "TextBlock", "class": "fetch-button", "weight": "light", "horizontalAlignment": "left", "separator": true, "text": "Name", "style": { "font-size": "13px", "font-weight": "bold", "margin": "5px" } }, { "type": "TextBlock", "weight": "light", "horizontalAlignment": "left", "separator": true, "text": "{panel:Name}", "style": { "font-size": "13px" } } ] }, { "type": "Column", "separator": true, "width": "50%", "items": [ { "type": "TextBlock", "class": "fetch-button", "weight": "light", "horizontalAlignment": "left", "separator": true, "text": "Id", "style": { "font-size": "13px", "font-weight": "bold", "margin": "5px" } }, { "type": "TextBlock", "horizontalAlignment": "left", "separator": true, "weight": "light", "text": "{panel:Type}", "style": { "font-size": "13px" } } ] }, { "type": "Column", "separator": true, "width": "25%", "items": [ { "type": "TextBlock", "class": "fetch-button", "weight": "light", "horizontalAlignment": "left", "separator": true, "text": "Type", "style": { "font-size": "13px", "font-weight": "bold", "margin": "5px" } }, { "type": "TextBlock", "weight": "light", "horizontalAlignment": "left", "separator": true, "color": "default", "text": "{panel:Id}", "style": { "font-size": "13px" } } ] } ] } ] } Configuration: { "fontFamily": "Open Sans", "fontSizes": { "default": 16, "small": 12, "medium": 22, "large": 32, "extraLarge": 50 }, "fontWeights": { "default": 500, "light": 100, "bold": 1000 }, "containerStyles": { "default": { "backgroundColor": "#ffffff", "foregroundColors": { "default": { "normal": "#000000" }, "white": { "normal": "#000000" }, "grey": { "normal": "#3A4356" }, "orange": { "normal": "#f2B900" }, "yellow": { "normal": "#ffcb05" }, "black": { "normal": "#000000" }, "lightGreen": { "normal": "#3ADCCA" }, "green": { "normal": "#54a254" }, "red": { "normal": "#dd1111" }, "accent": { "normal": "#2E89FC" }, "good": { "normal": "#54a254" }, "warning": { "normal": "#e69500" }, "attention": { "normal": "#cc3300" } } } }, "imageSizes": { "default": 40, "small": 40, "medium": 80, "large": 160 }, "imageSet": { "imageSize": "medium", "maxImageHeight": 100 }, "actions": { "color": "", "backgroundColor": "white", "maxActions": 5, "spacing": "extraLarge", "buttonSpacing": 5, "actionsOrientation": "horizontal", "actionAlignment": "center", "showCard": { "actionMode": "inline", "inlineTopMargin": 16, "style": "default" } }, "spacing": { "default": 5, "small": 20, "medium": 60, "large": 20, "extraLarge": 40, "padding": 2 }, "separator": { "lineThickness": 1, "lineColor": "#eeeeee" }, "factSet": { "title": { "size": "default", "color": "default", "weight": "bold", "warp": true }, "value": { "size": "default", "color": "default", "weight": "default", "warp": true }, "spacing": 20 }, "supportsInteractivity": true, "imageBaseUrl": "", "height": 618 } 3. Create a custom action with name ' fetchFromAPI' and use below script. Here we are pushing the response from API to widget. So panel names specified in script should be same as in Blox widget. const apiUrl = payload.data.apiUrl; const $internalHttp = prism.$injector.has("base.factories.internalHttp") ? prism.$injector.get("base.factories.internalHttp") : null; // Ajax configurations const ajaxConfig = { url: apiUrl, method: "GET", contentType: "application/json", accept: "application/json", async: false }; const httpPromise = $internalHttp ? $internalHttp(ajaxConfig, true) : $.ajax(ajaxConfig); payload.widget.on('processresult', function(se, ev){ ev.result.length = 0 $.each(httpPromise.responseJSON, function(index, value){ ev.result.push({ "0": { "Panel": "Name", "Value": value.name, "Text": value.name, "HasValue": true }, "1": { "Panel": "Id", "Value": value.type, "Text": value.type, "HasValue": true }, "2": { "Panel": "Type", "Value": value.oid, "Text": value.oid, "HasValue": true } }) }) }) payload.widget.refresh() 4. Add below widget script. This is to hide '0' (which we specified in value panel formula) widget.on('processresult', function(se, ev){ $.each(ev.result[0], function(index, value){ value.Value = '' value.Text = '' }) })

If there are more rows in table widget its bit difficult to find a particular item from a column. But it will be easy if we applied different colors to different items in the column. Here is a script to apply styles to each items in table widget. Steps: Create a table widget Add below widget script. Update the variable columnIndex with index of column to which color should be applied. (index is a number assigned to columns starting with 1. In above screenshot, State column has index 1, Country has index 2 and Region has index 3) Update the variable itemStyleMapping with mapping of item to style. Style can be background color, font color, padding etc. Save the script and refresh widget widget.on('domready', function(se, ev){ let columnsIndex = 3 let itemStyleMapping = { 'West':'background-color:#e64c72; color:white; padding: 2px 8px; border-radius:15px', 'South': 'background-color:#e69545; color:white; padding: 2px 8px; border-radius:15px', 'Northeast': 'background-color:#5f5da8; color:white; padding: 2px 8px; border-radius:15px', 'Midwest': 'background-color:#4a9455; color:white; padding: 2px 8px; border-radius:15px', 'Unknown': 'background-color:#8c8b8c; color:white; padding: 2px 8px; border-radius:15px' } const elementToObserve = $('table tbody', element)[0]; $(elementToObserve).find(`tr td:nth-child(${columnsIndex})`).each(function(index, value){ var label = $(this).text() if(label in itemStyleMapping) { $(this).text('') $(this).prepend(`${label}`) } }) const observer = new MutationObserver(function(e) { for(const m of e) { if (m.type === 'childList') { $.each(m.addedNodes, function(index, value){ elementObj = $(value).find('td:nth-child(3)') var label = elementObj.text() if(label in itemStyleMapping) { elementObj.text('') elementObj.prepend(`${label}`) } }) } } }) observer.observe(elementToObserve, {subtree: true, childList: true}); })

In order to refresh all widgets in a dashboard, we need to refresh the entire page. But we can add a button to refresh all widgets. Here is a script to add refresh button for a dashboard. Steps: Create dashboard Add below script to dashboard Save the script and refresh the dashboard dashboard.on('initialized', function (se, ev) { let dashboardRefreshButton = ` ↻ ` let $toolbarRight = $('.prism-toolbar__section--right .prism-toolbar__cell.btns-holder'); $toolbarRight.prepend(dashboardRefreshButton); $toolbarRight.find('#dashboard-refresh-button').on('click', dashboardRefresh); }) function dashboardRefresh() { $.each(dashboard.widgets.$$widgets, function(index, value){ value.refresh() }) }

Finding the right filter in a dashboard with many options can be frustrating. Instead of scrolling endlessly, you can add a search box to make it easier to find the filter you need. This guide will show you how to quickly set up a search feature for your Sisense dashboard filters. Steps: Open Your Dashboard Insert below dashboard Script Save and Refresh the Dashboard dashboard.on('initialized', function (se, ev) { $('.filters-headline').css({'height':'50%', }); $('.filters-global-header').css('height', '65px'); let searchBox = $('#custom-filter-search'); if(searchBox) { searchBox.remove() } let $input = $(''); $input.css({ 'width': '95%', 'margin-left': '5px', 'border-radius': '3px', 'border': '1.5px solid #bfbfbf', 'background-color': '#ffffff', 'font-size': '13px', 'color': '#757575' }) $('.filters-global-header').append($input); $input.on('input', function(){ const inputValue = $(this).val().toUpperCase(); $('.global-filters .ew-content-host .ew-panel .ew-item-wrapper').each(function(index, element){ if ($(this).find('.f-header-host .ew-i-caption').text().toUpperCase().includes(inputValue)) { $(this).css('display', 'block') } else { $(this).css('display', 'none') } }) }) })

"A variwide chart is a column chart where each column has a separate width to represent the third dimension ." Here is a script to convert a column chart to variwide chart. Steps: Create a Column chart. It should contain only one field as category and two Value panels (one will be displayed as height of bar and other as width). 2. Add below script to widget 3. Save the script and refresh widget (function(d) { "object" === typeof module && module.exports ? module.exports = d : d(Highcharts) })(function(d) { (function(b) { var d = b.seriesType, l = b.seriesTypes, k = b.each, m = b.pick; d("variwide", "column", { pointPadding: 0, groupPadding: 0 }, { pointArrayMap: ["y", "z"], parallelArrays: ["x", "y", "z"], processData: function() { var a = this; this.totalZ = 0; this.relZ = []; l.column.prototype.processData.call(this); k(this.zData, function(g, c) { a.relZ[c] = a.totalZ; a.totalZ += g }); this.xAxis.categories && (this.xAxis.variwide = !0) }, postTranslate: function(a, g) { var c = this.relZ, h = this.xAxis.len, e = this.totalZ, f = a / c.length * h, b = (a + 1) / c.length * h, d = m(c[a], e) / e * h; a = m(c[a + 1], e) / e * h; return d + (g - f) * (a - d) / (b - f) }, translate: function() { var a = this.options.crisp; this.options.crisp = !1; l.column.prototype.translate.call(this); this.options.crisp = a; var b = this.chart.inverted, c = this.borderWidth % 2 / 2; k(this.points, function(a, e) { var f = this.postTranslate(e, a.shapeArgs.x), d = this.postTranslate(e, a.shapeArgs.x + a.shapeArgs.width); this.options.crisp && (f = Math.round(f) - c, d = Math.round(d) - c); a.shapeArgs.x = f; a.shapeArgs.width = d - f; a.tooltipPos[b ? 1 : 0] = this.postTranslate(e, a.tooltipPos[b ? 1 : 0]) }, this) } }, { isValid: function() { return b.isNumber(this.y, !0) && b.isNumber(this.z, !0) } }); b.Tick.prototype.postTranslate = function(a, b, c) { a[b] = this.axis.pos + this.axis.series[0].postTranslate(c, a[b] - this.axis.pos) }; b.wrap(b.Tick.prototype, "getPosition", function(a, b, c) { var d = this.axis, e = a.apply(this, Array.prototype.slice.call(arguments, 1)), f = b ? "x" : "y"; d.categories && d.variwide && (this[f + "Orig"] = e[f], this.postTranslate(e, f, c)); return e }); b.wrap(b.Tick.prototype, "getLabelPosition", function(a, b, d, h, e, f, l, k) { var c = Array.prototype.slice.call(arguments, 1), g = e ? "x" : "y"; this.axis.variwide && "number" === typeof this[g + "Orig"] && (c[e ? 0 : 1] = this[g + "Orig"]); c = a.apply(this, c); this.axis.variwide && this.axis.categories && this.postTranslate(c, g, k); return c }) })(d) }); widget.on('processresult', function(widget,ev) { ev.result.yAxis[0].max = Math.max(...ev.result.series[0].data.map(o => o.y), 0); ev.result.chart.type = 'variwide' ev.result.plotOptions['variwide'] = ev.result.plotOptions['column'] delete ev.result.plotOptions['column'] delete ev.result.plotOptions['series'] ev.result.tooltip.enabled = true variwideArr = [] $.each(ev.result.series[0].data, function(index, value){ value.weight = value.y variwideArr.push([value.selectionData[0], value.y, ev.result.series[1].data[index].y]) }) ev.result.series[0].data = variwideArr ev.result.series[0].colorByPoint = true ev.result.series[0].type = 'variwide' ev.result.series[0].tooltip = { pointFormat: `${ev.result.series[0].name}: {point.y} ${ev.result.series[1].name}: {point.z}` } ev.result.series.length = 1 }) widget.on('beforedatapointtooltip', function(widget,ev) { ev.cancel = true }) Note: Sometimes you may see some alignment issues with X-axis labels. This happens only when you edit the widget. It will show normally when you refresh the dashboard.

Grid lines in charts help make the data easier to read by providing a clear reference. Sometimes, you may want to change the grid lines to match your dashboard's colors, make them stand out more, or switch the style (like using solid or dashed lines). Sisense doesn’t have an option to customize grid lines directly, but don’t worry—you can do it easily with a simple script. In the screenshot below, the color of the X-axis grid lines has been changed to red, while the Y-axis grid lines are now green. Here’s how you can do it. Steps: Create a bar/column/line/area chart and enable grid lines from design panel of widget Add below script to widget. Update color, dash style and width as per your requirement widget.on('processresult', function(w, args){ // X-axis grid lines customization args.result.xAxis.gridLineColor = 'red' args.result.xAxis.gridLineDashStyle = 'ShortDash' //Possible values'Solid', 'ShortDash','ShortDot','ShortDashDot','ShortDashDotDot','Dot','Dash','LongDash','DashDot','LongDashDot','LongDashDotDot' args.result.xAxis.gridLineWidth = '1' // Y-axis grid lines customization args.result.yAxis[0].gridLineColor = 'green' args.result.yAxis[0].gridLineDashStyle = 'ShortDash' args.result.yAxis[0].gridLineWidth = '2' }) Save the script and refresh the widget

If you find it challenging to locate which filters are currently applied in your Sisense dashboard due to a high number of options, you're not alone. Scrolling through the filter panel can be cumbersome. A great solution is to add a widget that displays the titles of the active filter panels, making it easier to track your selections. You can achieve this with Blox and a bit of scripting, simplifying your dashboard navigation and enhancing your data experience. Steps: Create a blox widget and a measure with formula "0" and name it "values" Add below Blox script in the design panel { "style": ".blox-slides:first-child .filter-summary-title{display:block !important;} .blox-slides .filter-summary-title{margin-bottom:10px; font-weight:bold; color:black; font-size:1em}", "script": "", "title": "", "showCarousel": false, "body": [ { "type": "TextBlock", "text": "Applied Filter Dimensions", "class": "filter-summary-title", "style": { "text-align": "left", "font-size": "16px", "margin": "5px", "text-wrap": "wrap", "color": "black", "font-weight": "600", "display": "none" } }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "100%", "style": { "flex-direction": "row" }, "items": [ { "type": "TextBlock", "text": "{panel:value}️", "style": { "text-align": "left", "font-size": "12px", "margin": "5px", "text-wrap": "wrap", "color": "#ffffff", "font-weight": "600", "padding": "2px 5px", "border-radius": "5px", "background-color": "#b04343" } } ] } ] } ] } ], "actions": [] } Add below widget script widget.on('processresult', function(se, ev){ dashfilters = ev.widget.dashboard.filters.flatten(); let resultArr = [] dashfilters.forEach((item, index) => { if (!item.jaql.filter.all) { resultArr.push( { '0': { "Panel": "value", "Value": item.jaql.title, "Text": item.jaql.title, "HasValue": true } } ); } }) ev.result = resultArr }); Save the script and refresh the widget. While the above solution lists the titles of the filter panels, wouldn’t it be even better to see the each filters applied on dashboard ? Imagine having the ability to clear selections directly from this widget as well! The good news is that you can achieve this advanced functionality using Blox—no plugins required. Check out this sample screenshot to see how it looks, and remember, it can be fully customized to meet your needs, such as using different colors for 'Exclude' filters. If you’re interested in implementing this feature, don’t hesitate to reach out !

When users interact with filters on a dashboard, they often see a tooltip displaying the table name, column name, and description. While this information can be useful for developers and administrators, it may not be relevant—or desirable—to display to end viewers. In many cases, exposing table and column names can create confusion or clutter, detracting from the user experience. So, how can you hide this technical information and keep your dashboard clean and user-friendly for your audience? Here's a simple solution to hide table and column details in filter tooltips for your viewers. Steps: Open a dashboard Add below dashboard script to the dashboard dashboard.on('initialized', (sender, args) => { if (prism.user.roleName !== 'consumer') { return; } $('#prism-rightview .global-filters .ew-host .ew-i-header-menu .ew-i-caption').on('mouseover', function(e){ $(`.tipper-content[data-ng-include="'/views/eucalyptus/itemhint.html'"] .ih-host .ih:gt(2)`).remove(); }) function addObserverIfDesiredNodeAvailable() { function handleNewElementAdded(mutationsList, observer) { mutationsList.forEach((mutation) => { if (mutation.type === 'childList') { mutation.addedNodes.forEach((addedNode) => { if (addedNode.classList && addedNode.classList.contains('tipper-host') && addedNode.classList.contains('hint-dpi') && addedNode.querySelector(`.tipper-content[data-ng-include="'/views/eucalyptus/itemhint.html'"] .ih-host .ih`)) { $(addedNode).find('.ih:gt(0)').hide() $(addedNode).find('.ih').css('border-bottom', 'none'); $(addedNode).find('.ih').css('padding', '1px'); } }); } }); } const observer = new MutationObserver(handleNewElementAdded); const observerConfig = { childList: true, subtree: true }; observer.observe(document.body, observerConfig); } addObserverIfDesiredNodeAvailable(); }); Save the script and refresh the dashboard For an even more user-friendly experience, you can go beyond simply hiding table and column names by adding a custom description to the tooltip . This description can provide valuable context, explaining the purpose of the filter, how it impacts the data, and why it's relevant to the user’s analysis. This additional layer of information can make the dashboard more intuitive and informative for end users. But why stop there? You can take it a step further by incorporating HTML styling   into your tooltip , allowing you to customize the text, colors, fonts, and layout. This makes the tooltip not only more informative but also visually appealing, creating a polished and cohesive user experience. Here’s a screenshot showing how this works in practice. If you're interested in implementing this enhanced and styled tooltip feature in your dashboards, feel free to reach out— I’d be happy to help!

Sometimes we may need to include more information in tooltip. Here is how we can achieve this. Steps: Create column/bar/line/area chart In this approach, result of disabled Values panel will display as additional information in tooltip . So create and disable Values panel as required. Make sure there is only one Values panel is enabled and there is no Categories and Break by panel is disabled. Add below widget script and save Refresh widget widget.on("beforequery", function (se, ev) { $.each(ev.widget.metadata.panels[1].items, function(index, value){ if(value.disabled == true) { var newJaql = { jaql : JSON.parse(JSON.stringify(value.jaql)) } ev.query.metadata.push(newJaql) lastIndex = ev.query.metadata.length - 1 ev.query.metadata[lastIndex].disabled = false } }) }) widget.on("beforedatapointtooltip", function (se, args){ var valueSet, breakbyExist = false, categoryExist = false if(args.widget.metadata.panels[2].items.length > 0) breakbyExist = true if(args.widget.metadata.panels[0].items.length > 0) categoryExist = true category = args.context.category seriesName = args.context.points[0].seriesName if(categoryExist) { categoryTitle = args.widget.metadata.panels[0].items[0].jaql.title categoryIndex = args.widget.rawQueryResult.headers.indexOf(categoryTitle) } if(breakbyExist) { breakbyTitle = args.widget.metadata.panels[2].items[0].jaql.title breakByIndex = args.widget.rawQueryResult.headers.indexOf(breakbyTitle) } $.each(se.rawQueryResult.values, function(key, value) { if(!categoryExist) { if(value[breakByIndex].text == seriesName) { valueSet = value } }else if(!breakbyExist) { if(value[categoryIndex].text == category) { valueSet = value } }else { if(value[breakByIndex].text == seriesName && value[categoryIndex].text == category) { valueSet = value } } }) $.each(args.widget.metadata.panels[1].items, function(index, value){ if(value.disabled == true) { resultIndex = args.widget.rawQueryResult.headers.indexOf(value.jaql.title) args.context.points[args.context.points.length]= { seriesName: value.jaql.title, showPercentage: false, value: valueSet[resultIndex].text, valueColor: args.context.points[0].valueColor } } }) }) If you're looking for a more visually appealing and efficient way to display additional information in tooltips, consider rendering a chart. This approach not only enhances the aesthetic appeal but also significantly improves the rendering speed of the tooltip. If you're interested in implementing this solution or would like more details, feel free to reach out . Below is a GIF showcasing the improved tooltip with a chart. This visual representation highlights the efficiency and aesthetic benefits of this approach.

By default values and labels are displayed in tooltip. Also its possible to add additional information to tooltip by using script . Sometimes it would be more helpful to display a widget as tooltip. Steps: Create base chart - the chart in which we need to add tooltip. Create a dashboard and add a widget that needs to be displayed as tooltip. Size of widget in this dashboard should be small enough to fit in to the tooltip. 3. Add below script to base chart and update the variable 'dashboaardurl' with URL of dashboard we created for tooltip. var category widget.on('beforedatapointtooltip', function(se, ev){ dashboardurl = 'https://XXXX.sisense.com/app/main#/dashboards/6612346ac77683002ea37645' redrawYN = category != ev.context.category category = ev.context.category filterPanel = ev.widget.metadata.panels[0].items[0].jaql filterPanel.filter = { explicit: true, members: [category], multiSelection: true } filterjaql = {jaql: filterPanel} var filtersArray = [filterjaql]; var filterString = JSON.stringify(filtersArray); var uriEncoded = encodeURIComponent(filterString); ev.template = `` if(redrawYN) se.redraw() }) Note: Supported widget - Line chart, Column chart, Bar chart, Pie chart Currently this script doesn't support widget with 'breakby' panel. (It will be added in future) Tooltip may take few seconds to load as it is actually a dashboard. If you're looking for a more visually appealing and efficient way to display additional information in tooltips, consider rendering a chart instead of a traditional widget. This approach not only enhances the aesthetic appeal but also significantly improves the rendering speed of the tooltip. If you're interested in implementing this solution or would like more details, feel free to reach out . Below is a GIF showcasing the improved tooltip with a chart. This visual representation highlights the efficiency and aesthetic benefits of this approach.

In some cases, radial bar charts can look nicer and be easier to understand than regular bar charts. Since Sisense doesn’t have a built-in widget for radial bar charts, here is a script that converts standard bar charts into radial ones. This guide will demonstrate how to use the script to make data visuals more interesting and clear. Steps: Create a bar chart. It can be Classic, Stacked or stacked 100. Add below widget script and save. Refresh the widget widget.on('processresult', function(se, args){ args.result.chart.polar = true args.result.pane = { size: '80%', innerSize: '20%', endAngle: 270 } });

In this guide, we’ll explore how to highlight bars with values above or below the average in a column chart using Sisense's built-in features. As you may have already seen, we can also highlight min and max values in a line chart using a script . Now, let’s dive into the steps for making your column charts even more informative! Step-by-Step Guide Step 1: Create Your Column Chart Start by creating a column chart. Add your desired Categories and a Measure; for example, you select "Age Range"  as your category and SUM(Quantity)  as your measure. Step 2: Access the Color Selector Next, access the color selector in the Measure panel, which opens a popup window. In this popup, you’ll find three options: Single Color , Range , and Conditional . Click on the Conditional  tab to proceed. Step 3: Configure Conditional Colors In the Conditional tab, you can set conditions and corresponding colors for your bars. Highlight Above Average Values: Remove all conditions that are loaded automaltically except the first condition. Select ">"  from the dropdown.. Click on the Formula  option and enter the formula to calculate the average avg([Age Range], sum([Quantity])) Choose a color for the above average values. Highlight Below Average Values: Add another condition for the lowest value. Select "<"  from the dropdown and use the same average formula avg([Age Range], sum([Quantity])) Select a distinct color for the lowest value. Highlight Average Values  (Optional): If you want to set a color for bars with average values, add another condition. Select "="  from the dropdown and use the same average formula Choose a color for the bars that match the average. Step 4: Apply Your Changes Once you’ve configured the conditions, click OK  to apply your changes. Your column chart will now display bars representing values above and below the average in different colors, allowing for quick identification of performance against the average.