Plot TrendLine equation using YFunctionSeries

Plot TrendLine equation using YFunctionSeries

Posted by: marojevic on 17 July 2019, 4:49 am EST

• 

  marojevic

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 July 2019, 4:49 am EST

  Hi,

  I’m using wijmo react and trying to create function series based on calculated trend line equation.
  
  I’ve used Polynomial fit type and my equation looks like this: y = -3e - 35x3 + 8e - 23x2 - 6e - 11x + 131.15.
  
  First of all, can I format this equation in another form? How can I use fmt property of getEquation() function to get for example scientific format?
  
  Now I’m trying to crate series on my other chart using this equation. I’ve created function series like this:

  <FlexChart
              initialized={props.initChart}
              itemsSource={props.historyFluid}
              bindingX="Date"
              chartType="Scatter"
              header={translate('LABEL_STATICPRESSUREHISTORY')}
              legendToggle={true}
              style={{ height: 700 }}          
              symbolSize={5}
              tooltip={{content: "<b>" + translate("WellName") +": {WellName}</b> <br/>{x} {y}"}} >
              <FlexChartLegend position="Top" />
              <FlexChartAxis wjProperty="axisX" format="MM-yyyy" labelAngle={45} majorUnit={30} />
              <FlexChartAxis wjProperty="axisY" min={0} majorGrid={true} title={unitCaptionPressureH('SPPress')} />
  
              <FlexChartSeries
                  itemsSource={props.includedStaticPressures}
                  name={translate('SPPress')}
                  binding="SPPress"
                  style={{ fill: 'SteelBlue', stroke: 'SteelBlue'}} >
              </FlexChartSeries>
              <FlexChartSeries
                  itemsSource={props.excludedStaticPressures}
                  name={translate('LABEL_PRESSUREHISTORY_EXCLUDEDPRESSURES')}
                  binding="SPPress"
                  style={{fill: 'DarkGrey', stroke: 'DarkGrey'}} >
              </FlexChartSeries>
              <FlexChartSeries
                  itemsSource={props.historyFluid}
                  name={translate('MPF')}
                  binding="MPF"
                  chartType="Line"
                  style={{ strokeWidth: 1, fill: 'black', stroke: 'black'}} >
                  <FlexChartAxis wjProperty="axisY" max={props.maxAxisY} position="Right" majorGrid={false} title={unitCaptionPressureH('MPF')} />
              </FlexChartSeries>
              <FlexChartYFunctionSeries
                  name="y = f(x)"
                  itemsSource={props.historyFluid}
                  binding="MPF"
                  bindingX="Date"
                  sampleCount={3000}
                  func={props.yFunc}
              >
              </FlexChartYFunctionSeries>
          </FlexChart>
  

      yFunc = (x) => {
          return -3 * Math.E - 35 * Math.pow(x, 3) + 8 * Math.E - 23 * Math.pow(x, 2) - 6 * Math.E - 11 * x + 131.35;
      };
  

  And it doesn’t work right… When I log x values, it always gives me the same date (1970).
  
  Is there a problem with dates or I’m doing something wrong?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 July 2019, 9:29 am EST

  Hi Aleksandar,

  Regarding how to use the format function in getEquation method:

  The fmt callback takes a single parameter which is the coefficients of x in the equation and it is called for each coefficient. You may convert each of the coefficients as you wish. Please refer to the sample below that demonstrates this behavior:

  https://codesandbox.io/s/react-flexgrid-i41mv

  Regarding the YFunctionSeries:

  We have queried the dev team on the issue. We will give you an update as soon as we hear from them.

  Regards,
  
  Ashwin

• 

  marojevic

  • Post Options:
  • Link
    Copy

  Posted 18 July 2019, 12:34 pm EST

  Hi Ashwin,

  Thank you for your answer.

  I just want to let you know that in the example I’ve provided above, I accidentally left binding=“MPF” while I was trying to figure it out… I already have dates on x axis in my chart, and I want to add new series based on TrendLine equation.
  
  I hope your team will help me to solve this problem.

  Regards.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 July 2019, 8:22 am EST

  Hi Aleksandar,

  We are still investigating the issue with the help of the dev team. We will give you an update as soon as we have more information.

  Regards,
  
  Ashwin

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 22 July 2019, 11:44 pm EST

  Hi Aleksandar,

  The x-values of YFunctionSeries does not get updated automatically with axis limits. To change it, you need to update the min and max property of YFunctionSeries manually to keep them in sync with the x-axis.
  
  Also, to create the YFunctionSeries using the original TrendLineSeries, you need to use the coefficients of TrendLine instead of the equation. Please refer to the code snippet and the sample below:

  yFunc = x => {
  	let c = this.state.coefficients; // saved coefficients
  	let y = 0.0;
  	y = c[3] + x * (c[2] + x * (c[1] + x * c[0]));
  	return y;
  };
  

  https://codesandbox.io/s/react-flexgrid-w0o0b

  Regards,
  
  Ashwin

• 

  marojevic

  • Post Options:
  • Link
    Copy

  Posted 23 July 2019, 4:59 am EST

  Hi Ashwin,

  This solved my problem, thank you very much!

  Regards,
  
  Aleksandar