Plot a time series using highcharts

#1

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?

0 Likes

#2

You need to edit your post and fix the flow - see

0 Likes

#3

I have tried to upload directly to the post and I got message:

Sorry, new users can not upload attachments.

0 Likes

#4

((admin) edited it for you)

0 Likes

#5

If you use a code inspector (I'm using Safari) you can take a look at the CSS applied. In Safari, I chose the inspectr tool:


and selected the area of the graph:

once there you can see some CSS that is setting the fill.

clicking next too the CSS rule, it is shut off and the fill is removed.

So now you just have to add a CSS selector and rule to shutoff the fill.

I'm going to leave you to try to figure this out. I know the answer and 'can' give it to you, but digging in a bit and trying some things will be a learning experience for you.

0 Likes

#6

Or maybe turn off the dashboard themeing inside the ui-template... (use the default angular one instead)

1 Like

#7

Thank you very much.

0 Likes