Interactive Time Period Comparison with BloX & Custom Actions
Here is a use case on how to leverage BloX widgets in Sisense to create an interactive dashboard for comparing any KPI between two different time periods. This solution allows users to select two months (or any two time periods) and dynamically calculates the percentage change in the KPI between these selected months.
Embedding a Google Doc or Sheet in Your Dashboard
The iFrame Widget Plugin is a powerful tool that enables you to embed any web page that you wish into your dashboard, using its URL. A great use of the iFrame widget can also be used to Embed Google Docs or Sheets. The quick access to the document or sheet can be used to store notes and comments derived from a dashboard's results. Furthermore, it can be utilized for reading or even updating the same spreadsheet being used as an Elasticube's data source (write back). Other users with whom the dashboard is shared will be able to view the content of the doc, only if its sharing settings allow it. You can decide if the user must be logged in to Google, and if so, who may view and who may edit. For more information about it, see this Google article. To embed a single fixed doc: 1. Get the required doc's URL. If you want the doc to be editable, use the shareable URL. If you want it to be presented in presentation only mode, use the Published URL. 2. Create a new iFrame widget. 3. In the Widget's edit mode, provide the document's URL to the iFrame. 4. Apply your changes. To Embed a dynamic, filter responsive selection of documents: 1. Create a table that would list all of the relevant documents' description and URL. In the below example, we are using the owner's Email as the description that we will filter by: 2. Import the table into an existing or to a new Elasticube. The table can exist as a stand-alone island, and enable filtering based on its inline dimensions, or it can be integrating into an existing model, to enable interaction with its additional filters. 3. Create a new iFrame widget based on the same cube. In the widget's URL panel, add the field that holds the documents' URLs 4. Apply changes and inspect your dashboard. You can now choose the required document by choosing the relevant Email:D3 Force Directed Network Diagram
This article explains how to create a force directed network diagram using Sisense. This is helpful for showing hierarchies or relationship within your data. Steps The following steps will walk through the process of adding the new chart type and creating a sample funnel chart. Step 1 - Add the Plugin Download the attachment and unzip the contents into your C:\Program Files\Sisense\PrismWeb\plugins\ folder. If the plugins folder doesn't exist, just create it. After those files have been unzipped there, you may also have to restart the web server. Step 2 - Create the Chart On your dashboard, create a new widget and select Force Directed as the type. In order to work with this visualization, you need to specify at leas a Node ID and Linked Node ID. This is basically how the relationship is defined within the data. If you think about this in terms of an employee hierarchy, the Node ID field would usually be an employee ID and the Linked Node ID would be the employee's manager ID. There are also several optional fields you can add in Node Labels - The value label for each node (such as the employee's name) Color - This field determines how to color each node. You can use a dimension here (such as department name) or a metric (such as Sales per Employee). When using an Icon to display each node, this field is ignored Node Size - This field determines the size of each node. The higher the value, the larger the node is displayed. When not specified, all nodes are displayed with the same size Node Icon URL - Use this field to specify an image to show for each node. This should be a URL to where the images are hosted. If a node is missing an icon url, it will show a circle instead. If this field is left blank, each node will show up as a circle. Step 3 - Format the chart This visualization has several formatting options, see below for a description of each. Node Circle Size - A slider control that allows the designer to determine the range used for sizing each node Size Scale Method - Determines which scaling algorithm to use for determining the size of each node Selectable as Filters - Controls whether or not each node can set a dashboard filter when clicked on Value Labels - Controls whether or not to display labels for each node, and where to place the label Zoom from Mouse Scroll - When enabled, a user can adjust the size of the nodes by using their mouse scroll wheel Animation - Determines whether or not the chart loads with animation Gravity - A slider control for adjusting the gravity of the force layout Friction - A slider control for adjusting the friction of the force layout Charge - A slider control for adjusting the charge of the force layout References/Notes This plugin was based of a D3 Force Directed visualization. For more information on D3 in general, please see this link. For some generic examples of working with D3, please see this link and this link. The bottom 3 sliders in the Design Panel control variables for gravity, friction, & charge. These are D3 specific variables that work together to determine how the chart calculates a layout. For more information on these variables, please see the D3 Documentation or this explanation. See the attached files for the plugin and also a sample Elasticube & Dashboard Download: Plugin-Force Directed Network.zip Samples.zipAnalyze Period over Period - MoM / WoW / DoD
Analytical Need There are cases where we want to analyze our measures as a comparison between periods of time. For instance, ee want to know how did our measures behave on January this year vs. previous year. This means that we have to put down in our x axis the common period (Month, Week, Day). Modeling Challenge But when we select the time dimension as the x axis, it will show us a sequential order of it, like so : Image 1. dashboard without period over period We would like to see the day name / month name/ week no. (without the year). In order to do this, we will need to create it in advance in the cube. Solution In our dim date table, we will create a designated field for month name, day name, week #. SQL for the dim date table: SELECT DISTINCT s.OrderDate AS Date, CASE WHEN getMonth([OrderDate]) = 1 THEN '01Jan' WHEN getMonth([OrderDate]) = 2 THEN '02Feb' WHEN getMonth([OrderDate]) = 3 THEN '03Mar' WHEN getMonth([OrderDate]) = 4 THEN '04Apr' WHEN getMonth([OrderDate]) = 5 THEN '05May' WHEN getMonth([OrderDate]) = 6 THEN '06Jun' WHEN getMonth([OrderDate]) = 7 THEN '07Jul' WHEN getMonth([OrderDate]) = 8 THEN '08Aug' WHEN getMonth([OrderDate]) = 9 THEN '09Sep' WHEN getMonth([OrderDate]) = 10 THEN '10Oct' WHEN getMonth([OrderDate]) = 11 THEN '11Nov' WHEN getMonth([OrderDate]) = 12 THEN '12Dec' ELSE '' END AS OrderMonthWithNum, CASE WHEN DayOfWeek(OrderDate) = 1 THEN '01Sunday' WHEN DayOfWeek(OrderDate) = 2 THEN '02Monday' WHEN DayOfWeek(OrderDate) = 3 THEN '03Tuesday' WHEN DayOfWeek(OrderDate) = 4 THEN '04Wednesday' WHEN DayOfWeek(OrderDate) = 5 THEN '05Thursday' WHEN DayOfWeek(OrderDate) = 6 THEN '06Friday' WHEN DayOfWeek(OrderDate) = 7 THEN '07Saturday' ELSE '' END AS Day, WeekOfYear(s.OrderDate) AS Week FROM [SalesOrderHeader] s We will use the new fields as our x axis fields. The reason we have created the month & day fields with the number prefix, is in order for them to be sorted correctly in the dashboard (we used the Chart Label Order Changer plugin for that purpose). Dashboard: Image 2. Dashboard display of period over period Attachments - 71 KB - PeriodOverPeriod.dash - 536 KB - PoP.ecdataCustom Map Widget
Download: Custom Map Widget Note: (Sept 18, 2017) Added support for filtering on shapes. Introduction This article explains how to embed custom map visualizations in Sisense. Purpose/Benefits Sisense has some native mapping functionality but does not allow for importing custom maps. This plugin allows you to view data in whatever map you like. See the references for more information on GeoJSON, Leaflet, and Mapbox. Custom shapes (Counties) overlayed on a base map: Custom shapes (Chinese Provinces) with no base map: Steps The following steps will walk through the process of adding the new chart type and creating a sample map. STEP 1 - ADD THE PLUGIN Download the customMapWidget.zip attachment and unzip the contents into your C:\Program Files\Sisense\PrismWeb\plugins\ folder. If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder. If the plugins folder doesn't exist, just create it. After those files have been unzipped there, you may also have to restart the web server. Now, when you create a new widget the Custom Map widget should show up in the list of options STEP 2 - PREPARE GEOJSON FOR YOUR CUSTOM MAP This plugin uses GeoJSON files to overlay data as shapes on a map. More information on GeoJSON can be found here, but the general concept is that each file defines a JavaScript object that has a type of FeatureCollection and a list of features. There are different types of features, but the most common type is a polygon. Each feature represents a shape to display on the map and contains properties and geometry. Properties describe the attributes of the entire shape, while geometry is a list of points. Each point is a latitude/longitude combination, and the mapping function displays all points of the shape on the map and then draws a line to connect them. Below is an example of the format for a GeoJSON file. { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "ID": "1", "Name": "MyShape1" }, "geometry": { "type": "Polygon", "coordinates": [ [ [-86.411172, 32.409937], [-86.496774, 32.344437] ] ] } } ] } This plugin comes with 3 GeoJSON files included, but you can add in more if you want to show a different set of shapes. Some government agencies provide geo data for free use, and there are several 3rd party sites that provide free geo data as well. If you want to add in your own geo data, copy the file to customMapWidget/geojson/ folder. STEP 3 - CONFIGURE THE PLUGIN Open the config.js file and update the setting object's properties. urlTemplate - When using mapbox as the tiling server, you will need to provide a tile url mapboxKey - When using mapbox as the tiling server, you will need to provide an api key mapboxId - When using mapbox as the tiling server, you will need to provide a map type to use shapeSeparatorColor - color used for the outlines of the shapes shapeHighlightColor - color used to differentiate the highlighted shape Next update the list of Map options. This is a list of all the map types that are allowed by the widget, so if you are adding a custom GeoJSON file make sure to add it to the list and set the properties accordingly label - Name that appears in the widget editor, for selecting a map type url - Path to the GeoJSON file showBaseMap - should be true or false, based on whether you want to overlay your data on a map keyAttributes - a list of attribute names to use as the key, these get concatenated together using the separator below keySeparator - character to use as a separator for the attribute key prism.customMap = { settings: { mapboxKey: 'myMapboxApiKey', urlTemplate: window.location.protocol + '//api.tiles.mapbox.com/v3/sangil.i6ch70f8/{z}/{x}/{y}.png', mapboxId: 'mapbox.light', shapeSeparatorColor: 'white', shapeHighlightColor: 'black' }, maps: [ { label: 'Canada', url: '/plugins/customMapWidget/geojson/canada-GeoJSON.js', showBaseMap: true, keyAttributes:['NAME'], keySeparator:',', }, { label: 'US Counties', url: '/plugins/customMapWidget/geojson/USCounties-GeoJSON.js', showBaseMap: true, keyAttributes:['STATE','COUNTY'], keySeparator:'', }, { label: 'China Provinces', url: '/plugins/customMapWidget/geojson/china-provinces.js', showBaseMap: false, keyAttributes:['name'], keySeparator:'', }, ], widgets: {} }; STEP 4 - CREATE THE CHART On your dashboard, click the Create Widget button and select Advanced Configuration. Next, select the Custom Map Chart from the chart types menu. Pick a map type from the menu on the right. This selection determines which shape file to load, so you can use this plugin to make several map types available. Next, pick a dimension to use for the Geography dimension. The values from this field need to match the attribute key defined in the map's keyAttributes field. For example, this plugin comes with a GeoJSON file that provides the shape information for all counties in the US. If you open this file, each shape is has properties for STATE and COUNTY that uniquely identify each shape. The included Elasticube combines the STATE and COUNTY codes into a single field named GeoKey. In order to match up data from the Elasticube to the GeoJSON file, the config file specifies that the key is comprised of STATE and COUNTY. The Label dimension (optional) identifies which field to use when displaying the tooltip. The US Counties example uses FIPS codes to identify each county, but you may want to show tooltips with the county names instead. The Value measure is the number to embed into each shape. You can use the standard options to format the number, and the color selections get passed along to each shape. References/Notes Mapbox API - More information about the Mapbox API. This plugin uses mapbox in order to render the maps, so it does require a Mapbox API Key in order to render shape overlays on top of maps. More information on Mapbox API pricing can be found here. LeafletJS - The Mapbox project is an extension of the Open Source LeafletJS JavaScript library. If you're looking to modify the plugin, this can be a useful reference. Natural Earth - This site provides free geo data for download, so if you don't have the geo data already you can likely get it from this site. MyGeoData - This plugin requires a lat/long coordinate system (WGS 84) in order to display overlays on top of maps. If you're custom geo data comes in a different format, this site can likely help convert it to WGS 84 format. Upload your geo files, and convert/export it to a geojson file using the WGS 84 coordinate system. Also, you may need to change the file extension from geojson to js in order for your web server to know how to handle this file type. SampleElasticube.zip
Custom sort for Bar and Column Chart
Custom sort for Bar and Column Chart Question: I have seen several posts of people asking if there is a simple way to apply custom sorts for car and column charts, and until recently, I have been using the community customBarColumnChart Plugin, which is not supported anymore, and also not working correctly in the latest version of Sisense cloud. Not sure why this cannot become a standard feature within the system, as there seem to be a lot of requests for this functionality. Answer: The following widget scripts will allow you to sort categories in a bar/column chart. You can change the order of items in sortOrder to change the order. They cater to when you want to sort by a Break By, or when you want to sort by Categories with no Break By. BREAK BY: widget.on('processresult', (w, args) => { var sortOrder = ['Yellow', 'Black', 'Red', 'Blue ', 'Gold', 'Silver'] args.result.series.sort(function (a, b) { return sortOrder.indexOf(a.name) - sortOrder.indexOf(b.name) }) }) The configuration is also attached in a screenshot below: ALT Text: A bar chart displaying total order quantities by region. Two regions are represented: Europe and USA. Each region has bars segmented by color: yellow, blue, black, gold, red, and silver. The chart highlights comparisons in order quantities between the two regions, with specific quantities not indicated in the image. CATEGORIES: If you're aiming to sort by the Categories directly, then you can use the following instead: widget.on('processresult', (w, args) => { var sortOrder = ['USA', 'Europe'] args.result.series[0].data.sort(function (a, b) { return sortOrder.indexOf(a.selectionData[0]) - sortOrder.indexOf(b.selectionData[0]) }) args.result.xAxis.categories.sort(function (a, b) { return sortOrder.indexOf(a) - sortOrder.indexOf(b) }) }) This configuration looks like this: ALT text: Bar chart comparing total order quantity between the USA and Europe. The USA has a higher total order quantity than Europe, with both categories represented in dark blue bars on a white background. This was tested using Sample Retail. Let me know how it goes for you in the comments! Check out this related content: Academy Documentation
Redirecting Login Bypass Pages to the SSO Login Page
Redirecting Login Bypass Pages to the SSO Login Page 1. Open the File Management: Navigate to `Admin -> App Configuration -> File Management`. If the "File Management" option is not available, enable it under `App Configuration -> Feature Management`. 2. Create the Plugin Folder: Open the `serverSidePlugins` folder and create a new folder with a descriptive name, such as `loginPageRedirect`. Inside this folder, create an `index.js` file with the following code: const ssoSettings = require(`${process.cwd()}/node_modules/@sisense/sisense-configuration`).sso; module.exports = { method: "GET", url: [ "/app/account/login", "/app/account" ], beginRequest: (req, res, next) => { if (ssoSettings.enabled) { const host = encodeURIComponent(req.get('host')); const { ssoType } = ssoSettings; const redirectionUrl = (ssoType === 'jwt') ? ssoSettings.loginUrl : (ssoType === 'saml') ? `/saml?address=${host}` : `/openid?return_to=${host}`; res.redirect(redirectionUrl); } else { next(); } } }; 3. Enable Server-Side Plugins: Ensure that server-side plugins are enabled in the configuration settings. Navigate to `Admin -> Server & Hardware -> System Configuration -> Configuration -> Show Advanced Settings`. Check if the "Server Side Plugins Enable" feature is enabled. 4. Save and Verify: Save the `index.js` file and verify that the server-side plugins are correctly enabled. This setup ensures that any attempt to bypass the login by using the workaround links will redirect users to the SSO login page, enhancing your security measures. Check out this related content: Academy Course Sisense DocumentationExploring the Potential of Sisense Jump to Dashboard Filter Configurations
Sisense Jump to Dashboard offers a powerful way to enhance the user experience and streamline data exploration with the help of different filter configurations. By default, all the filters from the parent dashboard, measured values, and widget filters are passed and replaced in the drill dashboard. This guide explains and provides examples of how you can customize the way filters impact the drill dashboard. We'll delve into multiple filter configuration options and provide a step-by-step guide on how to implement them effectively.
Dynamic Widget Scripts
Download: GitHub Link Version: 1.0.0 Introduction: This article explains how to install the plug-in and how to interact with the js and configuration file. Purpose/Benefits: This plug-in will add or change change the current script applied to widgets on a dashboard to a script specified by the user. The user can also specify different scripts to apply to a widget depending on the user's group. How To Install and Configure the Plug-In Step 1 - Add The Plugin: You can download the plug-in using the link above. Once dowloaded, unzip the file. Within the Admin tab, navigate to System Management >> File Management >> plugins and upload the 'DynamicWidgetScripts' folder into the directory. Step 2 - Decide if You Will Use Dynamic Group Functionality: This plug-in allows for dynamic functionality to apply different scripts based on a user's group. This functionality is ON by default. If you would like to use this functionality please proceed to step 3. If you do not want to enable this feature, within the plug-in folder, in the 'changescripts_allwidgets.6.js' file, set the 'useGroups' variable to false. Step 3 - Setup the Config File: Within the plug-in folder ('DynamicWidgetScripts') open the 'config.js' file. Set the group name(s) to be effected by the plug-in under the 'groupName' variable as a string (do not include the [ ] characters). You may create and add multiple config objects into the config file, depending on the number of groups. Step 4 - Setup the Widget Script: If you ARE using Dynamic Groups In the 'config.js' file, within the 'defaultConfig' object, under 'wScript', specify the script to be applied to the widgets. If you ARE NOT using Dynamic Groups In the 'config.js' file, under the 'wScript' variable NOT within the 'defaultConfig' object, specify the script to be applied to the widgets. Example Script: The config file comes with a default script that will be applied to your widgets. e.result.plotOptions.series.dataLabels.style.color = 'green'; //change data label color e.result.plotOptions.series.dataLabels.style.fontSize = '12px'; //change data label size e.result.plotOptions.series.dataLabels.style.fontWeight = 'bold'; //bold data labels e.result.plotOptions.series.dataLabels.allowOverlap = true; //allow data label overlap Additional widget settings can be changed apart from what is listed here. For reference as to what settings can be adjusted, please see HighCharts API documentation here: https://api.highcharts.com/highcharts/. Step 4 - Apply the changes You can apply the changes by simply refreshing your add-ons page within the admin tab and then refreshing the dashboard. In-Action Example: Group 1 View: Group 2 View: Notes (Version 1.0.0): You can add multiple groups and scripts (one per group). Release Notes: 23-December-2021: Initial Release
