I am trying to use Highcharts to calculate and visualize the magnitude of a complex number. Currently, my code is displaying the real and imaginary values separately on the graph. However, I seem to be facing issues with the "For loop" that I implemented. As a newcomer to Highcharts, I would appreciate it if someone could point out where I may have gone wrong?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
function makeChart(){
$('#container').highcharts({
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type: ''
},
yAxis: {
title: {
text: ''
},
},
legend: {
enabled: false,
},
series: [{
"name": "rawDataFreq",
"data": [0.005,
0.01,
0.015,
0.02,
0.024999999,
0.029999998,
0.035,
0.04,
0.045,
0.049999997,
0.054999995,
0.06,
0.065,
0.07,
0.075,
0.08,
0.085,
0.09,
0.095,
0.1,
0.105,
0.11,
0.115,
0.12,
0.125,
0.13,
0.13499999,
0.13999999,
0.145,
0.14999999,
0.15499999,
0.16,
0.16499999,
0.16999999,
0.175,
0.17999999,
0.18499999,
0.19,
0.195,
0.19999999,
0.20499998]
}, {
"name": "rawDataReal",
"data": [0.0201808685573576,
0.0767697223756945,
0.158682648165923,
0.249837894338925,
0.332117497531074,
0.388486758487953,
0.405658247813341,
0.375893015564664,
0.297781091351485,
0.176066765803544,
0.0207198248638412,
-0.154486149201635,
-0.333632455792532,
-0.50034171901689,
-0.639326270705166,
-0.73769508266917,
-0.78595341067365,
-0.778665026494336,
-0.714772534308723,
-0.597587985327756,
-0.434481612563418,
-0.236305675925078,
-0.0166000654885318,
0.209367793245636,
0.425668306470451,
0.616818629518453,
0.768867682979019,
0.870392411592417,
0.913338195367741,
0.893650069853281,
0.811642807549262,
0.672076423910065,
0.483922946878543,
0.259820779969512,
0.015255193586922,
-0.23249535939003,
-0.465581710361413,
-0.666874686000139,
-0.821246389838196,
-0.91674068380029,
-0.94553784066234]
}, {
"name": "rawDataImag",
"data": [0.0675545914177537,
0.117156377483156,
0.134184248961863,
0.109954668889497,
0.0430934390486774,
-0.0604922824628415,
-0.188868821726251,
-0.32615740460395,
-0.454964125730713,
-0.558727284498096,
-0.623674108742807,
-0.640215131053008,
-0.603726043334295,
-0.514749853472742,
-0.378702137106123,
-0.205185549905176,
-0.00702389181498738,
0.200878821925561,
0.402758663360984,
0.583207037132255,
0.728307795918874,
0.826634253007817,
0.870054851853836,
0.854307437716744,
0.779313360666507,
0.649215214597493,
0.472135336231634,
0.2596646296396,
0.0261122004577115,
-0.212445675964786,
-0.439266519954881,
-0.638109861272021,
-0.794408318676894,
-0.896357162635668,
-0.935831163700915,
-0.909067785047298,
-0.817049526245347,
-0.665548148633306,
-0.464818102478558,
-0.228945676059982,
0.0251035652398094]
}]
})
var result = 0;
var resultArray = new Array ();
var x = 0;
var y=0;
for (i=0; i < rawDataFreq.length; i++)
{
result = 0;
x=rawDataReal[i];
y=rawDataImag[i];
result = (Math.sqrt(Math.pow(x,2)+Math.pow(y,2)));
resultArray[i] = result;
}
}
$(window).load(makeChart);
</script>
</body>
</html>