jQuery Cycle2 per-slide speed option - jquery-cycle2

I can change timeout using the timeoutFn. How can I do the same for speed? I seached and could not find any way other that having the data-speed attribute on the slide elements. Is there any way to change that programmatically?
$('.slideshow').cycle({
speed: 100,
timeoutFn: calculateTimeout,
slides: "li",
fx: 'scrollLeft,scrollDown,scrollRight'
});
function calculateTimeout(currElement, nextElement, opts, isForward) {
var currentElementTransition = $(currElement).attr('data-timeout');
return parseInt(currentElementTransition, 10) || 0;
}

Related

SuiteScript 2.0 Map Reduce Script Complete Sample

I was hit SSS USAGE LIMIT EXCEEDED error in Netsuite.
I plan to change the search to use Map Reduce Script, however, I didn't found any complete example to call Map Reduce Script, like how to pass parameter to Map Reduce Script and get the resultset from it. Would you please show me how? Thanks in advance
the below show how to define the task to call Map Reduce Script
SuiteScript 2.0 UserEvent Script to Call Map Reduce
define(['N/record', 'N/log', 'N/Task'],
function (record, log, task) {
function setFieldInRecord (scriptContext) {
log.debug({
'title': 'TESTING',
'details': 'WE ARE IN THE FUNCTION!'
});
if (scriptContext.type === scriptContext.UserEventType.EDIT) {
var scriptTask = task.create({
taskType: task.TaskType.MAP_REDUCE
});
scriptTask.scriptId = 'customscript_id';
scriptTask.deploymentId = 'customdeploy_id';
var scriptTaskId = scriptTask.submit();
//How to pass parameter to getInputData?
//How to get the result?
}
}
return {
beforeSubmit: setFieldInRecord
};
}
);
Map/Reduce script type provides you with 4 entry point functions to load/process your data:
getInputData(inputContext)
map(mapContext)
reduce(reduceContext)
summarize(summaryContext)
Example:
function summarize(context) {
context.output.iterator().each(function(key, value) {
// your logic here
return true;
});
}
Take a look at this help center section, there are examples (only available with NetSuite account):
https://system.netsuite.com/app/help/helpcenter.nl?fid=section_4387799161.html

How can I scale my dataset values as a percentage of the index in chart.js?

