Search Results

Sometimes you may need to show some messages, like information about the charts, on loading the dashboard. This can be achieved using below script. Steps: Create a dasboard Add below script to dashboard. Update the template with messages you need to display on modal. Also possible to specify an HTML url instead of text message if you change 'template' to 'templateUrl'. save the script and refresh dashboard dashboard.on('initialized', function (se, ev) { const modalScope = prism.$ngscope; const modalDom = prism.$injector.get('ux-controls.services.$dom'); const options = { scope: { in: modalScope, }, template: `Welcome to Sales Dashboard (Description about the dashboard...)`, }; const ui = {}; modalDom.modal(options, ui); if (!modalScope.$$phase) { modalScope.$apply(); } $('.md-ai-modal').css({'z-index':'999', 'position':'absolute', 'left': '0', 'right': '0', 'top':'30%'}) $('.md-content').css({'z-index':'999', 'position':'absolute', 'left': '0', 'right': '0', 'top':'30%', 'width':'500px'}) $('.md-overlay').css({'z-index':'998', 'position':'absolute'}) })

Here is a script to convert a Column chart to WordCloud chart Steps: Create a Column chart. It should contain only one field as category and one Value panel. 2. Add below script to widget 3. Save the script and refresh widget (function(m) { "object" === typeof module && module.exports ? module.exports = m : m(Highcharts) })(function(m) { var w = function() { return function(d) { var n = this, k = n.graphic, p = d.animate, m = d.attr, q = d.onComplete, z = d.css, r = d.group, v = d.renderer, D = d.shapeArgs; d = d.shapeType; n.shouldDraw() ? (k || (n.graphic = k = v[d](D).add(r)), k.css(z).attr(m).animate(p, void 0, q)) : k && k.animate(p, void 0, function() { n.graphic = k = k.destroy(); "function" === typeof q && q() }); k && k.addClass(n.getClassName(), !0) } }(); (function(d, n) { var k = d.each, p = d.extend, m = d.isArray, q = d.isNumber, z = d.isObject, r = d.Series, v = function(a, b) { return !(b.left > a.right || b.right < a.left || b.top > a.bottom || b.bottom < a.top) }, D = function(a, b) { var c = !1, g = a.rect, f; a.lastCollidedWith && (f = a.lastCollidedWith.rect, (c = v(g, f)) || delete a.lastCollidedWith); c || (c = !!d.find(b, function(b) { var c; f = b.rect; if (c = v(g, f)) a.lastCollidedWith = b; return c })); return c }, B = function(a) { var b = Math.ceil((Math.sqrt(a) - 1) / 2), c = 2 * b + 1, g = Math.pow(c, 2), f = !1, c = c - 1; 1E4 >= a && ("boolean" === typeof f && a >= g - c && (f = { x: b - (g - a), y: -b }), g -= c, "boolean" === typeof f && a >= g - c && (f = { x: -b, y: -b + (g - a) }), g -= c, "boolean" === typeof f && (f = a >= g - c ? { x: -b + (g - a), y: b } : { x: b, y: b - (g - a - c) }), f.x *= 5, f.y *= 5); return f }, w = function(a, b) { a /= b; return { width: 256 * a, height: 256, ratio: a } }, C = function(a, b, c) { return b + (c - b) / (a - 1) * Math.floor(Math.random() * a) }, G = function(a, b) { a = a.getBBox(); var c = b.width / 2, g = -(b.height / 2), f = b.height / 2; return !(-(b.width / 2) < a.x && c > a.x + a.width && g < a.y && f > a.y + a.height) }; d.seriesType("wordcloud", "column", { animation: { duration: 500 }, borderWidth: 0, clip: !1, colorByPoint: !0, placementStrategy: "center", rotation: { from: 0, orientations: 2, to: 90 }, showInLegend: !1, spiral: "rectangular", style: { fontFamily: "sans-serif", fontWeight: "900" }, tooltip: { followPointer: !0, pointFormat: '\x3cspan style\x3d"color:{point.color}"\x3e\u25cf\x3c/span\x3e {series.name}: \x3cb\x3e{point.weight}\x3c/b\x3e\x3cbr/\x3e' } }, { animate: r.prototype.animate, bindAxes: function() { var a = { endOnTick: !1, gridLineWidth: 0, lineWidth: 0, maxPadding: 0, startOnTick: !1, title: null, tickPositions: [] }; r.prototype.bindAxes.call(this); p(this.yAxis.options, a); p(this.xAxis.options, a) }, deriveFontSize: function(a) { return Math.floor(25 * a) }, drawPoints: function() { var a = this, b = a.hasRendered, c = a.xAxis, g = a.yAxis, f = a.group, d = a.options, m = d.animation, n = a.chart.renderer, A = n.text().add(f), r = [], v = a.placementStrategy[d.placementStrategy], B = a.spirals[d.spiral], C = d.rotation, H = a.points.map(function(a) { return a.weight }), I = Math.max.apply(null, H), t = w(c.len, g.len), E = a.points.sort(function(a, b) { return b.weight - a.weight }); k(E, function(c) { var g = p({ fontSize: a.deriveFontSize(1 / I * c.weight) + "px", fill: c.color }, d.style), l = v(c, { data: E, field: t, placed: r, rotation: C }), h = { align: "center", x: l.x, y: l.y, text: c.name, rotation: l.rotation }, k, x, e; A.css(g).attr(h); c.clientRect = e = p({}, A.element.getBoundingClientRect()); x = A; for (var w = t, F = 1, y = { x: 0, y: 0 }, u = c.rect = p({}, e); (D(c, r) || G(x, w)) && !1 !== y;) y = B(F, { field: w }), z(y) && (u.left = e.left + y.x, u.right = u.left + u.width, u.top = e.top + y.y, u.bottom = u.top + u.height), F++; x = y; if (z(x)) { h.x += x.x; h.y += x.y; p(l, { left: h.x - e.width / 2, right: h.x + e.width / 2, top: h.y - e.height / 2, bottom: h.y + e.height / 2 }); e = t; if (!q(e.left) || e.left > l.left) e.left = l.left; if (!q(e.right) || e.right < l.right) e.right = l.right; if (!q(e.top) || e.top > l.top) e.top = l.top; if (!q(e.bottom) || e.bottom < l.bottom) e.bottom = l.bottom; t = e; r.push(c); c.isNull = !1 } else c.isNull = !0; m && (k = { x: h.x, y: h.y }, b ? (delete h.x, delete h.y) : (h.x = 0, h.y = 0)); c.draw({ animate: k, attr: h, css: g, group: f, renderer: n, shapeArgs: void 0, shapeType: "text" }) }); A = A.destroy(); c = Math.min(1 / (2 * Math.max(Math.abs(t.left), Math.abs(t.right))) * c.len, 1 / (2 * Math.max(Math.abs(t.top), Math.abs(t.bottom))) * g.len); a.group.attr({ scaleX: c, scaleY: c }) }, hasData: function() { return z(this) && !0 === this.visible && m(this.points) && 0 < this.points.length }, placementStrategy: { random: function(a, b) { a = b.field; b = b.rotation; return { x: Math.round(a.width * (Math.random() + .5) / 2) - a.width / 2, y: Math.round(a.height * (Math.random() + .5) / 2) - a.height / 2, rotation: C(b.orientations, b.from, b.to) } }, center: function(a, b) { a = b.rotation; return { x: 0, y: 0, rotation: C(a.orientations, a.from, a.to) } } }, pointArrayMap: ["weight"], spirals: { archimedean: function(a, b) { var c = b.field; b = !1; var c = c.width * c.width + c.height * c.height, d = .2 * a; 1E4 >= a && (b = { x: d * Math.cos(d), y: d * Math.sin(d) }, Math.min(Math.abs(b.x), Math.abs(b.y)) < c || (b = !1)); return b }, rectangular: function(a, b) { a = B(a, b); b = b.field; a && (a.x *= b.ratio); return a }, square: B }, getPlotBox: function() { var a = this.chart, b = a.inverted, c = this[b ? "yAxis" : "xAxis"], b = this[b ? "xAxis" : "yAxis"]; return { translateX: (c ? c.left : a.plotLeft) + (c ? c.len : a.plotWidth) / 2, translateY: (b ? b.top : a.plotTop) + (b ? b.len : a.plotHeight) / 2, scaleX: 1, scaleY: 1 } } }, { draw: n, shouldDraw: function() { return !this.isNull } }) })(m, w) }); widget.on('processresult', function(widget,ev) { ev.result.chart.type = 'wordcloud' ev.result.plotOptions['wordcloud'] = ev.result.plotOptions['column'] delete ev.result.plotOptions['column'] ev.result.tooltip.enabled = true ev.result.plotOptions.wordcloud.rotation = {orientations:0} wordCloudArr = [] $.each(ev.result.series[0].data, function(index, value){ value.weight = value.y wordCloudArr.push({'name':value.selectionData[0], 'weight':value.y}) }) ev.result.series[0].data = wordCloudArr }) widget.on('beforedatapointtooltip', function(widget,ev) { ev.cancel = true })

