Re-structure using LODASH

Re-structure using LODASH - javascript

I have been trying a few LoDash functions all day but couldn't get the right way to do this. Assigning a key fill to the parent array and also prepend with key levelno and each value of another array below [1,2,3,4,5]
[ [ { rect: 'R202',
x: 163,
y: 1393,
width: 38,
height: 17.5,
grade: 'hf',
accessible: false },
{ rect: 'R214',
x: 163,
y: 1445.5,
width: 38,
height: 17.5,
grade: 'hf',
accessible: false } ],
[ { rect: 'R202',
x: 163,
y: 1393,
width: 38,
height: 17.5,
grade: 'hf',
accessible: false },
{ rect: 'R214',
x: 163,
y: 1445.5,
width: 38,
height: 17.5,
grade: 'hf',
accessible: false } ] ]
with [1,2,3,4,5] into this
{ 'level: [{
"levelno": 1,
"fill": [
{
rect: "R202",
x: 163,
y: 1393,
width: 38,
height: 17.5,
grade: "hf",
accessible: false
}, {
rect: "R214",
x: 163,
y: 1445.5,
width: 38,
height: 17.5,
grade: "hf",
accessible: false
}
]
}, {
"levelno": 2,
"fill": [
{
rect: "R202",
x: 163,
y: 1393,
width: 38,
height: 17.5,
grade: "hf",
accessible: false
}, {
rect: "R214",
x: 163,
y: 1445.5,
width: 38,
height: 17.5,
grade: "hf",
accessible: false
}
]
}]
}

Use vanilla js Array#map or lodash's _.map() to map each sub array to an object in the desired format:
function level(data, levels) {
return {
level: data.map(function(fill, index) {
return {
levelno: levels[index],
fill: fill
};
})
};
}
function level(data, levels) {
return {
level: data.map(function(fill, index) {
return {
levelno: levels[index],
fill: fill
};
})
};
}
var data = [
[{
rect: 'R202',
x: 163,
y: 1393,
width: 38,
height: 17.5,
grade: 'hf',
accessible: false
}, {
rect: 'R214',
x: 163,
y: 1445.5,
width: 38,
height: 17.5,
grade: 'hf',
accessible: false
}],
[{
rect: 'R202',
x: 163,
y: 1393,
width: 38,
height: 17.5,
grade: 'hf',
accessible: false
}, {
rect: 'R214',
x: 163,
y: 1445.5,
width: 38,
height: 17.5,
grade: 'hf',
accessible: false
}]
];
var levels = [1, 2, 3, 4, 5];
var result = level(data, levels);
console.log(result);
The shorter ES6 version:
const level = (data, levels) => ({
level: data.map((fill, index) => ({
levelno: levels[index],
fill
}))
});

Related

Plotly js 3D Scatter Chart with colorscale

