Is there any Dataset Ticker Optional Javascript Sample for working with snippets values?

Get Help
1

I get data from remote dataset and have 2 column.

1st is the name of the sold product
2nd is the negative or possitive sales by hour percentage value

i just want to get the minus number like -1,23 and show red down arrow near it
if its 0 show right arrow and then if it gets 1,23 value show the green up arrow like how we have on currency module.

Do i need to create table and insert the value snippet to the cell and then get it by javascript or is there a way to use snippet value directly inside the javascript code.

Here is my code

HTML:

<body onload="myFunction()">     
<table>
    	<tbody>
    		<tr>
    			<td><span style="font-size:36px;"><span style="color:#FFFFFF;">[product|1]</span></span></td>
    			<td><span style="font-size:36px;"><span style="color:#FFFFFF;">[value|1]%</span></span></td>
    			<td>
    			<div class="right-arrow" id="arrow"></div>
    			</td>
    		</tr>
    	</tbody>
</body>

CSS:

.down-arrow {
    margin: 25px 0px 0px 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid red;
}
.up-arrow {
    margin: 25px 0px 0px 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid green;
}
.right-arrow {
    margin: 20px 0px 0px 25px;
    width: 0;
    height: 0;
    border-left: 10px solid gray;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

Javascript:

<script type="text/javascript">


function myFunction() {
  var datavalue= 1;
  var element = document.getElementById("arrow");
  
  if (datavalue > 0) {
  element.className = element.className.replace(/\bright-arrow\b/g, "up-arrow");
}
	else if (datavalue < 0) {
    element.className = element.className.replace(/\bright-arrow\b/g, "down-arrow");
   }
   else {
   element.className = element.className.replace(/\bright-arrow\b/g, "right-arrow");
   }
return;
}
      
</script>

For test use, i equaled datavalue to number, I’ve get black on preview screen and no data is displayed.
Actually in any type of working javascript makes preview screen black and nothing works. Also how can i work with dataset ticker snippets values and equal datasetvalue to snippet [value] ?

Not: CMS 2.1.0 Player any latest version

3

Related to this topic Here's how to show as many ticker items as will fit solution is;

if you use dataset ticker, do not use tags and start the script as;

$(document).ready(function() {
  var datavalue= -1;
  var element = document.getElementById("arrow");
  
  if (datavalue > 0) {
  element.className = element.className.replace(/\bright-arrow\b/g, "up-arrow");
}
	else if (datavalue < 0) {
    element.className = element.className.replace(/\bright-arrow\b/g, "down-arrow");
   }
   else {
   element.className = element.className.replace(/\bright-arrow\b/g, "right-arrow");
   }
return;
});

Works perfect now with test datavalue,

I will be glad if someone show me the way of using remote dataset value as a source for this function ? is there a way to use snippets directly?

4

SOLUTION / SAMPLE; (I use each dataset row seperately inside different regions by filters becuase of my poroject design! If you need to repeat the same code for all the data inside one region, someone need to help for looping, cause i do not know to loop it for all rows)

<table  align="center" border="0" cellpadding="1" cellspacing="0" style="height: 80px; width: 500px;">
	<tbody>
		<tr>
			<td style="width:10%;"><div class="value-equal" id="div1" >[snippet|1]</div></td>
			<td style="width:20%;align:center; vertical-align:middle;">
			<div class="right-arrow" id="arrow" ></div>
			</td>
			<td style="width:35%;"><div class="value-equal">[snippet|2]</div></td>

		</tr>
	</tbody>
</table>


.down-arrow {
    margin: 25px 0px 0px 20px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid red;
}
.up-arrow {
    margin: 25px 0px 0px 20px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid green;
}
.right-arrow {
    margin: 5px 0px 0px 30px;
    width: 0;
    height: 0;
    border-left: 20px solid gray;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.value-up {
    color: green;
    font-weight: bold
    font-family:calibri regular;
    font-size:48px;
}
.value-down {
    color: red;
    font-weight: bold
    font-family:calibri regular;
    font-size:48px;
}
.value-equal {
    color: white;
    font-family:calibri regular;
    font-size:48px;
}


$(document).ready(function() {
var datavalue = parseFloat(document.getElementById("div1").innerHTML);

var element = document.getElementById("arrow");
var divValue = document.getElementById("div1");

  if (datavalue > 0) {
  element.className = element.className.replace(/\bright-arrow\b/g, "up-arrow");
  divValue.className = divValue.className.replace(/\bvalue-equal\b/g, "value-up");
}
	else if (datavalue < 0) {
    element.className = element.className.replace(/\bright-arrow\b/g, "down-arrow");
     divValue.className = divValue.className.replace(/\bvalue-equal\b/g, "value-down");
   }
   else {
   element.className = element.className.replace(/\bright-arrow\b/g, "right-arrow");
   divValue.className = divValue.className.replace(/\bvalue-equal\b/g, "value-equal");

   }

});