DBI Cheats

#41

Hi Kris,


Here is another piece of code that I found usefull in some ocasions. The script is about a click on a category on a pie chart that, depending on the category name jumps to different dashboards.

Image title


var args = dundas.Utility.getAdapterHitTestArguments(e.originalEvent, chart1); // Handles touch, zooming, etc.
var result = chart1.control.hitTest(args.offsetX, args.offsetY, args.target);

/**************************************************************
Navigation
**************************************************************/
var url = '';
//var siteUrl = "Dashboard/";
var siteUrl = "";

// navigation object
var navigation = new dundas.view.NavigateAction();

// opens the target in the same window; use NEW_WINDOW to open it in a new window
navigation.actionTarget = dundas.view.ActionTarget.SAME_WINDOW;

// specifies that it will navigate to a URL
navigation.navigateType = dundas.view.DataActionNavigateType.URL;

if (result && result.point) {
var tipocons = result.point.xValues[0];
var value = result.point.yValues[0];

switch(tipocons.toString())
{
case "DIVERSOS.tipo_consumo":
//url = "c229df6e-d393-4d57-973f-fb4e2b03b679?e=false&vo=viewonly";
url = "c229df6e-d393-4d57-973f-fb4e2b03b679";
break;
case "UNIDADES ORGÂNICAS.tipo_consumo":
url = "fd411302-dd9e-427e-bce8-e12aac48c3b5";
break;
case "OBRAS.tipo_consumo":
url = "01a0099f-b029-4144-9d5d-f6f88bfc96ae";
break;
case "MÁQUINAS.tipo_consumo":
url = "df7fdd3c-b3e7-45b4-b001-138ecf63415b";
break;
}

// URL for another dashboard, change it to your own dashboard URL
navigation.targetUrl = siteUrl + url;
navigation.execute(new dundas.view.ActionEventArgs());


}




Luis

#42

Oooh, pretty! Thanks, Luis! I'm adding this to my collection. I love that all of these ideas are going to allow me to improve my clients' experience with DBI.

#43

All of our dashboards allow our users to go back in time and look at data "As Of" a date that they select. Our controls are set up to use dates relative to the selected "As Of" date. When calculating the relative dates, I often need to know how many years, months, weeks, or days there are between two dates. Not wanting to reinvent the wheel, I googled around and adapted some dateDiff code I found on stackoverflow.com. Thought some of you may also want something like this:


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//// adapted from http://stackoverflow.com/questions/7763327/how-to-calculate-date-difference-in-javascript
/// pass in two dates and a grain (year, month, week, day) and get the difference calculated for that grain
// example: how many months between two dates?
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

inDays: function(d1, d2) {
var t2 = d2.getTime();
var t1 = d1.getTime();

return parseInt((t2-t1)/(24*3600*1000));
},

///////////////////////////////////////////////////////////////////////////


inWeeks: function(d1, d2) {
var t2 = d2.getTime();
var t1 = d1.getTime();

return parseInt((t2-t1)/(24*3600*1000*7));
},

//////////////////////////////////////////////////////////////////////////////


inMonths: function(d1, d2) {
var d1Y = d1.getFullYear();
var d2Y = d2.getFullYear();
var d1M = d1.getMonth();
var d2M = d2.getMonth();

return (d2M+12*d2Y)-(d1M+12*d1Y);
},

//////////////////////////////////////////////////////////////////////////////


inYears: function(d1, d2) {
return d2.getFullYear()-d1.getFullYear();
},

////////////////////////////////////////////////////////////////////////////


