Scrolling Text / Data Labels

#1

How was the scrolling text done on this demo dashboard?

https://samples.dundas.com/Dashboard/c397551a-e1f0-48e2-bb22-fa0def388063?e=false&vo=viewonly


Also, could that be done with data labels?


#2

The scrolling effect is handled by the HTML marquee tag.

In this particular sample, we defined the static text and pass it to the <marquee> tag. For example:


var text = "Your text";


//set the scrolling speed

var scrollSpeed = 5;

var html = "<marquee class='html-marquee' direction='left' behavior='scroll' scrollamount='"+scrollSpeed+"' >"+text+"</marquee>";

// newsElement is a rectangle on the dashboard to contain the text

newsElement.container.innerHTML = html;


If you want to show text from your source data using a data label, instead of having static content for 'text'

variable, you can simply change the text variable, for example:


var text = dataLabel1.metricSetBindings[0].dataResult.cellset.cells[0][0];


Note that you will have to check the Allow HTML Formatting property on the data label for this to work.

#3

Thank you, follow up question, how are you animating the ringing phone icon in the "In-bound calls in queue" area on the same dashboard (bottom left hand corner) and the "count down to next update" timer in the upper right?


Thanks!

#4

The animation of the ringing phone relies on the jQuery.effect() method. For example:


$(phoneImage.container).effect("shake", {times:4, distance:5} );


The script is triggered by the Data Changed action on the data label.


The countdown uses the Timer component in DBI with a script on the Timer Interval Tick action to count down the seconds. Here is an example of Using the Timer control.

#5

Hi!


I have tried to show the text from a source using a data label, but it scrolls the text "[object Object]". Have checked the Allow HTML Formatting property.


This is what my data label shows:

Image title

Any idea on what the problem is?

Another question is how can I format the color and font of the written text!


Thanks a lot!!

#6

Since it's a datetime, I assumed you put it in the ROWS or COLUMNS section in the Metric Set Data Analyis Panel. If this assumption is correct, you need to retrieve the date something like this:


var text = dataLabel1.metricSetBindings[0].dataResult.cellset.rows[0].members[0].memberTime;


To format the color and font of the written text, you simply define the style for the marquee tab. So the entire script looks like below and you can place the script in the dashboard Ready event or other events e.g. Data Changed event.


var text = dataLabel1.metricSetBindings[0].dataResult.cellset.rows[0].members[0].memberTime;

// Get target element (for example, an HTML Label) height/width
var height =htmlLabel1.height;
var width =htmlLabel1.width;

//Appearance
var fontFamily = "Calibri, Source Sans Pro, Sans-Serif";
var fontSize = "26px";
var fontColor = "White";
var scrollSpeed = 5;
var backgroundColor = "blue";


var html = "<style type='text/css'>.html-marquee {height:"+height+"px;width:"+width+"px;background-color:"+backgroundColor+";font-family:"+fontFamily+";font-size:"+fontSize+";color:"+fontColor+"}</style><marquee class='html-marquee' direction='left' behavior='scroll' scrollamount='"+scrollSpeed+"' >" +text.toISOString()+"</marquee>";
htmlLabel1.container.innerHTML = html;

Image title

#7

Thanks a lot, Sandy! This really helps!


To further extend this problem, I have this situation:



I want to scroll in the rectangle the last three earnings from a live database with date, hour and amount of money (something like "Date and Hour: 12.12.2018 15:29 - Amount: 29") repeated three times, in the same scroll, with different values.


The database has three separate columns for date, hour and amount.


My first ideea is to add in this script three different data labels with hour and amount values, in the text variable.


The problem is that I don't know how to get into the variable, both date and time dimension and money measure. I've tried getting all the text from the datalabel with this: dataLabel1._container.textContent; but doesn't even load the text in the variable.


Any ideas?

Thanks!!!

#8

You can retrieve data from a data visualization from the metricSetBinding.dataResult.cellset object via script. The measure values can be accessed by looping through the array cellSet.cells and the ROW/Column hierarchies can be accessed by looping through the array cellSet.rows/cellset.columns respectively.


Please refer to Read data from a Visualization by script for details.


In your case, if you bind date and time as different hierarchy in the ROWS section and Amount as Measure in the Data Analysis Panel, you can do something like this:


var dimension1 = dataLabel1.metricSetBindings[0].dataResult.cellset.rows[0].members[0].caption;
var dimension2 = dataLabel1.metricSetBindings[0].dataResult.cellset.rows[0].members[1].caption;
var measure = dataLabel1.metricSetBindings[0].dataResult.cellset.cells[0][0].value;
var text = "Date and Hour: "+dimension1+" "+dimension2+" - Amount: "+measure;



#9

I’m just messing with the possibilities of using the scrolling label. Can you help me understand if it is possible for the label to scroll through a list of something that I would have placed on the rows section of the visualization?
For example:

"< marquee direction=“left” scrollamount = “5” height=“100px”> [row_item] "

#10

Hi Derek,

Yes, that would be possible by using the HTML marquee tag in the Label Text of the Data Label visualization.

Here is an example on how to set this up. Assuming that I have a data label as below: (no matter if you put the dimensions under ROWS or COLUMNS)
image

I use the following marquee tag scripts in the TEXT tab of the Properties panel of the visualization -> Label Text.
You may modify the attributes of marquee tag to get the desired result and add styling such as below:

image

(Note: to add Enter between the lines of the text, you may use br tag as shown in the picture)

The above script will scroll the Data Label’s text vertically.

(Unfortunately, I was not able to add the whole scripts , due to the limitations of using html tags here)