Filling array with map function issue - javascript

I don't understand how to fill the array with a map() with the one difference:
I have array which is filled with a template like :
const templateOfRanks = {
rankingElementsTemplate : [
{row : [1.1, 1.2, 1.3, 1.4]},
{row : [2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9]},
{row : [3.1, 3.2, 3.3, 3.4]},
]
}
Result
It looks like a dimensional array. How can I fill a new array without "rows"? I want to get an array with elements from this template but without nested elements.
It should look like: [ 1.1, 1.2, 1.3, 1.4, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9,3.1, 3.2, 3.3, 3.4]
Probably I should use the push() function, I don't know...but I need to have two arrays: the first one is dimensional and the second one is single.
Help me, please.

you can use flatMap
const templateOfRanks = {
rankingElementsTemplate : [
{row : [1.1, 1.2, 1.3, 1.4]},
{row : [2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9]},
{row : [3.1, 3.2, 3.3, 3.4]},
]
}
const flat = templateOfRanks.rankingElementsTemplate.flatMap(i => i.row);
console.log(flat);

Related

How can I get the beats per minute using FFT on the amplitude data?

I checked all the answers on stackoverflow regarding this topic, but any solution does not work with my dataset.
The dataset consists of 600 amplitudes sampled at 60 samples per second.
In this dataset, there are 13 beats in 10 seconds.
So the result should be around 78 beats per minute.
I know I could use peak detection in various ways, but I wish to know if there is a way to detect it using FFT (fftjs).
I also tried this great approach Peak signal detection in realtime timeseries data
but it doesn't seem to work well with this dataset.
$(function() {
function out(array) {
$("#console").html($("#console").html() + "<br/><br/>" + JSON.stringify(array));
//console.log(JSON.stringify(array));
}
var fft = new FFT({samplingRate:60});
///////////////////////////////////////////////////
//// INPUT DATA
///////////////////////////////////////////////////
// If you test sine curve, please change flag WAVEFORM_TEST to true.
var WAVEFORM_TEST = false;
var real = [];
if (WAVEFORM_TEST) {
N = 320;
k = 40;
// frequency = (k/N)
for (i = 0; i<N; i++){
real.push(Math.sin((2 * Math.PI * k * i) / N ));
}
} else {
real = [.5,.5,-.7000000000000001,-.9,-.9,-.1,.10000000000000003,.10000000000000003,-.8000000000000002,-.8000000000000002,.8999999999999999,-4,-6.3,-3.5,1.7999999999999996,5.199999999999999,5.199999999999999,5.7,2,2,.6,-.10000000000000003,-1.1,-2.8,-1.2999999999999998,1.0000000000000002,1.0000000000000002,-2.3000000000000003,-4.5,-4.5,-.20000000000000007,1.0000000000000004,1.0000000000000004,.8000000000000003,-.6,-.6,-.3000000000000001,.4000000000000001,.6000000000000002,.10000000000000009,-.6,-.6,-.8999999999999999,-.20000000000000004,-.20000000000000004,1.1,1.4,1.0999999999999999,.6,.10000000000000006,-.6000000000000001,-.8,.19999999999999993,.19999999999999993,-1.9000000000000001,-1.5999999999999999,-1.5999999999999999,1.6,-3.3,-6.3,-3.6,2.1000000000000005,5.999999999999999,5.999999999999999,4,4,1.2000000000000002,-.6000000000000001,-.6000000000000001,-.9,-.9000000000000001,-.9000000000000001,2.5000000000000004,2.9000000000000004,-1.1000000000000003,-1.1000000000000003,-4.3,-1.8,-1.8,.09999999999999998,.09999999999999998,0,.9000000000000001,1.9000000000000004,2.4,2.3,1.5999999999999996,1.5999999999999996,.30000000000000004,-.20000000000000007,-.20000000000000007,-.4,-.4,.30000000000000004,2.6,2.4000000000000004,.9999999999999999,-.8,-1.6,-1.6,-.5000000000000001,-1.2999999999999998,-1.2999999999999998,2.4000000000000004,2.1999999999999997,2.1999999999999997,-8.100000000000001,-6.4,-.6,-.6,6,6,4.4,-.49999999999999994,-.49999999999999994,-.7999999999999998,-1,-1,-1.2,1.4000000000000004,3.4,3.4,-3.6,-4.199999999999999,-4.199999999999999,.7999999999999999,.7999999999999999,1.9,.9000000000000001,.9000000000000001,.30000000000000004,0,0,0,-.10000000000000003,-.7000000000000001,-.7000000000000001,.20000000000000004,.9,.9,1.9000000000000001,1.9000000000000001,1.9,.9000000000000001,0,0,-1.6,-.7000000000000001,-.7000000000000001,-1.5,1.5,1.5,3.3,1.3877787807814457e-16,-6.7,-2.1,3.4,3.4,6.300000000000001,2.7,2.7,.19999999999999987,.30000000000000004,.30000000000000004,.5,-.6000000000000001,1.1,3,.6000000000000001,-4.7,-4.7,-6.4,0,0,.9000000000000002,.9000000000000002,.4999999999999999,1.4000000000000001,1.3,1.3,-.1,-.1,-.6000000000000001,-.8,-.30000000000000004,-.30000000000000004,.7000000000000002,.8000000000000002,.8000000000000002,1.6,1.0999999999999999,.5,-.1,-.1,-.8,-.5000000000000001,-1.1,-1.1,-1.2000000000000002,4.400000000000001,4.400000000000001,.5,-5.999999999999999,-2.9000000000000004,3.0999999999999996,6.300000000000001,6.300000000000001,6.300000000000001,2.6999999999999997,2.6999999999999997,1.5,-.8000000000000002,-.8000000000000002,-1.9,.09999999999999998,1.6,1.6,-4.3999999999999995,-5.300000000000001,-5.300000000000001,.3999999999999999,1.9999999999999998,1.9999999999999998,2.2,2,2,.5,-.2,-.2,-.3000000000000001,-.5,-.5,-.6,-.20000000000000004,-.20000000000000004,1.4,1.4,1.5000000000000002,.9000000000000001,.8,.8,-.7000000000000001,-1.4000000000000004,-1.4000000000000004,-.9999999999999999,-1.3,-.3,-.3,2.7,2.7,-7.700000000000001,-6,-.2999999999999998,-.2999999999999998,7.200000000000001,6.300000000000001,6.300000000000001,2,2,.19999999999999996,-2.2,-2.2,-.5,2.1,2.4,2.4,-4.9,-3.8000000000000007,-1.3,.29999999999999993,.30000000000000004,.30000000000000004,.5,.5,.8,-.4000000000000001,-.4000000000000001,-1.4999999999999998,-1.5000000000000002,-1.5000000000000002,-1.6,-1.3000000000000003,-1.3000000000000003,-.1,1.5999999999999999,1.4,.9,1.2999999999999998,1.8,1.6,1.6,-1,-1,-1.5999999999999999,-2.7755575615628914e-17,-2.7755575615628914e-17,-.9000000000000001,1.5,2.5,2.5,-6.699999999999999,-5.4,-5.4,5.2,6.7,6.7,2.6,.8999999999999999,.8999999999999999,.1,-.9999999999999999,-1.7,-1,1.4,2,-1.5,-4.3,-4.3,-.6000000000000001,.8999999999999999,.8999999999999999,.8,.8,.4,.2,.10000000000000003,.10000000000000003,-.4,-.7999999999999999,-.7999999999999999,-1.2000000000000002,-.30000000000000004,-.30000000000000004,1.2,1.1,1.1,.6,.3,.3999999999999999,.3999999999999999,-.20000000000000004,-.20000000000000004,-1.1,-.30000000000000004,-.30000000000000004,-.4,-.3000000000000001,2.6999999999999997,1.7000000000000002,-3.7999999999999994,-6.8,-6.8,2.1000000000000005,2.1000000000000005,5.8,4.3,4.3,2.1,.20000000000000004,-.9,-1.7000000000000002,-2.0000000000000004,-.4,-.4,1.1,1.1,-2.6999999999999997,-2.7,-.29999999999999993,-.29999999999999993,1.2999999999999998,1.2999999999999998,.8,.09999999999999998,.2,.2,-.1,-.30000000000000004,-.30000000000000004,-.9,-.9,-.9,-.2,.7000000000000001,1,1,1,1.4,1.4,.2,.2,-1.1,-1.4000000000000001,-1.4000000000000001,0,-.5000000000000001,-.5000000000000001,0,1.9,-3.5000000000000004,-3.5000000000000004,-5.199999999999999,-5.199999999999999,.40000000000000024,5.8,5.8,4.7,1.1,.1,.1,-1.5000000000000002,-1.7000000000000004,-1.7000000000000004,2,1.7,1.7,-4.6000000000000005,-4.6000000000000005,-3.6,.40000000000000013,.40000000000000013,1.4000000000000001,1.3,.8,.8,.30000000000000004,-.10000000000000003,-.10000000000000003,-.8,-1.1,-1.1,-1.1,.8000000000000002,1.3000000000000003,1.3000000000000003,.4,.2,.2,1.0000000000000002,1.0000000000000002,.4,-1.4000000000000001,-.4,-.4,-.7,-1.3000000000000003,-1.3000000000000003,2.4,-1.5,-1.5,-6.300000000000001,-1.5,-1.5,6.2,6.2,3.1000000000000005,1.2,.8000000000000002,.8000000000000002,-.29999999999999993,-.7999999999999999,-.7999999999999999,1,2,2,-5,-5,-3.5,-.6000000000000001,1.4,1.8,1.8,.7999999999999999,-8.326672684688674e-17,-8.326672684688674e-17,-.30000000000000004,-.30000000000000004,-.6,-.8999999999999999,-1.0000000000000002,-1.1000000000000003,-.8,-.8,-.2,1.5999999999999999,2.4000000000000004,2.4000000000000004,1.1,1.1,-.4,-1.7,-1.7,0,-.8,-1,-1,3,-1.0999999999999999,-1.0999999999999999,-6.6000000000000005,-1.5,-1.5,6,5.500000000000001,5.500000000000001,1.9,.20000000000000007,.20000000000000007,-.7,-1,-1,.7000000000000001,2.3,2.3,-4.6000000000000005,-5,-2.4,-2.4,1.2999999999999998,1.2000000000000002,1.2000000000000002,.7,.7,.8,.10000000000000009,.10000000000000009,-.8,-1.4000000000000001,-1.4000000000000001,-1.4000000000000001,0,1.4,1.4,2.1,1.3,.4,-.5,-.5,-1.3,-1,-1.5000000000000002,-1.5999999999999999,.8000000000000002,3.8,3.8,-4.6,-7.3,-7.3,1.7999999999999998,1.7999999999999998,6.1000000000000005,4.3,2.3,.9000000000000001,0,-.8,-.8,-1.3,-.1,-.1,1.4000000000000001,-3,-5.2,-5.2,-.7999999999999999,.8999999999999998,.8999999999999998,1.1,.5,.5,.3,.3,.2,-.1,-.1,-.5999999999999999,-.7,-.4,-.4,.9000000000000001,.9000000000000001,1.5999999999999999,1.3000000000000003,1.3000000000000003,.1,-1.4000000000000001,-1,-1.4000000000000001,-2,.4000000000000001,3,.8999999999999999,-4.8,-4.8,-3.6000000000000005,2.5999999999999996,2.5999999999999996,6.3,4.1,1.6];
}
var imaginary = new Array(real.length);
imaginary.fill(0);
original = real.slice(0);
///////////////////////////////////////////////////
//// OUTPUT
///////////////////////////////////////////////////
out('Original source (real array)');
out(original);
fft.calc(60, real, imaginary);
out('FFT');
out(real);
out(imaginary);
var amplitude = fft.amplitude(real, imaginary);
out("amplitude");
out(amplitude);
var power = fft.power(real, imaginary);
out("power");
out(power);
var phase = fft.phase(real, imaginary);
out("phase");
out(phase);
var frequencies = fft.frequencies(real, imaginary, 60);
out("frequencies");
out(frequencies);
var periods = fft.periods(real, imaginary, 60);
out("periods");
out(periods);
var data1 = [{
name: 'original source',
y: original
}];
var data2 = [{
name: 'real array',
y: real
}, {
name: 'imaginary array',
y: imaginary
}];
var data3 = [{
name: 'amplitude array',
x: frequencies,
y: amplitude
}, {
name: 'phase array',
x: frequencies,
y: phase
}];
Plotly.plot('stage1', data1, {
title: 'original source',
xaxis: {
title: 'index'
}
});
Plotly.plot('stage2', data2, {
title: 'FFT',
xaxis: {
title: 'index'
}
});
Plotly.plot('stage3', data3, {
title: 'amplitude, phase vs frequency',
xaxis: {
title: 'frequencies'
}
});
out('iFFT');
fft.calc(-1, real, imaginary);
out(real);
out(imaginary);
});
<script src="https://cdn.rawgit.com/hotstaff/jquery.fft/master/jquery.fft.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<H2>Example</H2>
<div id="stage1"></div>
<div id="stage2"></div>
<div id="stage3"></div>
<div id="console"></div>
</body>
I knew there was a way!
In the third graph, you will see that the highest peak is the average BPM of the sample.
In other words: thinking about the whole sample as a complex wave, with an FFT we get a "dissection" of the frequencies of the sample.
So the strongest one is the main wave you can see with your eyes in the sample data. And it's exactly the average BPM of the sample.
$(function() {
function out(array) {
$("#console").html($("#console").html() + "<br/><br/>" + JSON.stringify(array));
//console.log(JSON.stringify(array));
}
var fft = new FFT(512);
///////////////////////////////////////////////////
//// INPUT DATA
///////////////////////////////////////////////////
// If you test sine curve, please change flag WAVEFORM_TEST to true.
var WAVEFORM_TEST = false;
var real = [];
if (WAVEFORM_TEST) {
N = 320;
k = 40;
// frequency = (k/N)
for (i = 0; i < N; i++) {
real.push(Math.sin((2 * Math.PI * k * i) / N));
}
} else {
real = [.5, .5, -.7000000000000001, -.9, -.9, -.1, .10000000000000003, .10000000000000003, -.8000000000000002, -.8000000000000002, .8999999999999999, -4, -6.3, -3.5, 1.7999999999999996, 5.199999999999999, 5.199999999999999, 5.7, 2, 2, .6, -.10000000000000003, -1.1, -2.8, -1.2999999999999998, 1.0000000000000002, 1.0000000000000002, -2.3000000000000003, -4.5, -4.5, -.20000000000000007, 1.0000000000000004, 1.0000000000000004, .8000000000000003, -.6, -.6, -.3000000000000001, .4000000000000001, .6000000000000002, .10000000000000009, -.6, -.6, -.8999999999999999, -.20000000000000004, -.20000000000000004, 1.1, 1.4, 1.0999999999999999, .6, .10000000000000006, -.6000000000000001, -.8, .19999999999999993, .19999999999999993, -1.9000000000000001, -1.5999999999999999, -1.5999999999999999, 1.6, -3.3, -6.3, -3.6, 2.1000000000000005, 5.999999999999999, 5.999999999999999, 4, 4, 1.2000000000000002, -.6000000000000001, -.6000000000000001, -.9, -.9000000000000001, -.9000000000000001, 2.5000000000000004, 2.9000000000000004, -1.1000000000000003, -1.1000000000000003, -4.3, -1.8, -1.8, .09999999999999998, .09999999999999998, 0, .9000000000000001, 1.9000000000000004, 2.4, 2.3, 1.5999999999999996, 1.5999999999999996, .30000000000000004, -.20000000000000007, -.20000000000000007, -.4, -.4, .30000000000000004, 2.6, 2.4000000000000004, .9999999999999999, -.8, -1.6, -1.6, -.5000000000000001, -1.2999999999999998, -1.2999999999999998, 2.4000000000000004, 2.1999999999999997, 2.1999999999999997, -8.100000000000001, -6.4, -.6, -.6, 6, 6, 4.4, -.49999999999999994, -.49999999999999994, -.7999999999999998, -1, -1, -1.2, 1.4000000000000004, 3.4, 3.4, -3.6, -4.199999999999999, -4.199999999999999, .7999999999999999, .7999999999999999, 1.9, .9000000000000001, .9000000000000001, .30000000000000004, 0, 0, 0, -.10000000000000003, -.7000000000000001, -.7000000000000001, .20000000000000004, .9, .9, 1.9000000000000001, 1.9000000000000001, 1.9, .9000000000000001, 0, 0, -1.6, -.7000000000000001, -.7000000000000001, -1.5, 1.5, 1.5, 3.3, 1.3877787807814457e-16, -6.7, -2.1, 3.4, 3.4, 6.300000000000001, 2.7, 2.7, .19999999999999987, .30000000000000004, .30000000000000004, .5, -.6000000000000001, 1.1, 3, .6000000000000001, -4.7, -4.7, -6.4, 0, 0, .9000000000000002, .9000000000000002, .4999999999999999, 1.4000000000000001, 1.3, 1.3, -.1, -.1, -.6000000000000001, -.8, -.30000000000000004, -.30000000000000004, .7000000000000002, .8000000000000002, .8000000000000002, 1.6, 1.0999999999999999, .5, -.1, -.1, -.8, -.5000000000000001, -1.1, -1.1, -1.2000000000000002, 4.400000000000001, 4.400000000000001, .5, -5.999999999999999, -2.9000000000000004, 3.0999999999999996, 6.300000000000001, 6.300000000000001, 6.300000000000001, 2.6999999999999997, 2.6999999999999997, 1.5, -.8000000000000002, -.8000000000000002, -1.9, .09999999999999998, 1.6, 1.6, -4.3999999999999995, -5.300000000000001, -5.300000000000001, .3999999999999999, 1.9999999999999998, 1.9999999999999998, 2.2, 2, 2, .5, -.2, -.2, -.3000000000000001, -.5, -.5, -.6, -.20000000000000004, -.20000000000000004, 1.4, 1.4, 1.5000000000000002, .9000000000000001, .8, .8, -.7000000000000001, -1.4000000000000004, -1.4000000000000004, -.9999999999999999, -1.3, -.3, -.3, 2.7, 2.7, -7.700000000000001, -6, -.2999999999999998, -.2999999999999998, 7.200000000000001, 6.300000000000001, 6.300000000000001, 2, 2, .19999999999999996, -2.2, -2.2, -.5, 2.1, 2.4, 2.4, -4.9, -3.8000000000000007, -1.3, .29999999999999993, .30000000000000004, .30000000000000004, .5, .5, .8, -.4000000000000001, -.4000000000000001, -1.4999999999999998, -1.5000000000000002, -1.5000000000000002, -1.6, -1.3000000000000003, -1.3000000000000003, -.1, 1.5999999999999999, 1.4, .9, 1.2999999999999998, 1.8, 1.6, 1.6, -1, -1, -1.5999999999999999, -2.7755575615628914e-17, -2.7755575615628914e-17, -.9000000000000001, 1.5, 2.5, 2.5, -6.699999999999999, -5.4, -5.4, 5.2, 6.7, 6.7, 2.6, .8999999999999999, .8999999999999999, .1, -.9999999999999999, -1.7, -1, 1.4, 2, -1.5, -4.3, -4.3, -.6000000000000001, .8999999999999999, .8999999999999999, .8, .8, .4, .2, .10000000000000003, .10000000000000003, -.4, -.7999999999999999, -.7999999999999999, -1.2000000000000002, -.30000000000000004, -.30000000000000004, 1.2, 1.1, 1.1, .6, .3, .3999999999999999, .3999999999999999, -.20000000000000004, -.20000000000000004, -1.1, -.30000000000000004, -.30000000000000004, -.4, -.3000000000000001, 2.6999999999999997, 1.7000000000000002, -3.7999999999999994, -6.8, -6.8, 2.1000000000000005, 2.1000000000000005, 5.8, 4.3, 4.3, 2.1, .20000000000000004, -.9, -1.7000000000000002, -2.0000000000000004, -.4, -.4, 1.1, 1.1, -2.6999999999999997, -2.7, -.29999999999999993, -.29999999999999993, 1.2999999999999998, 1.2999999999999998, .8, .09999999999999998, .2, .2, -.1, -.30000000000000004, -.30000000000000004, -.9, -.9, -.9, -.2, .7000000000000001, 1, 1, 1, 1.4, 1.4, .2, .2, -1.1, -1.4000000000000001, -1.4000000000000001, 0, -.5000000000000001, -.5000000000000001, 0, 1.9, -3.5000000000000004, -3.5000000000000004, -5.199999999999999, -5.199999999999999, .40000000000000024, 5.8, 5.8, 4.7, 1.1, .1, .1, -1.5000000000000002, -1.7000000000000004, -1.7000000000000004, 2, 1.7, 1.7, -4.6000000000000005, -4.6000000000000005, -3.6, .40000000000000013, .40000000000000013, 1.4000000000000001, 1.3, .8, .8, .30000000000000004, -.10000000000000003, -.10000000000000003, -.8, -1.1, -1.1, -1.1, .8000000000000002, 1.3000000000000003, 1.3000000000000003, .4, .2, .2, 1.0000000000000002, 1.0000000000000002, .4, -1.4000000000000001, -.4, -.4, -.7, -1.3000000000000003, -1.3000000000000003, 2.4, -1.5, -1.5, -6.300000000000001, -1.5, -1.5, 6.2, 6.2, 3.1000000000000005, 1.2, .8000000000000002, .8000000000000002, -.29999999999999993, -.7999999999999999, -.7999999999999999, 1, 2, 2, -5, -5, -3.5, -.6000000000000001, 1.4, 1.8, 1.8, .7999999999999999, -8.326672684688674e-17, -8.326672684688674e-17, -.30000000000000004, -.30000000000000004, -.6, -.8999999999999999, -1.0000000000000002, -1.1000000000000003, -.8, -.8, -.2, 1.5999999999999999, 2.4000000000000004, 2.4000000000000004, 1.1, 1.1, -.4, -1.7, -1.7, 0, -.8, -1, -1, 3, -1.0999999999999999, -1.0999999999999999, -6.6000000000000005, -1.5, -1.5, 6, 5.500000000000001, 5.500000000000001, 1.9, .20000000000000007, .20000000000000007, -.7, -1, -1, .7000000000000001, 2.3, 2.3, -4.6000000000000005, -5, -2.4, -2.4, 1.2999999999999998, 1.2000000000000002, 1.2000000000000002, .7, .7, .8, .10000000000000009, .10000000000000009, -.8, -1.4000000000000001, -1.4000000000000001, -1.4000000000000001, 0, 1.4, 1.4, 2.1, 1.3, .4, -.5, -.5, -1.3, -1, -1.5000000000000002, -1.5999999999999999, .8000000000000002, 3.8, 3.8, -4.6, -7.3, -7.3, 1.7999999999999998, 1.7999999999999998, 6.1000000000000005, 4.3, 2.3, .9000000000000001, 0, -.8, -.8, -1.3, -.1, -.1, 1.4000000000000001, -3, -5.2, -5.2, -.7999999999999999, .8999999999999998, .8999999999999998, 1.1, .5, .5, .3, .3, .2, -.1, -.1, -.5999999999999999, -.7, -.4, -.4, .9000000000000001, .9000000000000001, 1.5999999999999999, 1.3000000000000003, 1.3000000000000003, .1, -1.4000000000000001, -1, -1.4000000000000001, -2, .4000000000000001, 3, .8999999999999999, -4.8, -4.8, -3.6000000000000005, 2.5999999999999996, 2.5999999999999996, 6.3, 4.1, 1.6];
}
var imaginary = new Array(real.length);
imaginary.fill(0);
original = real.slice(real.length - 512);
///////////////////////////////////////////////////
//// OUTPUT
///////////////////////////////////////////////////
out('Original source (real array)');
out(original);
fft = new FFT(original.length, 60);
fft.forward(original);
out('FFT');
out(fft.spectrum);
time = Array(512).fill(0).map((a, b) => b / 60);
var data1 = [{
name: 'original source',
y: original,
x: time
}];
sn = Array(256).fill(0).map((a, b) => b);
fftdata = Array.from(fft.spectrum);
var data2 = [{
name: 'fft data',
y: fftdata,
x: sn //freqs
}];
sn3 = Array(256).fill(0).map((a, b) => 60 * b * 30 / 256);
var data3 = [{
name: 'BPM',
y: fftdata.slice(5, 20),
x: sn3.slice(5, 20)
}];
font = {
family: "Times New Roman",
size: 18
};
Plotly.newPlot('stage1', data1, {
title: 'Sensor data',
xaxis: {
title: 'seconds'
},
yaxis: {
title: 'signal'
},
font: font
});
Plotly.newPlot('stage2', data2, {
title: 'FFT data',
xaxis: {
title: 'bin #'
},
yaxis: {
title: 'signal'
},
font: font
});
Plotly.newPlot('stage3', data3, {
title: 'BPM',
xaxis: {
title: 'BPM'
},
yaxis: {
title: 'Amplitude'
},
font: font
});
});
<script src="https://dyns.gq/test/zfft.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/plotly.js#2.16.5/dist/plotly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<H2>Example</H2>
<div id="stage1"></div>
<div id="stage2"></div>
<div id="stage3"></div>
<div id="console"></div>
</body>

