I'm trying to ceate a plot using the highcharts.
I just want to create the line and avoid filling the area from the line.
[{"id":"31056003.3074b","type":"inject","z":"b5ebaee.e0addd","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":220,"y":120,"wires":[["792b08d4.a2c288"]]},{"id":"f8df1757.d31088","type":"ui_template","z":"b5ebaee.e0addd","group":"90dc9d5d.7ddcf","name":"HiChart","order":0,"width":0,"height":0,"format":"<!--\n<script src=\"/scripts/highcharts/highcharts.js\"></script>\n<script src=\"/scripts/highcharts/modules/exporting.js\"></script>\n<script src=\"/scripts/highcharts/modules/no-data-to-display.js\"></script>\n<script src=\"/scripts/site/chart.js\"></script>\n\n<script src=\"https://code.highcharts.com/modules/exporting.src.js\"></script>\n<script src=\"https://code.highcharts.com/modules/no-data-to-display.src.js\"></script>\n-->\n\n<script src=\"https://code.highcharts.com/highcharts.src.js\"></script>\n\n\n<div id=\"graph\" style=\"min-width: 600px; height: 300px; margin: 0 auto\"></div>\n\n<script>\n(function(scope){\n var timer = setInterval(function(){\n if (!window.Highcharts) return;\n //debugger;\n clearInterval(timer);\n \n\n function getChartOptions(renderToElement) {\n \treturn {\n \t\tchart: {\n \t\t\trenderTo: renderToElement,\n \t\t\ttype: 'line',\n \t\t\tzoomType: 'x'\n \t\t},\n plotOptions: {\n series: {\n type: 'line',\n connectEnds: false,\n connectNulls: true,\n\t\t\t threshold: 0\n },\n line: {\n\t\t\t color: 'red',\n\t\t\t lineWidth: 1,\n\t\t\t threshold: 0\n\t\t }\n },\n \t\tseries: [{\n \t\t\tname: 'Forward',\n \t\t\tlineWidth: 1,\n \t\t\ttype: 'line',\n \t\t\tdashStyle: 'longdash',\n \t\t\tconnectEnds: false,\n connectNulls: true,\n\t\t threshold: 0\n \t\t}]\n \t};\n }\n \n var ch = new Highcharts.chart(getChartOptions('graph'));\n var pForward = ch.series[0];\n\n scope.$watch('msg', function(msg) {\n switch (msg.topic){\n case 'forward':\n pForward.setData(msg.payload.data, true, false, true);\n break;\n default:\n break;\n }\n });\n\n }, 100);\n})(scope);\n\n//(function(scope){\n// scope.$watch('msg', function(msg) {\n// switch (msg.topic){\n// case 'forward':\n// pForward.setData(msg.payload.data, true, false, true);\n// break;\n// case 'reflected':\n// pReflected.setData(msg.payload.data, true, false, true);\n// break;\n// default:\n// break;\n// }\n// });\n//})(scope);\n\n</script>\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":680,"y":120,"wires":[[]]},{"id":"792b08d4.a2c288","type":"function","z":"b5ebaee.e0addd","name":"forward data","func":"const dTrig = (trigFunc, angle) => trigFunc(angle * Math.PI / 180);\n\nvar values = new Array(5);\n\nfor(let i=0; i<values.length; i++){\n values[i] = 10 * Math.random();\n //dTrig(Math.sin, i*360/values.length);\n}\n\nmsg.topic = \"forward\"\nmsg.payload={\n data: values\n };\n \nreturn msg;","outputs":1,"noerr":0,"x":450,"y":120,"wires":[["62790fbe.c704a","f8df1757.d31088"]]},{"id":"62790fbe.c704a","type":"debug","z":"b5ebaee.e0addd","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":670,"y":40,"wires":[]},{"id":"90dc9d5d.7ddcf","type":"ui_group","z":"","name":"Charts","tab":"b5c65cf5.9d8fe","order":2,"disp":true,"width":"12","collapse":false},{"id":"b5c65cf5.9d8fe","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]
If I use the same code separately as html, all looks fine. (second plot on picture)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>
<script>
function getData(n) {
var arr = [], i
for (i = 0; i < n; i++) {
arr.push(10 * Math.random());
}
return arr;
}
data = getData(5);
function getChartOptions(renderToElement) {
return {
chart: {
renderTo: renderToElement,
type: 'line',
zoomType: 'x'
},
plotOptions: {
series: {
type: 'line',
connectEnds: false,
connectNulls: true,
threshold: 0
},
line: {
color: 'red',
lineWidth: 1,
threshold: 0
}
},
series: [{
name: 'Forward',
lineWidth: 1,
type: 'line',
dashStyle: 'longdash',
connectEnds: false,
connectNulls: true,
threshold: 0
}]
};
}
var ch = new Highcharts.chart(getChartOptions('container'));
var pForward = ch.series[0];
pForward.setData(data, true, false, true);
</script>
</body>
</html>
What can I do?
