# Plot a time series using highcharts

**URL:** <https://discourse.nodered.org/t/plot-a-time-series-using-highcharts/7429>\
**Category:** Dashboard\
**Created:** [31 January 2019 12:16 UTC](https://discourse.nodered.org/t/plot-a-time-series-using-highcharts/7429 "2019-01-31T12:16:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![m\_pete](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@m\_pete](https://discourse.nodered.org/u/m_pete)\
**Post date:** [31 January 2019 12:16 UTC](https://discourse.nodered.org/t/plot-a-time-series-using-highcharts/7429/1 "2019-01-31T12:16:20Z")

</div>

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.

 ![highchart-nodered-add](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2850ed1364cdd09daa495fab30521d7793970040.jpeg)

```auto
[{"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)

```auto
<!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?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [31 January 2019 19:14 UTC](https://discourse.nodered.org/t/plot-a-time-series-using-highcharts/7429/2 "2019-01-31T19:14:16Z")

</div>

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

> [@How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506/3):
>
> Also, larger flows can now be saved as a txt or json file and uploaded directly to the post. Paul

---

<div class="post-metadata">

**Author:** ![m\_pete](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@m\_pete](https://discourse.nodered.org/u/m_pete)\
**Post date:** [1 February 2019 08:52 UTC](https://discourse.nodered.org/t/plot-a-time-series-using-highcharts/7429/3 "2019-02-01T08:52:59Z")

</div>

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

> Sorry, new users can not upload attachments.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 February 2019 09:00 UTC](https://discourse.nodered.org/t/plot-a-time-series-using-highcharts/7429/4 "2019-02-01T09:00:56Z")

</div>

((admin) edited it for you)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [1 February 2019 11:37 UTC](https://discourse.nodered.org/t/plot-a-time-series-using-highcharts/7429/5 "2019-02-01T11:37:17Z")

</div>

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:

 ![area1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/cfb0800e0368051a2eb14758bbf16dd6332999eb.jpeg)  
and selected the area of the graph:  
 ![area2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0ea8c5950d6ff135bd2db36e0c44abef1df0eafc.jpeg)  
once there you can see some CSS that is setting the fill.  
 ![area3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/185880b978cdc79be6de7bb69edf6d54f75ef366.jpeg)  
clicking next too the CSS rule, it is shut off and the fill is removed.  
 ![area4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c15a98acbc86485d3cc4f94b4f4fa8ba7711ccab.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 February 2019 12:48 UTC](https://discourse.nodered.org/t/plot-a-time-series-using-highcharts/7429/6 "2019-02-01T12:48:14Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f15187b3361ca8c59021e3c949b9327179f18988.jpeg)

---

<div class="post-metadata">

**Author:** ![m\_pete](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@m\_pete](https://discourse.nodered.org/u/m_pete)\
**Post date:** [1 February 2019 13:32 UTC](https://discourse.nodered.org/t/plot-a-time-series-using-highcharts/7429/7 "2019-02-01T13:32:14Z")

</div>

Thank you very much.