I am trying a 3D Scatter plot with plotly js. is there any way I can add a color scale to the widget as in the below screenshot
When I tried to create I am only able to render 3D chart with some colors. I am not able to achieve a color scale and the legend as in attached screenshot
https://codepen.io/rudi8292/pen/RRxBrQ
<head>
<!-- Plotly.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width:100%;height:100%"></div>
<button type="button" class="button" id="this_button">Click here for update</button>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
var trace1 = {
x : [3],
y: [4],
z : [6],
mode: 'markers',
marker: {
size: 12,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d'
};
var trace5 = {
x : [2],
y: [5],
z : [6],
mode: 'markers',
marker: {
size: 11,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d'
};
var trace4 = {
x : [1],
y: [3],
z : [4],
mode: 'markers',
marker: {
size: 8,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
mode : 'markers',
opacity: 0.8
},
type: 'scatter3d'
};
var trace2 = {
x : [2],
y: [2],
z : [2],
mode: 'markers',
marker: {
size: 15,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d'
};
var trace3 = {
x : [1],
y: [1],
z : [1],
mode: 'markers',
marker: {
size: 12,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d'
};
var data = [trace1, trace2,trace3,trace4,trace5];
var layout = {
margin: {
l: 0,
r: 0,
b: 0,
t: 0
},
xaxis : {
title : "This",
},
yaxis : {
title : "That"
},
zaxis : {
title : "where"
}};
Plotly.newPlot('myDiv', data, layout);
$("#this_button").click(function(){
console.log("clicked");
var update = {
x : [[1,2,3,4,5]],
y : [[1,2,3,4,5]],
z : [[1,2,3,4,5]],
size :[[12,13,14,15,16]],
'marker.color' : [["#001","#005","#0f0","#f00","#00f"]],
text : "size"
}
Plotly.restyle('myDiv', update,[0,1,2,3,4]);
});

I have found a similar sammple
https://codepen.io/etpinard/pen/mWQNrq
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
Plotly.plot('graph', {
data:[{
marker: {
showscale: true,
colorbar: {
x: 0
},
size: [28.666666666666668, 20.666666666666668, 15.333333333333334, 17.666666666666668, 19.0, 17.666666666666668, 26.0, 21.0, 21.666666666666668, 27.0, 21.666666666666668, 16.666666666666668, 27.0, 14.0, 29.666666666666668, 22.0, 16.0, 28.0, 27.0, 25.333333333333332],
cmax: 14,
cmin: 20,
color: [28.666666666666668, 20.666666666666668, 15.333333333333334, 17.666666666666668, 19.0, 17.666666666666668, 26.0, 21.0, 21.666666666666668, 27.0, 21.666666666666668, 16.666666666666668, 27.0, 14.0, 29.666666666666668, 22.0, 16.0, 28.0, 27.0, 25.333333333333332],
colorscale: 'Viridis'
},
mode: "markers",
x: [630, 310, 260, 566, 566, 400, 515, 630, 151, 400, 515, 176, 230, 260, 151, 648, 648, 176, 230, 310],
y: [200, 100, 200, 100, 200, 100, 100, 100, 200, 200, 200, 200.1234, 200, 100, 100, 200, 100, 100, 100, 200],
z: [495, 18, 104, 33, 33, 615, 10, 495, 420, 615, 10, 232, 515, 104, 420, 327, 327, 232, 515, 18],
text: [
"vav-01-01",
"vav-01-02",
"vav-01-03",
"vav-01-04",
"vav-01-05",
"vav-01-06",
"vav-01-07",
"vav-01-08",
"vav-01-09",
"vav-01-10",
"vav-02-01",
"vav-02-02",
"vav-02-03",
"vav-02-04",
"vav-02-05",
"vav-02-06",
"vav-02-07",
"vav-02-08",
"vav-02-09",
"vav-02-10",
],
hoverinfo: "name+text",
type: "scatter3d",
name: "Floor 1",
showlegend: true,
showscale: true
}],
layout: {
showlegend: false,
showscale: true
}
});

Trouble gettings CanvasJS to color just the coordinates in the tooltip

The tooltip text:
10
Dataseries 1: 71
Dataseries 2: 77
I'm trying to get the tooltip so the Dataseries 1: and Dataseries 2: remain their current color, and the 10, 71, and 77 are colored red. I have tried toolTipContent: " x: <span style='\"'color: red;'\"'>{x}</span> y: {y} <br/> name: {name}, label:{label} ", but it doesn't change anything. I'm sure its a stupid mistake on my part, but I'm new to using CanvasJS and haven't been able to get anything to work. (https://jsfiddle.net/lightmaster/8p3ygwf1/)
var chart = new CanvasJS.Chart("chartContainer", {
backgroundColor: "RGBA(37, 41, 45, 0.9)",
animationEnabled: true,
title: {
text: " ",
fontSize: 11,
fontColor: ' #ccc',
fontFamily: "arial",
},
toolTip: {
fontStyle: "normal",
cornerRadius: 4,
backgroundColor: "RGBA(37, 41, 45, 0.9)",
toolTipContent: " x: {x} y: {y} <br/> name: {name}, label:{label} ",
shared: true,
},
axisX: {
gridColor: "RGBA(64, 65, 66, 0.8)",
labelFontSize: 10,
labelFontColor: ' #ccc',
lineThickness: 1,
gridThickness: 1,
gridDashType: "dot",
titleFontFamily: "arial",
labelFontFamily: "arial",
interval: "auto",
intervalType: "hour",
minimum: 0,
crosshair: {
enabled: true,
snapToDataPoint: true,
color: "#9aba2f",
labelFontColor: "#ccc",
labelFontSize: 14,
labelBackgroundColor: "#FF8841",
}
},
axisY: {
title: "Temperature (°F) Recorded",
titleFontColor: "#ccc",
titleFontSize: 10,
titleWrap: false,
margin: 10,
lineThickness: 1,
gridThickness: 1,
gridDashType: "dot",
includeZero: false,
gridColor: "RGBA(64, 65, 66, 0.8)",
labelFontSize: 11,
labelFontColor: ' #ccc',
titleFontFamily: "arial",
labelFontFamily: "arial",
labelFormatter: function(e) {
return e.value.toFixed(0) + " °F ";
},
crosshair: {
enabled: true,
snapToDataPoint: true,
color: "#9aba2f",
labelFontColor: "#fff",
labelFontSize: 12,
labelBackgroundColor: "#FF8841",
valueFormatString: "#0.# °F",
}
},
legend: {
fontFamily: "arial",
fontColor: "#ccc",
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
},
{
type: "spline",
dataPoints: [
{ x: 10, y: 77 },
{ x: 20, y: 53 },
{ x: 30, y: 58 },
{ x: 40, y: 61 },
{ x: 50, y: 99 },
{ x: 60, y: 60 },
{ x: 70, y: 20 },
{ x: 80, y: 31 },
{ x: 90, y: 26 }
]
}
]
});
chart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

At the chart level, instead of toolTipContent you need content. Your toolTipContent code is currently being ignored because that's the property used only at the data level. Here is how you can set a style directly, doing basically what you asked for:
toolTip: {
fontStyle: "normal",
cornerRadius: 14,
backgroundColor: "RGBA(37, 41, 45, 0.9)",
content: "<span style='\"'color: red;'\"'>{x}</span><br/> <span style='\"'color: {color};'\"'>{name}</span> <span style='\"'color: red;'\"'>{y}</span>",
shared: true,
}
Because you are using shared: true, your x value will show up twice. If you don't want that, look into the contentFormatter function for Shared toolTip section in the docs.

How to fix bubble size (marker size) in canvasjs?

I want chart to look like this:
So far I'm very close to my expected output but not exactly what I want. Here is my current codebase:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var ToolTipHtml = "";
ToolTipHtml += "<div><b>{number}</b></div>";
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "SEStimate Planning Graph"
},
axisX: {
title: "Age in Months",
interval:1
},
axisY: {
title: "SEstimate Score",
interval:5,
gridThickness: 0
},
creditText: "Hardiks Line Chart",
data: [
{
type: "line",
color:"blue",
markerSize:0,
toolTipContent: "",
lineThickness:2,
dataPoints: [
{ x: 36, y: 35 },
{ x: 45, y: 35}
]
},
{
type: "line",
color:"blue",
toolTipContent: "",
markerSize:0,
lineThickness:2,
dataPoints: [
{ x: 42, y: 0 },
{ x: 42, y: 43}
]
},
{
type: "line",
color:"cyan",
toolTipContent: "",
lineThickness:2,
indexLabelPlacement: "inside",
dataPoints: [
{ x: 43, y: 35},
{ x: 48, y: 37,markerSize:20, indexLabel:"5"},
{x:55,y:42,markerSize:20, indexLabel:"5"}
]
},
{
type: "line",
color:"purple",
toolTipContent: "",
lineThickness:2,
markerSize:27,
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 43,indexLabel:"10"},
{x:55,y:54, indexLabel:"10"},
{x:61,y:60, indexLabel:"10"},
{x:67,y:70, indexLabel:"10"},
]
},
{
type: "line",
color:"red",
toolTipContent: "",
lineThickness:2,
markerSize:0,
lineDashType: "dash",
dataPoints: [
{ x: 41, y: 25 },
{ x: 47, y: 25},
{ x: 61, y: 58},
{ x: 72, y: 58}
]
},
{
type: "line",
color:"green",
toolTipContent: "",
lineThickness:2,
markerSize:0,
lineDashType: "dash",
dataPoints: [
{ x: 40, y: 30, abc:"hardy1" },
{ x: 61, y: 76, abc:"hardy2"},
{ x: 72, y: 76, abc:"hardy3" }
]
},
{
type: "bubble",
toolTipContent: "",
indexLabelPlacement: "inside",
dataPoints: [
{ x: 39, y: 20,z:2.0, number: "II",indexLabel: "II",markerColor: "yellow", radius: "90%" },
{ x: 39, y: 30,z:2.0, number: "HH", indexLabel:"HH",markerColor: "yellow", radius: "90%" },
{ x: 42, y: 35,z:2.0, number: "JJ", indexLabel:"JJ",markerColor: "yellow", radius: "90%"},
{ x: 45, y: 45, z:2.0, number: "GG", indexLabel:"GG",markerColor: "yellow", radius: "90%"},
{ x: 48, y: 50, z:2.0, markerSize:10,number: "EE", indexLabel:"EE",markerColor: "yellow", radius: "90%"},
{ x: 48, y: 35, z:2.0, markerSize:10, number: "FF", indexLabel:"FF",markerColor: "yellow", radius: "90%"},
{ x: 51, y: 43, z:2.0, number: "DD", indexLabel:"DD",markerColor: "yellow", radius: "90%"},
{ x: 52, y: 81, z:2.0, number: "CC", indexLabel:"CC",markerColor: "yellow", radius: "90%"},
{ x: 54, y: 35, z:2.0, number: "BB", indexLabel:"BB",markerColor: "yellow", radius: "90%"},
{ x: 54, y: 70, z:2.0, number: "AA", indexLabel:"AA",markerColor: "yellow", radius: "90%"}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 450px; width: 100%;">
</div>
</body>
</html>
Output of my code looks like this:
How can I fix all the bubbles size in bubble chart of CanvasJS? Is there any property for setting and fix all the bubbles in same size?
So far I tried markerSize Property and also set all bubbles data's z field value to same but all the bubbles are looking very large. I want to show the bubbles in small size.

Hardik,
You can try scatter chart instead of bubble to achieve this.
Check this jsfiddle for solution for your requirement.
var ToolTipHtml = "";
ToolTipHtml += "<div><b>{number}</b></div>";
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "SEStimate Planning Graph",
fontSize: 40,
fontColor: "#000",
horizontalAlign: "left"
},
axisX: {
title: "Age in Months",
interval: 1,
minimum: 35.5,
labelFontSize: 14,
labelFontColor: "#000",
titleFontColor: "#000",
titleFontSize: 20,
tickColor: "transparent",
lineColor: "#4A83BA",
},
axisY: {
title: "SEstimate Score",
interval:5,
gridThickness: 0,
labelFontSize: 14,
labelFontSize: 14,
labelFontColor: "#000",
titleFontColor: "#000",
titleFontSize: 20,
tickColor: "transparent",
lineColor: "#4A83BA",
maximum: 100,
},
data: [
{
type: "line",
color:"#4A83BA",
markerSize:0,
toolTipContent: "",
lineThickness:2,
dataPoints: [
{ x: 35, y: 35 },
{ x: 36, y: 35 },
{ x: 45, y: 35}
]
},
{
type: "line",
color:"#4A83BA",
toolTipContent: "",
markerSize:0,
lineThickness:2,
dataPoints: [
{ x: 42, y: 0 },
{ x: 42, y: 43 }
]
},
{
type: "line",
color:"#00B2EC",
lineThickness:2,
markerSize:30,
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 37 },
{ x: 55, y:42 }
]
},
{
type: "scatter",
color:"#00B2EC",
indexLabelPlacement: "inside",
indexLabelFontSize: 16,
indexLabelFontColor: "#fff",
markerSize:30,
markerBorderThickness: 1,
markerBorderColor: "#79A2BF",
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 37, indexLabel:"5" },
{ x: 55, y:42, indexLabel:"5" }
]
},
{
type: "line",
color:"purple",
toolTipContent: "",
lineThickness:2,
markerSize:30,
markerBorderThickness: 1,
markerBorderColor: "#79A2BF",
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 43 },
{ x: 55, y: 54 },
{ x: 61, y: 60 },
{ x: 67, y: 70 },
]
},
{
type: "scatter",
color:"purple",
toolTipContent: "",
indexLabelPlacement: "inside",
indexLabelFontSize: 16,
indexLabelFontColor: "#fff",
markerSize:30,
markerBorderColor: "#79A2BF",
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 43, indexLabel:"10" },
{ x:55, y:54, indexLabel:"10" },
{ x:61, y:60, indexLabel:"10" },
{ x:67, y:70, indexLabel:"10" },
]
},
{
type: "line",
color:"red",
toolTipContent: "",
lineThickness:3,
markerSize:0,
lineDashType: "dash",
dataPoints: [
{ x: 41, y: 25 },
{ x: 47, y: 25 },
{ x: 61, y: 58 },
{ x: 72, y: 58 }
]
},
{
type: "line",
color:"#00F84C",
toolTipContent: "",
lineThickness: 3,
markerSize:0,
lineDashType: "dash",
dataPoints: [
{ x: 40, y: 30, abc:"hardy1" },
{ x: 61, y: 76, abc:"hardy2" },
{ x: 72, y: 76, abc:"hardy3" }
]
},
{
type: "scatter",
toolTipContent: "",
indexLabelPlacement: "inside",
indexLabelFontSize: 14,
indexLabelFontColor:"#1BBDCA",
markerSize: 30,
markerBorderThickness: 1,
markerColor:"#FFFC47",
markerBorderColor: "#79A2BF",
dataPoints: [
{ x: 39, y: 20, number: "II", indexLabel: "II" },
{ x: 39, y: 30, number: "HH", indexLabel: "HH" },
{ x: 42, y: 35, number: "JJ", indexLabel: "JJ" },
{ x: 45, y: 45, number: "GG", indexLabel: "GG" },
{ x: 48, y: 50, number: "EE", indexLabel: "EE" },
{ x: 48, y: 35, number: "FF", indexLabel: "FF" },
{ x: 51, y: 43, number: "DD", indexLabel: "DD" },
{ x: 52, y: 81, number: "CC", indexLabel: "CC" },
{ x: 54, y: 35, number: "BB", indexLabel: "BB" },
{ x: 54, y: 70, number: "AA", indexLabel: "AA" }
]
}
]
});
chart.render();
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>