Sorry if the question is poorly worded.Here is my chart
I am looking into scaling the chart's display of dataset(s) values as a percentage such as:
//input
data:{
datasets[{
label: 'data1',
data: [15, 22, 18, 35, 16, 29, 40]
},
{
label: 'data2',
data: [20, 21, 20, 19, 21, 22, 35]
}]
data1's points on the chart would be displayed as [42.9, 51.2, 47.4, 64.8, 43.2, 56.9, 57.1]
data2's points on the chart would be displayed as [57.1, 48.8, 52.6, 35.2, 56.8, 43.1, 42.9]
It should look like this. All visible lines should stack up to 100%. If a dataset is hidden, how can I recalculate the percentage and update the chart so that everything stays stacked up to 100%?
I thought about doing a plugin where I do the calculation using myLine.data.datasets but then I don't know how to remove a hidden dataset's values from the calculation and I'm not sure how to display it unless I overwrite the original datasets. I'm pretty sure this is the wrong approach.
Any help would be greatly appreciated.
So, I figured it out. I needed to write a function to calculate the percentage area of the points in the index and then update the datasets with the calculated percentage values.
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*
* DS_update calculates the percentage area of the input datasets
*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function DS_update(dataset_in, ds_vis){
// make a deep copy (no references to the source)
var temp = jQuery.extend(true, [], dataset_in);
// gets the sum of all datasets at a given index
function getTotal(index){
total = 0;
// step through the datasets
dataset_in.forEach(function(e, i){
// inc total if the dataset is visible
if(ds_vis[i]){
total += e[index];
}
// do nothing if the dataset is hidden
});
return total;
}
// update temp array with calculated percentage values
temp.forEach(function(el, ind){
var j = ind;
el.forEach(function(e, i){
// calculate percentage to the hundredths place
temp[j][i] = Math.round((e / getTotal(i))*10000)/100;
});
});
return temp;
}
Once I tested the functions I had to run them before initial load of the chart or else the user would see the datasets as non area-percent (raw data). which looks something like this:
// Keep source array to use in the tool tips
var Src_ary = Input_data; // multidimensional array of input data
// holds the percent-area calculations as datapoints
var Prod_ary = DS_update(Src_ary, Init_visible(Src_ary));
Next up was updating the onClick for the legend. I need this to update the calculations every time an item's visibility is toggled:
legend: {
position: 'bottom',
usePointStyle: true,
onClick:
function(e, legendItem){
var index = legendItem.datasetIndex;
var ci = this.chart;
var meta = ci.getDatasetMeta(index);
var vis_ary = [];
var updatedSet = [];
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
// load the visible array
for(var i = 0; i < (ci.data.datasets || []).length; i++){
switch (ci.getDatasetMeta(i).hidden){
case null:
vis_ary.push(true);
break;
default:
vis_ary.push(false);
break;
}
}
// update datasets using vis_ary to tell us which sets are visible
updatedSet = DS_update(Prod_ary, vis_ary);
myLine.data.datasets.forEach(function (e,i){
e.data = updatedSet[i];
});
// We did stuff ... rerender the chart
ci.update();
}
}
END RESULT
This is what I was trying to do: highchart fiddle
This is what I ended up with:fiddle
It took a few days and a lot of reading through chartjs.org's documentation to put this together. In the end I think it came out pretty good considering I am new to chart.js and borderline illiterate with javascript.

AngularFire2 and Ionic2, calculating list sum

please help me to figure out how to calculate a sum of objects values coming from firebase using AngularFire2 in ionic.
I am trying do this way:
in the HTML file i want call the function:
<ion-col col-1>
{{(calculateAverage(student.$key) | async)}}
</ion-col>
In the .ts file i want to do something like this, get the list of objects, iterate over it and sum the values of a child and return that value to the html.
i know how to use this.af.database.list to get a list and show values in the HTML using the *ngFor, but not know how to iterate in the .ts file and return a value to the HTML, cause this is async.
Example of firebase data:
"-KhdUCJAyr7Y4Zz3QOnl" : {
"-KigSgGlWyFQao80DuA0" : {
"value" : "30"
},
"-KigTDI3Nue88If0fdYl" : {
"value" : "70"
}
}
Can anyong help me please?
Thanks in Advance.
You can do the calculate in subscribe of this.af.database.list.
// suppose you keep the observable
this.items = this.af.database.list('/sample');
// do calculate in observable.subscribe
this.items.subscribe(data => {
data.forEach(item => {
// sum here
calculateSum(item.value);
});
// calculate average here
calculateAverage();
});
example of how to calculate and show in templete:
sumValue = 0;
averageValue = 0;
// sum values
calculateSum(value) {
this.sumValue = this.sumValue + parseInt(value);
}
calculateAverage(count) {
this.averageValue = this.sumValue / count;
}
display result of calculate in template:
<span>averageValue</span>

Tag-it shows no delete-symbol

I don't know why I don't get the "X" symbol ...
It should be like this:
How can I find the problem? Maybe an CSS-file is blocking an other CSS-file?
JavaScript-Code
$(function() {
var sampleTags = ['Klavier', 'Blockflöte', 'Schlagzeug', 'Gesang', 'Saxophon', 'Klarinette', 'Keyboard', 'Panflöte', 'Mundharmonika', 'Beatboxing', 'Akkordeon', 'Cello', 'Bratsche', 'Tuba', 'Kontrabass', 'E-Gitarre', 'E-Bass', 'Akustikgitarre'];
$('#singleFieldTags').tagit({
availableTags: sampleTags,
singleField: true,
singleFieldNode: $('#mySingleField'),
beforeTagAdded: function(evt, ui) {
var counter = jQuery.inArray(ui.tagLabel, sampleTags);
if(counter != -1) {
return true;
} else {
$('.tagit-new input').val('');
return false;
}
},
});
});
Susanne, encountered the same issue. After a significant amount of time wasted, I determined that the 'x' icon is present, it's just not rendering on the browser level.
var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
This is line 485 of tag-it.js; when you check the rendering of your page, you'll see this is actually present. I changed it to the following in order to confirm that it was present and just needed to be rendered differently.
var removeTag = $('<a><span>x</span></a>') // \xd7 is an X
It can be styled however, from this point. Hope this helps anyone encountering this issue.

Replicating Google Analytics DateRange picker

I need to replicate the Google Analytics date picker (plus a few new options). Can anyone tell me how to highlight all the cells on a calendar between two dates. My basic JavaScript is OK but I think I'm getting a bit out of my depth.
I'm using JQuery 1.5.1 and JQuery UI 1.8.14.
In needed to replicate Google Analytics date picker as well. I know you were asking just about highlighting cells, but if someone else would prefer complete solution, you can see my answer from another question: jquery google analytics datepicker
Here's a solution using the built-in 'onSelect' event (jsFiddle):
$(document).ready(function() {
'use strict';
var range = {
'start': null,
'stop': null
};
$('#picker').datepicker({
'onSelect': function(dateText, inst) {
var d, ds, i, sel, $this = $(this);
if (range.start === null || range.stop === null) {
if (range.start === null) {
range.start = new Date(dateText);
} else {
range.stop = new Date(dateText);
}
}
if (range.start !== null && range.stop !== null) {
if ($this.find('td').hasClass('selected')) {
//clear selected range
$this.children().removeClass('selected');
range.start = new Date(dateText);
range.stop = null;
//call internal method '_updateDatepicker'.
inst.inline = true;
} else {
//prevent internal method '_updateDatepicker' from being called.
inst.inline = false;
if (range.start > range.stop) {
d = range.stop;
range.stop = range.start;
range.start = d;
}
sel = (range.start.toString() === range.stop.toString()) ? 0 : (new Date(range.stop - range.start)).getDate();
for (i = 0; i <= sel; i += 1) {
ds = (range.start.getMonth() + 1).toString() + '/' + (range.start.getDate() + i).toString() + '/' + (range.start.getFullYear()).toString();
d = new Date(ds);
$this.find('td a').filter(function(index) {
return $(this).text() === d.getDate().toString();
}).parents('td').addClass('selected');
}
}
}
}
});
});
I became desperate and came up with a solution on my own. It wasn't pretty but I'll detail it.
I was able to construct a div that had the text boxes, buttons and the datepicker that looked like the Google Analytics control but I couldn't make the datepicker work properly. Eventually, I came up with the idea of creating a toggle variable that kept track of which date you were selecting (start date or end date). Using that variable in a custom onSelect event handler worked well but I still couldn't figure out how to get the cells between dates to highlight.
It took a while, but I slowly came to the realization that I couldn't do it with the datepicker as it existed out of the box. Once I figured that out, I was able to come up with a solution.
My solution was to add a new event call afterSelect. This is code that would run after all the internal adjustments and formatting were complete. I then wrote a function that, given a cell in the datepicker calendar, would return the date that it represented. I identified the calendar date cells by using jQuery to find all the elements that had the "ui-state-default" class. Once I had the date function and a list of all the calendar cells, I just needed to iterate over all of them and, if the date was in the correct range, add a new class to the parent.
It was extremely tedious but I was able to make it work.