# What JavaScript Code Would I Use To Plot A Trend Line?

## 26 January 2020 - 1 answer

UPDATE I managed to get trendline support added to the RGrah Line and Scatter charts. There's a demo in the download archive called demos/line-trendline.html that shows it. The Scatter chart supports trendlines too.

Assuming that I have the following values that I'm going to plot on a Line chart (these are values and not coordinates - the coordinates are calculated by my software and are shown below):

``````[4,4,3,2,5,5]
``````

How would I turn those values into a set of trendline values/coordinates? (BTW I don't really have any Maths expertise beyond school level - so no fancy Maths terminology please!).

To add further details: These are a set of values that are spaced equally across a 500 pixel space (an HTML5 canvas tag). So the X coordinates are calculated for you and will come out like this (35 pixel margin on both sides of the chart): [35,121,207,293,379,465].

These are just the X coordinates, the Y coordinates are calculated automatically based on the scale, the height of the chart and the value. Here's an example Line chart that my software creates using this code:

``````<canvas id="cvs" width="500" height="250">
[No canvas support]
</canvas>

<script>
line = new RGraph.Line({
id: 'cvs',
data: [4,4,3,2,5,5],
options: {
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
backgroundGridBorder: false,
backgroundGridVlines: false,
xaxis: false,
yaxis: false
}
}).draw()
</script>
``````

You can see the chart online here:

And the X/Y coordinates (that are then plotted on the canvas tag) that are generated end up as this:

``````[[35,71],[121,71],[207,107],[293,143],[379,35],[465,35]]
``````

So you already know:

the X coordinates are calculated for you ... (35 pixel margin): 35, 121, 207, 293, 379, 465.

the generated result:
`[[35,71], [121,71], [207,107], [293,143], [379,35], [465,35]]` that's just a list of `[x,y]` points

From that we can remove the X we know (calculated for us) and we will get:
`71, 71, 107, 143, 35, 35`
we can see a pattern with the original input
`4, 4, 3, 2, 5, 5`

piece of cake to get the formula with that sequence:
`35 + (5 - y)*36`

All that remains is to put that formula into code:

``````<canvas id="canvas"></canvas>

<script>
canvas = document.getElementById('canvas');
canvas.width = canvas.height = 500;
ctx = canvas.getContext('2d');

x = 35
trendline = []
plot = [4, 4, 3, 2, 5, 5]

plot.forEach(function(value) {
y = 35 + (5 - value) * 36
ctx.lineTo(x, y);
trendline.push([x, y])
x += 86
});

ctx.stroke();
console.log(JSON.stringify(trendline))
</script>``````

Now from what you mentioned on the comments:

it just plots the values that you give it ... It doesn't generate trend lines from your data

looking at the code of rgraph on the `drawLine` function:
https://www.rgraph.net/libraries/src/RGraph.line.js

``````        // Loop thru each value given, plotting the line
// (FORMERLY FIRST)
for (i=0,len=lineData.length; i<len; i+=1) {

var data_point = lineData[i];

//
// Get the yPos for the given data point
//
var yPos = this.getYCoord(data_point);

...

//
// Add the coords to an array
//
this.coords.push([xPos, yPos]);
lineCoords.push([xPos, yPos]);
``````

That lineCoords looks like a trendline to me...