Search Results

"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!

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.

In this guide, we'll explore how to highlight the maximum and minimum bars in a column chart using Sisense's built-in features. As you may have already seen, we can highlight min and max values in a line chart using a scrip t . Now, let’s dive into the steps for enhancing your column charts with eye-catching visual indicators for key data points! 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 the Maximum Value: 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 find the highest value. in our case the formula is : max([Age Range], sum([Quantity])) Choose a color for the highest value. Highlight the Minimum Value: Add another condition for the lowest value. Enter the formula for the lowest value min([Age Range], sum([Quantity])) Select a distinct color for the lowest value. Set Color for Remaining Bars: Select "Not Equal To"  from the dropdown. Use the formula for the highest or lowest value again to define the color for all other bars. Step 4: Apply Your Changes Once you’ve configured all your conditions, click OK  to apply your changes. Your column chart will now display bars representing the highest and lowest values in different colors, allowing for quick identification of key data points.

Here is script to add filter dropdown to a widget. We can filter to a particular item by selecting an item from the list. Steps: Create a Line/Column/Bar/Area/Pie chart Add below script to the widget and update the variable ' dimension ' with name of dimension in the format "[Table Name.Column Name]". Items in this field will be displayed as button. Add the same column in widget filter pane and select one item in it. Save the script and refresh widget. widget.on('processresult', function(se, ev){ ev.result.chart.spacing = [30, 20, 77, 20 ] }); var dimension = '[Records.Region]' widget.on("domready", function(w){ var chart = w.chart[0][Object.keys(w.chart[0])[0]].hc let items = getItemList(w).values; let itemlist = Array.from(items, x=>x[0].data) let widgetFilter = widget.metadata.panels[3].items.find(el => el.jaql.dim == dimension) var chartContainer = $('.highcharts-container', element) var dropdownHTML = `` chartContainer.before(dropdownHTML) $.each(itemlist, function(index, value){ $(`#select-${w.oid}`).append(`${value}`) }) chartContainer.height(chartContainer.height() - 77); var selecteValue = itemlist[0] console.log(widgetFilter) if(widgetFilter && widgetFilter.jaql.filter && widgetFilter.jaql.filter.members) selecteValue = widgetFilter.jaql.filter.members[0] document.getElementById(`select-${widget.oid}`).value = selecteValue var select = document.getElementById(`select-${widget.oid}`); select.addEventListener('change', (e) => { console.log(e) var selectedItem = e.target.value widgetFilter.jaql.filter.members[0] = selectedItem widget.refresh(); }); }); function runHTTP(jaql) { // Use $internalHttp service if exists const $internalHttp = prism.$injector.has("base.factories.internalHttp") ? prism.$injector.get("base.factories.internalHttp") : null; // Ajax configurations const ajaxConfig = { url: "/api/datasources/" + encodeURIComponent(jaql.datasource.title) + "/jaql", method: "POST", data: JSON.stringify(jaql), contentType: "application/json", dataType: "json", async: false }; // Use $internalHttp service for v8.0.1+ // else use default ajax request const httpPromise = $internalHttp ? $internalHttp(ajaxConfig, true) : $.ajax(ajaxConfig); // Return response return httpPromise.responseJSON; }; function getItemList(widget) { const query = { "datasource": widget.datasource.title, "metadata": [ { "jaql": { "dim": dimension, "filter": { "explicit": false, "multiSelection": true, "all": true } } } ] }; return runHTTP(query); }

When analyzing data, it’s helpful to see both actual numbers and percentage values. For example, you might want to know how many students passed each subject and what percentage that represents. While you can use buttons or a dropdown menu to switch between these two measures, I've created a new script specifically for this purpose. This script adds elegant buttons that allow users to easily switch between the count and the percentage. This not only enhances the visual appeal but also makes it simpler for everyone to understand and interpret the data at a glance. Steps: Create a bar/column/line/are chart Widget should contain only one category(dimension). Create 2 Values panels and enable only one panel. The script will generate one button per Value panel and will be able to switch between panels by clicking on buttons. Add below script to widget Save the script and refresh widget widget.on("domready", function(w){ let chart = w.chart[0][Object.keys(w.chart[0])[0]].hc let chartContainer = $('.highcharts-container', element) const button1_Id = `button1-${w.oid}`; const button2_Id = `button2-${w.oid}`; if($(`#${button1_Id}`).length) { $(`#${button1_Id}`).remove() } if($(`#${button2_Id}`).length) { $(`#${button2_Id}`).remove() } const item1Title = w.metadata.panels[1].items[0].jaql.title; const item2Title = w.metadata.panels[1].items[1].jaql.title; button1 = `${item1Title}` chartContainer.before(button1) button2 = `${item2Title}` chartContainer.before(button2) const panelItemIndex = w.metadata.panels[1].items.findIndex(el => !el.disabled) const button1_select = document.getElementById(button1_Id); const button2_select = document.getElementById(button2_Id); if(panelItemIndex === 0) { setButtonActive(button1_select); setButtonInactive(button2_select); } else { setButtonActive(button2_select); setButtonInactive(button1_select); } button1_select.addEventListener('click', (e) => { const panelTitle = w.metadata.panels[1].items[0].jaql.title; enablePanelByTitle(panelTitle); }) button2_select.addEventListener('click', (e) => { const panelTitle = w.metadata.panels[1].items[1].jaql.title; enablePanelByTitle(panelTitle); }) }); function enablePanelByTitle(panelTitle) { const panelIndex = widget.metadata.panels[1].items.findIndex((el, index) => el.jaql.title === panelTitle); if (panelIndex < 0) return; widget.metadata.panels[1].items.forEach((el, index) => { el.disabled = index != panelIndex }) widget.refresh(); } function setButtonActive(element) { element.style.backgroundColor = '#7b1199'; element.style.color = '#ffffff' } function setButtonInactive(element) { element.style.backgroundColor = '#ffffff'; element.style.color = '#7b1199' }

When it comes to business intelligence (BI) platforms, there are tons of options out there. Some offer extensive pre-built design customizations, while others focus more on ease of use. But where Sisense really shines is in its visualization flexibility —something not every BI tool can brag about. Whether you’re a data geek, a business analyst, or just someone looking to make their dashboards pop, Sisense has some tricks up its sleeve that can take your visualizations to the next level. Simple Yet Powerful Customizations Right out of the box, Sisense gives you all the important design options you need to create effective visualizations. But if you’ve ever found yourself wanting more control—like tweaking the smallest details on a chart—Sisense has you covered. The magic lies in its custom scripting capabilities . With just a dash of JavaScript, you can customize your dashboards and widgets in ways most other platforms don’t allow. Let’s say you want to tweak the way your data labels look. Sisense’s bar charts, for example, are built on Highcharts, which means you can tap into all the cool customization options Highcharts offers. Want to format data labels? Easy. Check out this quick guide to Format Data Labels in Sisense Widgets  with just a few lines of code. Dashboards with a Personal Touch Customizing individual widgets is just the beginning. With Sisense, you can also tweak the entire dashboard. Need to add a button to refresh your dashboard on command? No problem! A simple script lets you create a Refresh Button  that users can click anytime. Check out the step-by-step guide to adding a Refresh Button  to your Sisense dashboards. Beyond widgets, Sisense allows you to customize things at a global level. You can even tap into global events  and access menus like the dashboard or widget menus. Want to add your own custom menu items that perform specific tasks? With Sisense, you can! This flexibility is a rare find in most BI platforms and makes Sisense ideal for those who want complete control over their dashboards. BloX: Elevating Dashboard Interactivity with Custom HTML and Data One feature that makes Sisense stand out is BloX . Unlike traditional widgets, BloX allows you to create completely custom content by rendering HTML  inside the widget. This means you can add interactive elements like buttons, images, and forms—while also incorporating data from your dashboard directly into these elements. Want to see BloX in action? Imagine you want to display some text showing your total revenue and add a button that links to an external website or another dashboard. With BloX, this is an easy and basic example of what’s possible. Plus, there are many built-in templates  available that you can use straight away, or you can tailor them to fit your specific needs. Check out an example of a BloX template featuring two interactive cards  to see just how flexible and powerful BloX can be. Making Scripts Easier to Manage With great customization comes a little complexity. One challenge you might face is managing all these scripts, especially if you're using the same one across multiple widgets or dashboards. Copy-pasting scripts everywhere can get messy, but thankfully, there’s an easier way to keep things organized. Using a tool like the Widget Script Manager , you can centralize and manage your scripts, applying them globally without having to copy and paste. This not only saves time but also makes your dashboards easier to maintain in the long run. Curious about how to better manage scripts? Here’s more info on handling scripts efficiently: Widget Script Management in Sisense .

Being able to adjust the date granularity in charts is essential for effective data analysis. Users might want to switch from yearly to quarterly or monthly views depending on their specific needs—such as spotting long-term trends, analyzing seasonal performance, or evaluating monthly campaigns. While creating a Blox button is one way to implement this feature, you can also quickly add a dropdown directly to your chart. This simple widget script allows users to toggle between year, quarter, and month views seamlessly, enhancing interactivity and making data exploration easier than ever. Steps: Open Your widget where you wnat to add the dropdown Insert below widget Script Save and Refresh the Widget let dropdownStyle = ` padding: 5px 10px; background:#FFFFFF; border: 1px solid #d6d3d3; margin:2px 5px; width: 90px; border-radius: 4px; color: rgb(91, 99, 114)`; widget.on('processresult', function ( se, ev ) { ev.result.chart.spacing = [20, 20, 77, 20 ] }); widget.on("domready", function(se){ const chart = widget.chart[0][Object.keys(widget.chart[0])[0]].hc; const chartContainer = prism.activeWidget ? $('.highcharts-container') : $(`widget[widgetid=${widget.oid}] .highcharts-container`); //Time period dropdown const timePeriods = { 'Weekly': 'weeks', 'Monthly': 'months', 'Quarterly': 'quarters', 'Yearly': 'years' }; let ddTimePeriodId = `select-timeperiod-${widget.oid}`; let dropdownHTMLTimePeriods = ``; if($(`#${ddTimePeriodId}`).length) { $(`#${ddTimePeriodId}`).remove(); } chartContainer.before(dropdownHTMLTimePeriods); for(let key in timePeriods){ $(`#${ddTimePeriodId}`).append(`${key}`); } document.getElementById(`${ddTimePeriodId}`).value = Object.keys(timePeriods).find(key => timePeriods[key] == widget.metadata.panels[0].items[0].jaql.level); var select = document.getElementById(`${ddTimePeriodId}`); select.addEventListener('change', (e) => { let selectedItem= e.target.value; widget.metadata.panels[0].items[0].jaql.level = timePeriods[selectedItem]; widget.refresh(); }); });