Plot.ly does not render when passed an array of traces

The code below fails to render data. No exceptions are thrown. However, the same code does work when given only one of the two traces as shown in the second code segment. The only difference is calling
Plotly.newPlot(target_target, traces); // doesn't render
instead of:
Plotly.newPlot(target_target, trace0); // trace1 also works.
I'm a javascript noob so it's probably something wrong with my traces array, but it looks like the example code I looked at.
Code that doesn't work (complete):
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id='target' style="width:600px;height:450px;"></div>
<script>
var target_target = document.getElementById('target');
var trace0 =
[{
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
type: 'scatter'
}];
var trace1 =
[{
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.0, 1.0, 6.0, 14.0, 25.0, 39.0],
type: 'scatter'
}];
var traces = [ trace0, trace1 ];
Plotly.newPlot(target_target, traces);
</script>
</body>
</html>
Code that does work (complete):
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id='target' style="width:600px;height:450px;"></div>
<script>
var target_target = document.getElementById('target');
var trace1 =
[{
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.0, 1.0, 6.0, 14.0, 25.0, 39.0],
type: 'scatter'
}];
Plotly.newPlot(target_target, trace1);
</script>
</body>
</html>
The mistake you made was simply that the individual traces should be objects not array of a single object, all you need to do is to make this correction.
Before:
var trace0 =
[{
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
type: 'scatter'
}];
After:
var trace0 =
{
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
type: 'scatter'
};
Then these individual traces(objects) need to be grouped into an array and set in plotly.
var traces = [ trace0, trace1 ];
Plotly.newPlot(target_target, traces);
That is why the second example works, since the traces are received as an array of objects.
Please do refer the below example and check if your issue is resolved!
var target_target = document.getElementById('target');
var trace0 = {
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
type: 'scatter'
};
var trace1 = {
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.0, 1.0, 6.0, 14.0, 25.0, 39.0],
type: 'scatter'
};
var traces = [trace0, trace1];
Plotly.newPlot(target_target, traces);
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id='target' style="width:600px;height:450px;"></div>
</body>
</html>