Below script will allow you to change default 'No Result' message to any message you want. It is possible to apply different messages to each widget. Steps: Create a widget Add below script. Update the variable 'no_result_message' and 'no_result_url' with your new message and image url respectively. Save the script and refresh widget widget.on('domready', function(se){ no_result_message = 'No sales data available' no_result_url = 'https://thumbs.dreamstime.com/z/no-found-symbol-unsuccessful-search-vecotr-upset-magnifying-glass-cute-not-zoom-icon-suitable-results-oops-page-failure-122786031.jpg' if(se.$noResults) { if (prism.activeWidget == null) no_result_container = $(`widget[widgetid="${se.oid}"]`) else no_result_container = $('.prism-widget-preview') if(no_result_message.length > 0) { $(no_result_container).find('.widget-no-result-overlay .widget-no-result-notify-holder .no-result-title').text(no_result_message) } if(no_result_url.length > 0) { $(no_result_container).find('.widget-no-result-overlay .widget-no-result-notify-holder .image').attr('src', no_result_url) $(no_result_container).find('.widget-no-result-overlay .widget-no-result-notify-holder .image').css('width', 'auto') } } })

By default, in Column and Bar charts, all value labels are displayed outside bars. But here is a way to display values inside bar Steps: Create bar/column chart. Make sure value label is enabled Add below script to the widget Save the script and refresh widget widget.on('processresult',function(se,ev){ ev.result.plotOptions.series.dataLabels.inside = true ev.result.plotOptions.series.dataLabels.align = 'right' ev.result.plotOptions.series.dataLabels.color = '#FFFFFF' }) Here is a script to display both value label and category name inside bar widget.on('processresult',function(se,ev){ ev.result.xAxis.labels.align = 'left' ev.result.xAxis.labels.x = 5 ev.result.xAxis.labels.style.color = '#FFFFFF' ev.result.plotOptions.series.dataLabels.inside = true ev.result.plotOptions.series.dataLabels.align = 'right' ev.result.plotOptions.series.dataLabels.color = '#FFFFFF' })