Highcharts : Data loaded, DOM updated but not display

I tried to create a chart but i get no display in my html page whereas DOM element seems to be well loaded.
Here is the code of My JS function to create the chart :
this.updateUsageChart = function updateUsageChart() {
var jsonData = {
categories : ['01/12/2015', '02/12/2015', '03/12/2015', '04/12/2015', '05/12/2015', '06/12/2015', '07/12/2015', '08/12/2015', '09/12/2015', '10/12/2015'],
series : [
{
name: 'MAX',
data: [170, 170, 170, 170, 170, 170, 170, 170, 170, 170]
}, {
name: 'MIN',
data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20]
}, {
name: 'test1',
data: [30, 40, 35, 40, 35, 200, 112, 210, 140, 190]
}, {
name: 'test2',
data: [30, 40, 35, 40, 35, 170, 112, 170, 140, 170]
}
]
}
var categories = jsonData.categories ; // Array of String
var series = jsonData.series;
$('#usageChart').highcharts({
title: {
text: 'Test',
x: -20 //center
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Test'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
});
}
I included library in my index.html file :
<script src="../../lib/jquery/jquery.js"></script>
<script src="../../lib/highcharts/highcharts.js"></script>
<script src="../../lib/highcharts/exporting.js"></script>

How to track the animation frame count in kinetic.js?