highcharts error #13 histogram

I've copied just the code in Highcharts demo, but this histogram does not appear and console says: "Highcharts error #13: www.highcharts.com/errors/13". It seems to have forgotten something, but i don't know what... Please help. Thanks!
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js></script>
<script>
var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3,
4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2,
3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3,
3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3,
2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3,
2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2,
2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8,
3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2,
3.3, 3, 2.5, 3, 3.4, 3];
Highcharts.chart('container', {
title: {
text: 'Highcharts Histogram'
},
xAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Histogram' },
opposite: true
}],
yAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Histogram' },
opposite: true
}],
series: [{
name: 'Histogram',
type: 'histogram',
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1
}, {
name: 'Data',
type: 'scatter',
data: data,
id: 's1',
marker: {
radius: 1.5
}
}]
});
</script>
<div id="container" height="400px" width="800px"></div>
The only problem I see is that you are missing a double quote in your second <script> tag. Otherwise, it seems to work fine.
var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3,
4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2,
3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3,
3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3,
2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3,
2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2,
2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8,
3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2,
3.3, 3, 2.5, 3, 3.4, 3];
Highcharts.chart('container', {
title: {
text: 'Highcharts Histogram'
},
xAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Histogram' },
opposite: true
}],
yAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Histogram' },
opposite: true
}],
series: [{
name: 'Histogram',
type: 'histogram',
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1
}, {
name: 'Data',
type: 'scatter',
data: data,
id: 's1',
marker: {
radius: 1.5
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<div id="container" height="400px" width="800px"></div>
It works in JSFiddle https://jsfiddle.net/dgdcnmwx/
First, the HTML you posted is invalid HTML. Your second script is missing a closing ". The div's id has invisible white space characters. There is no html element, etc.
Your HTML should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
</head>
<body>
<div id="container" height="400px " width="800px "></div>
</body>
<script>
var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3,
4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2,
3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3,
3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3,
2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3,
2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2,
2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8,
3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2,
3.3, 3, 2.5, 3, 3.4, 3];
Highcharts.chart('container', {
title: {
text: 'Highcharts Histogram'
},
xAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Histogram' },
opposite: true
}],
yAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Histogram' },
opposite: true
}],
series: [{
name: 'Histogram',
type: 'histogram',
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1
}, {
name: 'Data',
type: 'scatter',
data: data,
id: 's1',
marker: {
radius: 1.5
}
}]
});
</script>
</html>

