Search Results

It is possible to add a benchmark/Target line to a chart using script. But there can be situations where we need to change the benchmark value dynamically based on selected filter. Here is a script to achieve this. Steps: Create Bar chart/ Column chart/ Line chart/ Area chart Add below script to widget Update the variable ' filterName ' with name filter panel based on which the benchmark line should change Update the variable ' filterBenchmarkMapping ' with mapping of filter item to benchmark value. If multiple items or no items selected, value of ' default ' will be taken as value. So don't delete ' default ' item from the list. Save the script and refresh the dashboard widget.on('processresult', function(se, ev){ let filterName = 'Region' let filterBenchmarkMapping = { 'South': 100000, 'West': 150000, 'Midwest' : 200000, 'default' : 250000 } let selectedItem = 'default' let selectedFilter = se.dashboard.filters.$$items.find(el=>el.jaql.title == filterName) //for dashboard filter //let selectedFilter = ev.widget.metadata.panels[3].items.find(el=>el.jaql.title == filterName) //for widget filter if(selectedFilter && selectedFilter.jaql.filter && selectedFilter.jaql.filter.members && filterBenchmarkMapping[selectedFilter.jaql.filter.members[0]]) selectedItem = selectedFilter.jaql.filter.members[0] ev.result.yAxis[0].plotLines = [{ color: '#2ec7b5', dashStyle: 'LongDash', width: 2, value: filterBenchmarkMapping[selectedItem], zIndex: 5, label : { text : 'Target' } }] })