This is my code :
var playerTimerGroup = new Kinetic.Group({
x:420,
y:350
});
var animations = {
idle: [{
x: 408,
y: 1420,
width: 55,
height: 55
}, {
x: 463,
y: 1420,
width: 55,
height: 55
}, {
x: 518,
y: 1420,
width: 55,
height: 55
}, {
x: 573,
y: 1420,
width: 55,
height: 55
}, {
x: 628,
y: 1420,
width: 55,
height: 55
}]
};
var timer = new Kinetic.Sprite({
x: 0,
y: 0,
image: SpriteImaage,
animation: 'idle',
animations: animations,
frameRate: 7,
index: 0
});
playerTimerGroup.add(timer);
layer.add(playerTimerGroup);
stage.add(self.layer);
timer.start();
Here i want to show a text (seconds) which keep changing for every frame.
How to achieve this ?
(I mean when first animation start I want to show 1, on second I want to show 2 and so on... till last animation.)
I tried this :
_.each(animations.idle, function(value, index){
timer.afterFrame(index, function(){
console.log(index);
});
});
but this runs only for last index..
any way to bind timer.afterFrame for every index or call timer.afterFrame for every index ?

var playerTimerGroup = new Kinetic.Group({
x: 420,
y: 350
});
var animations = {
idle: [{
x: 408,
y: 1420,
width: 55,
height: 55
}, {
x: 463,
y: 1420,
width: 55,
height: 55
}, {
x: 518,
y: 1420,
width: 55,
height: 55
}, {
x: 573,
y: 1420,
width: 55,
height: 55
}, {
x: 628,
y: 1420,
width: 55,
height: 55
}]
};
var timer = new Kinetic.Sprite({
x: 0,
y: 0,
image: SpriteImaage,
animation: 'idle',
animations: animations,
frameRate: 1,
index: 0
});
creating a text object here, which will change on every second:
var timerText = new Kinetic.Text({
x: 15,
y: 15,
text: '20',
fontSize: 25,
fontFamily: 'Calibri',
fill: 'white'
});
i = 1;
time = 0;
creating an animation object here which will change the text on every second:
var timerTextAnimation = new Kinetic.Animation(function(frame) {
timerText.setText(i);
if (frame.time - time >= 1000) {
i++;
time = frame.time;
}
}, layer);
timerTextAnimation.start();
playerTimerGroup.add(timer);
playerTimerGroup.add(timerText);
layer.add(playerTimerGroup);
stage.add(self.layer);
timer.start();
stopping all the animations here:
timer.afterFrame(animations.idle.length - 1, function() {
timer.stop();
timerTextAnimation.stop();
});
This works for me.
hope it also helps others.

Develop Reference

JavaScript is the programming language of the Web.

Re-structure using LODASH - javascript

Related

Plotly js 3D Scatter Chart with colorscale

Trouble gettings CanvasJS to color just the coordinates in the tooltip

How to fix bubble size (marker size) in canvasjs?

Highcharts : Data loaded, DOM updated but not display

How to track the animation frame count in kinetic.js?

Categories

Resources