dateDiff: function(date1, date2, grain) {

var d1 = new Date(date1);
var d2 = new Date(date2);
if (grain === "day")
{
var days = myLib.inDays(d1, d2);
return days;
}
if (grain === "week")
{
var weeks = myLib.inWeeks(d1, d2);
return weeks;
}
if (grain === "month")
{
var months = myLib.inMonths(d1, d2);
return months;
}
if (grain === "year")
{
var years = myLib.inYears(d1, d2);
return years;
}

#44

Hi Luis,


One advise from me would be to not use private methods and properties ( you can diffirintiate private methods by underscore in the beginning ).


If you use < parameterHierarchy1.control.hierarchyExplorer.refresh(); > instead of < parameterHierarchy1.control._refreshSelection(viewParam.parameterValue); >, it should give you the same result and you won't need to worry about the changes that can be done anytime in our private methods =)

#45

Shift + Tab = will format code in the Script Editor

#46

Thanks for your advise Ekaterina.

#47

We have saved a list of some useful scripts that we use to enhance the functionality, flow, and user experience. I would love to see what scripts others have come up with to add an extra layer of interaction with the users on dashboards.

#48

Hi Tom,

I just experimented with something similar. You can do it rather easily if you're using a Dundas cube, but we're sourcing everything from SSAS. This was one of my scripting attempts that almost worked. Just attached it to the onDataChanged event of the datagrid.

It works unless the grid requires scrolling far enough to require another async data call to get the next 'page' of data.


If you're using a Dundas cube, you could use something similar as a calculated item and I think it would work fine. Just make sure it returns as a dimension members instead of a measure. I know that sounds odd, but Dundas sees the format as a String value and doesn't like those in the measure values (it breaks sorting and exporting).


function secondsToHHMMSS(sec_num) {

var hours = Math.floor(sec_num / 3600);

var minutes = Math.floor((sec_num - (hours * 3600)) / 60);

var seconds = Math.floor(sec_num - (hours * 3600) - (minutes * 60));

if (hours < 10) {hours = "0"+hours;}

if (minutes < 10) {minutes = "0"+minutes;}

if (seconds < 10) {seconds = "0"+seconds;}

var time = hours+':'+minutes+':'+seconds;

return time;

}



var cells = this.metricSetBindings[0].dataResult.cellset.cells[0];

for(i=0; i<cells.length; i++) {

if (typeof cells[i] != 'undefined') {

cells[i].formattedValue = secondsToHHMMSS(cells[i].value);

}

}

this.control.invalidate();

#49

Thanks Jeff!

#50

Here's the latest addition to our ever-growing internal cheat list, courtesy of Waliur Rahman at DBI Support:


In cases where a time-based bar chart control should only show 6 data points (due to space considerations, user request, whatever), the current month must always be centered in the control.


Place this script in the Data Changed action of the control in question

// Get the current month

var today = new Date();

// Set the starting point of the chart to two months before current month

var startDate = new Date(today.getFullYear(), today.getMonth()-3,today.getDate());

// Set the ending point of the chart to three months after the current month so that total data points will be 6

var endDate = new Date(today.getFullYear(), today.getMonth()+3,today.getDate());

// Position the scrollbar for the chart

chart1.control.xViewport.zoom(startDate, endDate);


Simple but effective and allows us to improve the user experience - always an awesome thing!!


#51

Care to share a few of your most-often-used scripts? Thanks!

#52

Did you make any progress on this one, Tom? I'd love to have a good solution that works cleanly with our OLAP cube data. About to be a big limitation for us.

#53

Since we are in the early days of using Dundas BI rather than Dundas Dashboards we have not started creating a list of cheats yet. That said, we have started documenting the layout and naming rules that we are putting in place to ensure the dashboards all have similar looks and feels.

#54

Very slick. Can't wait to give it a try

#55

Hi Jeff, as usual, other stuff has taken a priority but I do plan on exploring your solution and I will report back with whatever I wind up doing. ~Tom

#56

Add your own custom font to the dashboard!


1. Select a font that you like from google : https://fonts.google.com/

2. Waste a little bit of time because this is too easy and you don't want this to seem too simple.

3. Click the + button beside the font that you want to use

4. After clicking the + a notification will appear at the bottom of the screen

5. Click the notification and copy the Embed Font code to your clipboard.

Hint: mine was <link href="https://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet">

6. Go to Dundas BI

7. Drop an HTML Label control somewhere on your dashboard

8. Edit the "HTML Label Text" property of the HTML Label. (it's under Text)

9. The HTML label will now appear invisible because it's not rendering any text but it will be dowloading your font everytime someone opens the dashboard.

10. Use your new font by changing the "Font Family" property of any control on your dashboard. Hint: You have to type it in. In my case it was "Oswald".

11. Email jeffh@dundas.com and show him how cool your dashboard now looks with custom fonts


Note: All other font properties Font Size, Font Style, Font Colour will work as usual with your new font.


enjoy




#57

Step 2 is the best Jeff!

#58

nice one

#59

I have asked the support before to give me hint on how to auto color the pointer of the gauge based on the state of the gauge, the gave me the following code which I use it and I save it in my own cheats, you can update the code to include other states.

var pointerValue = gauge1.control.pointers[0].value;

if ((pointerValue > gauge1.control.ranges[0].endValue) && (pointerValue <gauge1.control.ranges[1].endValue))

{

var currentRangeColor = gauge1.control.ranges[0].fill;

gauge1.control.pointers[0].fill = newdundas.controls.SolidColorBrush(currentRangeColor);

}

else

{

var currentRangeColor = gauge1.control.ranges[1].fill;

gauge1.control.pointers[0].fill = newdundas.controls.SolidColorBrush(currentRangeColor);

}

1 Like
#60

Cool stuf