How to replace decimal number in array with lodash

i want to replace decimal number in my array list with empty string "". How i can do that with lodash?
Here my array example:
[ 0, 0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1, 1.05, 1.1, 1.15, 1.2, 1.25, 1.3, 1.35, 1.4, 1.45, 1.5, 1.55, 1.6, 1.65, 1.7, 1.75, 1.8, 1.85, 1.9, 1.95, 2, 2.05, 2.1, 2.15, 2.2, 2.25, 2.3, 2.35, 2.4, 2.45, 2.5, 2.55, 2.6, 2.65, 2.7, 2.75, 2.8, 2.85, 2.9, 2.95, 3, 3.05, 3.1, 3.15, 3.2, 3.25, 3.3, 3.35, 3.4, 3.45, 3.5, 3.55, 3.6, 3.65, 3.7, 3.75, 3.8, 3.85, 3.9, 3.95, 4, 4.05, 4.1, 4.15, 4.2, 4.25, 4.3, 4.35, 4.4, 4.45, 4.5, 4.55, 4.6, 4.65, 4.7, 4.75, 4.8, 4.85, 4.9, 4.95, 5, 5.05, 5.1, 5.15, 5.2, 5.25, 5.3, 5.35, 5.4, 5.45, 5.5, 5.55, 5.6, 5.65, 5.7, 5.75, 5.8, 5.85, 5.9, 5.95, 6, 6.05, 6.1, 6.15, 6.2, 6.25, 6.3, 6.35, 6.4, 6.45, 6.5, 6.55, 6.6, 6.65, 6.7, 6.75, 6.8, 6.85, 6.9, 6.95, 7, 7.05, 7.1, 7.15, 7.2, 7.25, 7.3, 7.35]
result i want:
["0", "", "", ..., "", "", "1", "", "", ..., "", "", "2", etc... ]
Just check if there is a dot after you convert to string
var data = [0, 0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1, 1.05, 1.1, 1.15, 1.2, 1.25, 1.3, 1.35, 1.4, 1.45, 1.5, 1.55, 1.6, 1.65, 1.7, 1.75, 1.8, 1.85, 1.9, 1.95, 2, 2.05, 2.1, 2.15, 2.2, 2.25, 2.3, 2.35, 2.4, 2.45, 2.5, 2.55, 2.6, 2.65, 2.7, 2.75, 2.8, 2.85, 2.9, 2.95, 3, 3.05, 3.1, 3.15, 3.2, 3.25, 3.3, 3.35, 3.4, 3.45, 3.5, 3.55, 3.6, 3.65, 3.7, 3.75, 3.8, 3.85, 3.9, 3.95, 4, 4.05, 4.1, 4.15, 4.2, 4.25, 4.3, 4.35, 4.4, 4.45, 4.5, 4.55, 4.6, 4.65, 4.7, 4.75, 4.8, 4.85, 4.9, 4.95, 5, 5.05, 5.1, 5.15, 5.2, 5.25, 5.3, 5.35, 5.4, 5.45, 5.5, 5.55, 5.6, 5.65, 5.7, 5.75, 5.8, 5.85, 5.9, 5.95, 6, 6.05, 6.1, 6.15, 6.2, 6.25, 6.3, 6.35, 6.4, 6.45, 6.5, 6.55, 6.6, 6.65, 6.7, 6.75, 6.8, 6.85, 6.9, 6.95, 7, 7.05, 7.1, 7.15, 7.2, 7.25, 7.3, 7.35]
.map((e) => {
let str = '' + e;
return str.includes('.') ? '' : str
});
console.log(data)
Just wanted to add on answer from #charlietfl. This is another variation. I believe it has slightly higher performance, since there's no string creation operation on each tick.
var data = [0, 0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1, 1.05, 1.1, 1.15, 1.2, 1.25, 1.3, 1.35, 1.4, 1.45, 1.5, 1.55, 1.6, 1.65, 1.7, 1.75, 1.8, 1.85, 1.9, 1.95, 2, 2.05, 2.1, 2.15, 2.2, 2.25, 2.3, 2.35, 2.4, 2.45, 2.5, 2.55, 2.6, 2.65, 2.7, 2.75, 2.8, 2.85, 2.9, 2.95, 3, 3.05, 3.1, 3.15, 3.2, 3.25, 3.3, 3.35, 3.4, 3.45, 3.5, 3.55, 3.6, 3.65, 3.7, 3.75, 3.8, 3.85, 3.9, 3.95, 4, 4.05, 4.1, 4.15, 4.2, 4.25, 4.3, 4.35, 4.4, 4.45, 4.5, 4.55, 4.6, 4.65, 4.7, 4.75, 4.8, 4.85, 4.9, 4.95, 5, 5.05, 5.1, 5.15, 5.2, 5.25, 5.3, 5.35, 5.4, 5.45, 5.5, 5.55, 5.6, 5.65, 5.7, 5.75, 5.8, 5.85, 5.9, 5.95, 6, 6.05, 6.1, 6.15, 6.2, 6.25, 6.3, 6.35, 6.4, 6.45, 6.5, 6.55, 6.6, 6.65, 6.7, 6.75, 6.8, 6.85, 6.9, 6.95, 7, 7.05, 7.1, 7.15, 7.2, 7.25, 7.3, 7.35]
.map((e) => {
return e % 1 === 0 ? e : '';
});
console.log(data)