Here is script to add filter buttons to a widget. There will be one button for each items in a dimension and we can filter to a particular item by clicking corresponding button. 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.marginTop= 60 }); var dimension = "[Records.Region]" var normalState = { fill: '#EEEDFA', stroke: '#ADABF6', r: 3, style: { color: '#6D6D6D', borderWidth : 0 } }, hoverState = { fill: '#DDDCF0', stroke: '#ADABF6', r: 3, style: { color: '#6D6D6D', borderWidth : 0 } }, pressedState = { fill: '#544cf5', stroke: '#ADABF6', r: 3, style: { color: '#FFFFFF', borderWidth : 0 } }, disabledState = { fill: '#EEEDFA', stroke: '#ADABF6', r: 5, style: { color: '#6D6D6D', borderWidth : 0 } }, callback = function () { } widget.on("domready", function(w){ let chart = w.chart[0][Object.keys(w.chart[0])[0]].hc let items = getItemList(w).values; //items.length = 10 let itemlist = Array.from(items, x=>x[0].data) let buttonList = new Array(itemlist.length) let widgetFilter = widget.metadata.panels[3].items.find(el => el.jaql.dim == dimension) $.each(itemlist, function(index, value){ buttonList[index] = chart.renderer.button(value, 10 + (index * 120), 10, callback, normalState, hoverState, pressedState, disabledState) .attr({ zIndex : 10, height: 15, width: 100, 'text-align': 'center' }) .on('click', function() { widgetFilter.jaql.filter.members[0] = value widget.refresh(); }) .add(); }) $('.widget-no-result-overlay').css('top', '60px') chart.buttonList = buttonList filterItem = widgetFilter.jaql.filter.members[0] currentButton = buttonList.find(el=>el.text.textStr == filterItem) highlightButton(currentButton, chart) }); function highlightButton(clickedButton, chart){ chart.buttonList.forEach(button => { if (button.text.textStr !== clickedButton.text.textStr) { button.setState(0) } else{ button.setState(2) } }) } 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); } Note: If there are more items in the column, all buttons may not be displayed as there won't be enough space to display all of them.

Sometimes line chart contains more value points and it wont be readable if we enable the value labels. But it would be a nice feature to highlight minimum and maximum value in the chart to get a better understanding of value range in it. Here is a script to achieve this. Steps: Create line chart and disable value label from design panel Add below widget script Save the script and refresh widget widget.on('processresult', function(se, ev){ let maxItem = Math.max.apply(Math, ev.result.series[0].data.map(function(el) { return el.y; })) let minItem = Math.min.apply(Math, ev.result.series[0].data.map(function(el) { return el.y; })) let maxfilterItems = ev.result.series[0].data.filter(el=>el.y == maxItem) let minfilterItems = ev.result.series[0].data.filter(el=>el.y == minItem) $.each(maxfilterItems, function(index, value){ value.dataLabels = { enabled:true, borderColor: 'green', backgroundColor:'green', color: 'white', borderWidth: 1, borderRadius:3, padding: 3, style: { fontWeight: 'bold' } } }) $.each(minfilterItems, function(index, value){ value.dataLabels = { enabled:true, borderColor: 'red', backgroundColor:'red', color: 'white', borderWidth: 1, borderRadius:3, padding: 3, style: { fontWeight: 'bold' } } }) })

We can add buttons to a widget for many purposes. Here are some examples we already posted: Switchable Measure Buttons Button to Show/Hide value labels Button to change widget type In above posts, we added buttons with default style. But we can apply styles to button by using below script. Steps: Create a Line/Column/Bar/Area/Pie chart Add below script to widget. This script is to add a sample button with style Save the script and refresh widget widget.on('processresult', function(se, ev){ ev.result.chart.marginTop= 60 }); var normalState = { fill: '#f44336', stroke: '#f44336', r: 3, style: { color: '#ffffff', borderWidth : 0 } }, hoverState = { fill: '#f05146', stroke: '#f05146', r: 3, style: { color: '#ffffff', borderWidth : 0 } }, pressedState = { fill: '#284dc7', stroke: '#284dc7', r: 3, style: { color: '#ffffff', borderWidth : 0 } }, disabledState = { fill: '#284dc7', stroke: '#284dc7', r: 5, style: { color: '#ffffff', borderWidth : 0 } }, callback = function () { } widget.on("domready", function(w){ chart = w.chart[0][Object.keys(w.chart[0])[0]].hc chart.renderer.button('Sample Button', 10, 10, callback, normalState, hoverState, pressedState, disabledState) .attr({ zIndex : 10, height: 15, width: 150, 'text-align': 'center' }) .on('click', function() { //script to perform some action }) .add(); });

We already have a script to highlight i-buttons having description . In view mode, widget i-buttons are visible only if we hover over the widget. Here is a script to always show the i-buttons with description. Steps: Create a dashboard and add some widgets in it. Add description to required widgets Add below script to dashboard Save the script and refresh dashboard dashboard.on('widgetready', function(se, ev){ if(ev.widget.desc && ev.widget.desc.trim().length > 0) { let toolBarWidth = 190 console.log(toolBarWidth) $(`widget[widgetid="${ev.widget.oid}"] widget-header .app-icon--general-info-circle`).css('color', 'red') $(`widget[widgetid="${ev.widget.oid}"] widget-header .app-icon--general-info-circle`).closest(' widget-toolbar').css('width', toolBarWidth + 'px') $(`widget[widgetid="${ev.widget.oid}"] widget-header .app-icon--general-info-circle`).closest('.widget-toolbar-btn').css('opacity', '1') } })

Here is a script to add buttons to switch between different measures/calculation. For example, in below screenshot, each button represent different calculations and when we click on it, chart will show corresponding calculated values in Y-Axis. (The X-axis won't change) Steps: Create a bar/column/line/are chart Widget should contain only one category(dimension). You can create as many Values panels as required 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. 3. Add below script to widget 4. Save the script and refresh widget widget.on('processresult', function(se, ev){ ev.result.chart.marginTop= 60 }); widget.on("domready", function(w){ chart = w.chart[0][Object.keys(w.chart[0])[0]].hc $.each(w.metadata.panels[1].items, function(index, value){ chart.renderer.button(value.jaql.title, 10 + (index * 70), 10) .attr({ zIndex : 10, height: 15, width: 50, 'text-align': 'center' }) .on('click', function() { value.disable = false $.each(w.metadata.panels[1].items, function(itemIndex, itemValue){ if(itemIndex == index) itemValue.disabled = false else itemValue.disabled = true }) widget.refresh(); }) .add(); }) });

If X-axis of a line chart, bar chart, column chart or area chart contains too many items, one option to view them is enable 'Auto Zoom' feature in widget design panel. Alternatively we can enable scrollbar using below script Steps: Create a line/bar/column/area chart Add below script to widget. Change min and max value to update number of bars displayed at a time. For example, in below script min value is 0 and max value is 5. So 6 bars will be displayed at a time and we can scroll to view other items. Save the script and refresh widget widget.on('processresult',function(se,ev){ ev.result.xAxis.scrollbar= { enabled: true } ev.result.xAxis.min = 0 ev.result.xAxis.max = 5 })

Here is a blox template and script to create filter buttons, where each buttons represent items in a table column. These buttons are created dynamically and no need to create separate buttons manually. Steps: 1. Create a blox with below Blox Script. Add only one dimension/field under Items panel (in below screenshot, Region is the dimension). Add same field as a dashboard filter. In below blox script: "item": "{panel:Region}" - Replace ' {panel:Region} ' with name of panel you added in blox "dim": "[Records.Region]" - Replace ' [Records.Region] ' with dimension name (here Records is table name and Region is column name) "title": "Region" - Replace ' Region ' with title of dashboard filter { "style": ".scroll .content div{display:inline-block}", "script": "", "title": "", "titleStyle": [ {} ], "carouselAnimation": {}, "body": [ { "type": "Container", "items": [ { "type": "Container", "spacing": "none", "items": [ { "type": "ActionSet", "margin": "0px", "padding": "0px", "actions": [ { "type": "Add Filter", "style": { "color": "rgb(9, 130, 13)", "font-weight": "600", "border": "1px solid rgba(9, 130, 13, 0.3)", "border-radius": "25px" }, "title": "{panel:Region}", "data": { "filters": { "item": "{panel:Region}", "dim": "[Records.Region]", "title": "Region" } } } ] } ] } ] } ], "actions": [] } 2. Create a custom action ' Add Filter ' with below script. (Here is a guide on how to create custom action in Blox: https://support.sisense.com/kb/en/article/sisense-blox-custom-actions-guide) const filters = payload.data.filters.item const filter_arr = filters.split('\n') console.log(payload) prism.activeDashboard.filters.update( { 'jaql':{ 'dim': payload.data.filters.dim, 'title': payload.data.filters.title, 'filter':{ 'members':[filter_arr[0]] }, 'datatype':'text' } },{'save':true, 'refresh':true} ) $(payload.container).find('button.btn').css({ 'background-color': '#ffffff' }); $(payload.container).find('button.btn:contains(' + filter_arr[0] + ')').css({ 'background-color': 'rgba(9, 130, 13, 0.15)' }); 3. Add below script as Blox widget script (in script editor window) Here, replace ' Region ' with name of dashboard filter widget.on('ready',function(widget, args){ var dashboardFilters = widget.dashboard.filters.$$items; var textOfButtonToFormat = dashboardFilters.filter(i=>i.jaql.title == 'Region')[0].jaql.filter.members[0]; $('button.btn', element).css({ 'background-color': '#ffffff' }); $('button.btn:contains(' + textOfButtonToFormat + ')', element).css({ 'background-color': 'rgba(9, 130, 13, 0.15)' }); }) 4. Save the scripts and refresh dashboard

Pie chart has an option to display top n slices and group rest of the slices to a single slice called 'Others' . While we click on that 'Others', it will show all items within that Slice. But we don't have this option in Bar/Column chart. Here is a script to group top n bars in Column/Bar chart. Steps: Create a Bar/Column chart Add below script to the widget and specify how many bars need to be displayed. Rest of the bars will group to single bar called 'Others' Save the script and refresh the widget Contact us for the script Price $20 Notes: Value of bar 'Others' is the SUM of values of items associated with the bar. This functionality works when dimension in X-axis has no filter. For example, if X-axis shows 'Region', the functionality works well if all regions are selected in dashboard filter. If only few Regions are excluded or included, chart will show all bars. Contact us if you need to customize the existing behavior of script.

In Sisense Pivot2, maximum items per page we can set is 200. Here is a script that remove pagination in pivot and enable infinite scroll. Steps: Create a pivot table Add below script to widget Save the script and refresh widget widget.style.pageSize = "9999999999"

In Sisense, we can add description about a widget in its i-button which is located at widget header. But it is difficult to know if any description is added or not, we may have to hover over or click on it to find it. Below script will highlight i-button if any description is added to a widget. Steps: Create a dashboard and add widgets in it Add below script to dashboard. Change color from red to any color you want Save the script and refresh dashboard dashboard.on('widgetready', function(se, ev){ if(ev.widget.desc && ev.widget.desc.trim().length > 0) { $(`widget[widgetid="${ev.widget.oid}"] widget-header .app-icon--general-info-circle`).css('color', 'red') } })

Sisense dashboards have left and right panels. Left panel is to display list of dashboards and Right panel is for dashboard filters. These panels are always displayed unless we added parameters to hide it in URL. Here is a script to Hide these panels Steps: Create dashboard Add below script to dashboard Refresh the dashboard setTimeout(()=>{ //Collapse dashboard panel (left) if (!$('#prism-leftview.collapsed-pane')[0]){ $( "#prism-leftview .trillapser-container" ).trigger( "click" ); } //Hide arrow button to prevent expand the panel again $('.trillapser-container.right').css('display', 'none') //Collapse filter panel (right) if (!$('#prism-rightview.collapsed-pane')[0]){ $( "#prism-rightview .trillapser-container" ).trigger( "click" ); } //Hide arrow button to prevent expand the panel again $('.trillapser-container.left').css('display', 'none') }, 1)