By default, only data designer can change the widget type. Below script will add buttons to a widget, so that user can change the widget type to Line/Bar/Column/Area charts. Steps: Create new widget - (line/bar/column/pie/area chart) Add below script to widget Save the script and refresh widget widget.on('processresult', function(se, ev){ ev.result.chart.marginTop= 60 }); widget.on("domready", function(w, args){ chart = w.chart[0][Object.keys(w.chart[0])[0]].hc chart.renderer.button('Line', 10, 10) .attr({ zIndex : 10, height: 15, width: 50, 'text-align': 'center' }) .on('click', function() { widget.type = 'chart/line' widget.subtype = 'line/classic' widget.refresh(); }) .add(); chart.renderer.button('Column', 80, 10) .attr({ zIndex : 10, height: 15, width: 50, 'text-align': 'center' }) .on('click', function() { widget.type = 'chart/column' widget.subtype = 'column/classic' widget.refresh(); }) .add(); chart.renderer.button('Bar', 150, 10) .attr({ zIndex : 10, height: 15, width: 50, 'text-align': 'center' }) .on('click', function() { widget.type = 'chart/bar' widget.subtype = 'bar/classic' widget.refresh(); }) .add(); }); It is possible to change style of buttons by adding 'style' property in the script

Sometime the widget looks messy when we enable value labels. At the same time it would be good to enable it to analyze the chart easily. So let the end user enable to disable value labels as they required. Here is a script to add button to chart to show/hide value labels. Steps: Create new widget - (line/bar/column/pie/area chart) Add below script to widget Save the script and refresh widget displayValue = false widget.on('processresult', function(se, ev){ ev.result.chart.marginTop= 60 ev.result.plotOptions.series.dataLabels.enabled = displayValue ev.result.plotOptions.bar.dataLabels.enabled = displayValue }); widget.on("domready", function(w, args){ chart = w.chart[0][Object.keys(w.chart[0])[0]].hc chart.renderer.button( displayValue == true?'Hide Values':'Show Values', 10, 10) .on('click', function () { displayValue = !displayValue widget.refresh(); }) .add(); }); It is possible to change style of buttons by adding 'style' property in the script

