# Line Chart - Overlay to Spline chart

**URL:** <https://discourse.nodered.org/t/line-chart-overlay-to-spline-chart/36183>\
**Category:** General\
**Created:** [19 November 2020 09:02 UTC](https://discourse.nodered.org/t/line-chart-overlay-to-spline-chart/36183 "2020-11-19T09:02:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![aksook](https://avatars.discourse-cdn.com/v4/letter/a/e9c0ed/32.png) [@aksook](https://discourse.nodered.org/u/aksook)\
**Post date:** [19 November 2020 09:02 UTC](https://discourse.nodered.org/t/line-chart-overlay-to-spline-chart/36183/1 "2020-11-19T09:02:52Z")

</div>

I'm trying to produce a spline chart for the data (ARRAY) that i receive from my epics nodes

[The first data-set is 2 Arrays for Current Signal containing 197 elements - one array for x-co-ordinates and one for y co-ordinates  
The second data-set is 2 Arrays for Spline Points containing 30 elements - one for x co-ordinates and one for y co-ordinates]

I've replicated the problem with a simple graph. Here's the code here

```auto
[{"id":"41062eed.ec205","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"faa41478.ebfa68","type":"function","z":"41062eed.ec205","name":"Normalize&MergeXY-Array","func":"context.X = context.X || 0.00; \ncontext.X = [0,10,20,30,40,50,60,70,80,90] //Array 1 X-CoOrdinates\n\ncontext.Y = context.Y || 0.00; \ncontext.Y = [5,15.5,12.5,23,17,99,45,11,27,5] //Array 1 Y-CoOrdinates\n\ncontext.GX = context.GX || 0.00; \ncontext.GX = [0,20,40,60,80] //Array 2 X-CoOrdinates\n\ncontext.GY = context.GY || 0.00; \ncontext.GY = [5,12.5,17,45,27] //Array 2 Y-CoOrdinates\n\n\nvar line_1 = []\nvar i\nfor(i = 0;i< context.X.length;i++){\n line_1.push({x:context.X[i],y:context.Y[i]})\n}\nvar line_2 = []\nfor( i = 0;i< context.GX.length;i++){\n line_2.push({x:context.GX[i],y:context.GY[i]})\n}\n\n\nvar m={};\nm.labels = context.X,context.GX;\nm.series = ['Current Signal','Spline'];\nm.data = [\n line_1,\n line_2,\n];\n \n \n\nvar opt= {\n legend: {\n display: true\n },\n scales: {\n xAxes: [{\n gridLines:{\n color:'rgba(0, 0, 0, 0.2)',\n zeroLineColor:'rgba(0, 0, 0, 0.2)'\n },\n type: 'linear',\n position:'bottom',\n ticks: {\n fontColor:\"#ccc\",\n max: 100,\n min: 0,\n }\n }],\n yAxes: [{\n gridLines:{\n color:'rgba(0, 0, 0, 0.2)',\n zeroLineColor:'rgba(0, 0, 0, 0.2)'\n },\n ticks: {\n fontColor:\"#ccc\",\n }\n }]\n }\n}\n \n\nreturn {payload:[m],ui_control:{options:opt}};\n\n","outputs":1,"noerr":0,"x":440,"y":220,"wires":[["33735920.105b86","7333aec5.00484"]]},{"id":"33735920.105b86","type":"ui_chart","z":"41062eed.ec205","name":"","group":"c8b54dda.8bee48","order":2,"width":20,"height":7,"label":"Normalized","chartType":"line","legend":"true","xformat":"Energy","interpolate":"linear","nodata":"NO DATA","dot":true,"ymin":"-5","ymax":"105","removeOlder":"1100","removeOlderPoints":"10500","removeOlderUnit":"1","cutout":0,"useOneColor":true,"colors":["#2ca02c","#f97a2c","#5ce0cc","#2c3aa0","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":700,"y":240,"wires":[[]]},{"id":"7333aec5.00484","type":"debug","z":"41062eed.ec205","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":690,"y":200,"wires":[]},{"id":"ab86f047.7dbdd8","type":"inject","z":"41062eed.ec205","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":200,"y":220,"wires":[["faa41478.ebfa68"]]},{"id":"c8b54dda.8bee48","type":"ui_group","z":"","name":"Chart","tab":"b0200c2b.e358d","order":1,"disp":false,"width":"26","collapse":false},{"id":"b0200c2b.e358d","type":"ui_tab","z":"","name":"Question - How to display 2 different dimension arrays on Line Chart correctly","icon":"dashboard","disabled":false,"hidden":false}]

```

My issue is that i'm trying to reproduce a spine graph as shown in the image below

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5e2286e833704e8125d9bdc66a35f5b6528376c7.png)

Is there a way to display the orange lines as the spline points of the Current signal graph?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 January 2021 09:02 UTC](https://discourse.nodered.org/t/line-chart-overlay-to-spline-chart/36183/2 "2021-01-18T09:02:54Z")

</div>

Closed on 18 January 2021 09:02 UTC

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.