score:4

the main points to achieve this with chartjs (without being an chartjs expert by any means) would be:

method 1 - math

step 1

unless you can get a processed point array from chartjs' internals, you would have to, as chartjs uses bezier curves to draw the graphs, manually convert your point data set into a new point array representing the drawn line.

you would also have to consider scale the same way as chartjs does. as canvas does not provide the points for its bezier method, you will have to calculate them using for example this. you need to pick a resolution and generate new segments between each of the points in the data set.

have in mind though: you can not just use some random control points - you will have to replicate these too for the curve the same way chartjs does, so you need to use its source as basis.

step 2

when both lines are in "bezier form" you will have to limit the range you want to search by finding which segments of the lines are covering the range you want to check them against.

do to this using line.x1 <= range.x1 <= line.x2 and the same for range.x2 of the range you want to search (the y axis is not important in this step).

you should end up having two arrays with line segments that matches the range.

(of course, if you don't need to reuse the curves and only need a single segment, you can just find the segments in step 1 and use that for this step).

step 3

now you need to loop through array one.

for the current segment in array one, you need to test against all the segments in array two doing intersection test using a method such as this one (you can filter down number of tests by checking if the two lines have any overlap on the x-axis).

final

now you can extract the intersecting point (if any) and plot it to chartjs' canvas (and congratulation, you are also halfway to your own chart widget :p ).

method 2 - brute force

step 1

get the bitmap of the canvas.

step 2

define a range you want to search for intersection

calculate the composed color where the two lines meet. this will be the color you search for (you can do a pre-step instead, locating a known intersection and read the pixel value from that point).

step 3

scan line by line (vertically) and test each pixel for color values. you need to use a tolerance range (+/- t%) as the canvas pixels are integer values while your result from mixing is a floating point value.

final

when a pixel has been found add a delta to the value to compensate for line width. plot to canvas.


Related Query

More Query from same tag