Sometimes we may need to add some more information about the data displayed on the widget. i-button is an option to add this description, but sometimes user may not aware about the button. Here is an alternative method for adding information that will always appear on the widget. Steps: Create widget Add below script to widget. Update text to be displayed and set format of text Save the script and refresh widget widget.on('processresult',function(se,ev){ //Subtitle ev.result.subtitle = { text: 'This is a sample subtitle. This is a sample subtitle. This is a sample subtitle.', align: 'left', style: { color: '#787878', fontSize:'13px', fontWeight:'bold' } } ev.result.chart.marginTop = 75 // to add required space to display subtitle at the top })

A step chart is a line chart in which points are connected by horizontal and vertical line segments, looking like steps of a staircase. Use below script to display line chart as steps. Steps: Create a line chart. Make sure the Line Type selected is Straight (not Smooth) Add below script to the widget Save the script and refresh the widget widget.on('processresult',function(se,ev){ stepType = 'left' //possible values are : left, right, center ev.result.series[0].step = stepType })

There can be situations where we need to display widget title and axis labels based on selected item in filter. Here is a script to achieve it Here, selected region in filter is displayed in widget title and in X-axis label Steps: Create a widget Add below script to widget. Update the variable 'filterName' with name of filter Save the script and refresh widget widget.on('processresult', function(se, ev){ filterName = 'Region' //Name of filter selectedFilter = widget.dashboard.filters.$$items.find(el=>el.jaql.title == filterName).jaql.filter.members[0] ev.result.xAxis.title.text = selectedFilter + ' Values' ev.widget.title = 'Total values by year: ' + selectedFilter })

Here is a method to convert a column chart to fixed placement columns (Chart showing overlapping placement of columns). Steps: Create a column chart (select Classic column type in design panel) Add below script to widget Save the script and refresh widget widget.on('processresult', function(se, ev){ ev.result.plotOptions.column.grouping = false ev.result.tooltip.shared = true ev.result.tooltip.enabled = true $.each(ev.result.series, function(index, value){ value.borderWidth = 1 value.borderColor = value.color value.pointPadding = 0.1 * (index+1) $.each(value.data, function(dataIndex, dataValue){ dataValue.color = Highcharts.color(dataValue.color).setOpacity(0.6).get('rgba') }) value.color = Highcharts.color(value.color).setOpacity(0.6).get('rgba') }) }) widget.on("beforedatapointtooltip", function (se, args){ args.cancel=true; });

Here is a script to hide one or widgets from a dashboard. (Its possible to modify the script so that a widget can be hide/unhide based on some condition or value selected in a filter) Steps: Add below script to dashboard Update the variable 'widgetList' with list of widget to hide Save the script and refresh dashboard dashboard.on('widgetrefreshed', function (se, ev) { widgetList = ['625e34a5aer456002ea7b64d', '6789cdc6fa34563002er56456'] if(widgetList.includes(ev.widget.oid)) { $(`widget[widgetid="${ev.widget.oid}"]`).closest('.dashboard-layout-subcell-host').addClass('dontshowme-parent') } });

The script below displays value of each items along with legend Steps: Create a pie chart Add below script to widget Save the script and refresh widget widget.on('processresult', function(se, ev){ ev.result.legend.labelFormatter = function(){ console.log(this) legendData = ev.result.series[0].data.find(el=>el.name == this.name).y myItem = se.metadata.panels[1].items[0] myMask = $$get(myItem, "format.mask", {}) var numberFormatter = prism.$injector.get('$filter')('numeric'); formattesValue = numberFormatter(legendData, myMask); return this.name + ' (' + formattesValue + ')' } })