highcharts error #13 histogram - javascript

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>

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>

Cannot find name 'Highcharts'.ts(2304)

I am getting issue in angular "Cannot find name 'Highcharts'.ts(2304)"
how to solve this problem
also I used CDN for high chart
I installed
"npm install --save highcharts"
begin snippet: hide: false console: true babel: false
Highcharts.chart('container', {
chart: {
type: 'spline'
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
}
},
yAxis: {
opposite: true,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
},
tooltip: {
valueSuffix: ' m/s'
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
}
},
series: [{
name: 'Hestavollane',
data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
}],
navigation: {
menuI
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
temStyle: {
fontSize: '10px'
}
}
}
);
language: html
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
end snippet

Filling array with map function issue

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);

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