Find Y coordinate for a given x if smooth is enabled as true for line chart

[Bony John <bo...@gmail.com>]

Hi All,

I am really stuck at the below problem. Is there a way to find Y-axis point
if I know the corresponding x-axis.

for eg:   if my x-axis point is 24000 corresponding Y-axis is 9. Why I need
this information is to mark that corresponding point in the graph for the
user entered x-axis value.  I was able to calculate this correctly when
smooth is set as false. (calculated by finding the slope between the two
points and use that information to calculate y).

But when smooth is set as true it draws a Bezier curve. is there a way to
calculate the same for the bezier curve also? Any help on the same
is appreciated.

[image: image.png]

Thanks,
Bony

Re: Find Y coordinate for a given x if smooth is enabled as true for line chart

[Bony John <bo...@gmail.com>]

Hi  Wenli ,

Thanks for the help. I was able to crack it.

The curve which echarts renders was a cubic bezier curve. I was able to
figure out how the library was calculating the control points and how the
smoothing factor was being used. Once the control point was calculated it
was reverse solving the bezier equation using the given X coordinate.
The below function will return the Y coordinate if you pass the
X coordinate. (Smoothing factor is 0.5 and smoothMonotone is 'x')

I am using Algebra.js - https://algebra.js.org for solving the cubic
formula.

Shout out to a couple of stack overflow threads which helped in designing
the solution
https://stackoverflow.com/questions/28845817/chart-js-find-intersection-point-and-draw-a-circle

https://stackoverflow.com/questions/14174252/how-to-find-out-y-coordinate-of-specific-point-in-bezier-curve-in-canvas



*Function parameters -*

xval - this is the X coordinate for the Y to be derived from

cord1 and cord 2 is based on the data which is used to plot the graph.
Basically we are finding out the given xval is between which of the plotted
coordinates in the graph.
for eg:  my graph data is [0,0],[100,200],[300,250].
if my xval is 90 then cord1 will be [0,0] and cord2 will be [100,200]
if my xval is 150 then cord1 will be  [100,200] and cord2 will be
[300,250].


  findCurveCordinates(cord1, cord2, xval) {
    const p0 = cord1;
    const p3 = cord2;
    const ctrllen = (p3[0] - p0[0]) * 0.5;
    const p1 = [p0[0] + ctrllen, cord1[1]];
    const p2 = [p3[0] - ctrllen, cord2[1]];

    const a = (-1 * p0[0]) + (3 * p1[0]) - (3 * p2[0]) + p3[0];
    const b = (3 * p0[0]) - (6 * p1[0]) + (3 * p2[0]);
    const c = (-3 * p0[0]) + (3 * p1[0]);
    const d = p0[0] - xval;

    const n1 = algebra.parse(a + '*q*q*q');
    const n2 = algebra.parse(b + '*q*q');
    const n3 = algebra.parse(c + 'q');
    const n4 = algebra.parse(d + '');
    const cubic = new algebra.Equation(n1.add(n2).add(n3).add(n4), 0);
    const q = cubic.solveFor('q');
    const t = q[0];

    const ret = {};
    const coords = [0, 1];
    let i, k;

    for (i in coords) {
      k = coords[i];
      ret[k] = Math.pow(1 - t, 3) * p0[k] + 3 * Math.pow(1 - t, 2) * t * p1[
k] + 3 * (1 - t) * Math.pow(t, 2) * p2[k] + Math.pow(t, 3) * p3[k];
    }

    return ret;

  }

Thanks,
Bony

On Thu, Oct 31, 2019 at 2:38 PM Ovilia <ov...@gmail.com> wrote:

> Hi Bony,
>
> Please check out this API [1] for converting data into screen position.
> As for smoothing, ECharts has this option [2]. But I'm afraid there's no
> API to know the interpolated position after smoothing.
>
> [1] https://echarts.apache.org/en/api.html#echartsInstance.convertToPixel
> [2] https://echarts.apache.org/en/option.html#series-line.smooth
>
> Wenli
>
>
> On Wed, Oct 30, 2019 at 11:10 PM Bony John <bo...@gmail.com> wrote:
>
>> Hi All,
>>
>> I am really stuck at the below problem. Is there a way to find Y-axis
>> point if I know the corresponding x-axis.
>>
>> for eg:   if my x-axis point is 24000 corresponding Y-axis is 9. Why I
>> need this information is to mark that corresponding point in the graph for
>> the user entered x-axis value.  I was able to calculate this correctly when
>> smooth is set as false. (calculated by finding the slope between the two
>> points and use that information to calculate y).
>>
>> But when smooth is set as true it draws a Bezier curve. is there a way to
>> calculate the same for the bezier curve also? Any help on the same
>> is appreciated.
>>
>> [image: image.png]
>>
>> Thanks,
>> Bony
>>
>

Re: Find Y coordinate for a given x if smooth is enabled as true for line chart

[Ovilia <ov...@gmail.com>]

Hi Bony,

Please check out this API [1] for converting data into screen position.
As for smoothing, ECharts has this option [2]. But I'm afraid there's no
API to know the interpolated position after smoothing.

[1] https://echarts.apache.org/en/api.html#echartsInstance.convertToPixel
[2] https://echarts.apache.org/en/option.html#series-line.smooth

Wenli


On Wed, Oct 30, 2019 at 11:10 PM Bony John <bo...@gmail.com> wrote:

> Hi All,
>
> I am really stuck at the below problem. Is there a way to find Y-axis
> point if I know the corresponding x-axis.
>
> for eg:   if my x-axis point is 24000 corresponding Y-axis is 9. Why I
> need this information is to mark that corresponding point in the graph for
> the user entered x-axis value.  I was able to calculate this correctly when
> smooth is set as false. (calculated by finding the slope between the two
> points and use that information to calculate y).
>
> But when smooth is set as true it draws a Bezier curve. is there a way to
> calculate the same for the bezier curve also? Any help on the same
> is appreciated.
>
> [image: image.png]
>
> Thanks,
> Bony
>