How use database in Javascript and JSF?

I'm trying to follow the #BalusC advice here.
(I'm writing here now because it's unrelated with previous question).
So I need to get data from my database and show in chart using JavaScript, this is an example.
I'm just doing this sample so I can understand how to show some data from the server side to the client side.
My bean:
#ManagedBean(name="reportc")
#ViewScoped
public class ReportControl implements Serializable {
private static final long serialVersionUID = 3269125738504434502L;
private String[] dataAsJson = {"1.3", "2.1", "1.3", "2.2", "1.4", "2.7", "1.5", "2.1", "1.6", "2.4", "1.9", "2.1"};
public String getDataAsJson() {
Gson gson = new Gson();
return gson.toJson(dataAsJson);
}
}
To help understand the spline-plot-bands.js file.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
...
<h:head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript>
<h:outputScript name="javascript/highchart/spline-plot-bands.js" />
</h:head>
<h:body>
<h:outputScript name="javascript/highchart/highcharts.js" />
<h:outputScript name="javascript/highchart/modules/exporting.js" />
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</h:body>
</html>
As you can see in the spline-plot-bands.js file.
All that matters for me is this part (I guess):
series: [{
name: 'Hestavollane',
data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
3.0, 3.0]
}, {
name: 'Voll',
data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
}]
How could I send something like this from my server side to this javascript ?
I think I'm close to find out how to use gson, javascript with jsf, but I still don't get it how to finish this.
Could someone help me with this ?
The JS expects a double[], but you're feeding a String[]. Fix it accordingly:
private double[] hestavollane = {
4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
3.0, 3.0
};
private double[] voll = {
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4
};
public String getDataAsJson() {
Map<String, Object> data = new HashMap<String, Object>();
data.put("hestavollane", hestavollane);
data.put("voll", voll);
return new Gson().toJson(data);
}
And edit your spline-plot-bands.js file to use it instead of the hardcoded values:
series: [{
name: 'Hestavollane',
data: data.hestavollane
}, {
name: 'Voll',
data: data.voll
}]
The key part of the linked article that you need is this:
<h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript>

Categories

Resources