1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Dash client side callback to add trace in figure

Dash client side callback to add trace in figure

I want to add multiple traces to the figure but instead of using server side i want to do it in java script at client side. Like adding moving average for already plotted data or some other minimal calculation and making a trace in the figure.

Could you please help me with any solution which can add a simple trace in the figure using client side javascript code.

Not able to find out any specific solution for this


3 Replies
UD UdhayaKumar Duraisamy Syncfusion Team November 28, 2022 01:56 PM UTC

Hi Karthik,


We need additional information about the query as mentioned below to proceed further.


  1. Syncfusion control that using on your end.
  2. Component package version.
  3. Exact requirement details.
  4. If you are facing any issues, Share the issue replicating runnable sample.


Regards,

Udhaya Kumar D



EW Eden Wheeler August 31, 2023 05:31 AM UTC

Hi,

Here's a basic example of how you could add a moving average trace to an existing figure using Plotly.js:

<!DOCTYPE html>

<html>

<head>

  <!-- Include Plotly.js library -->

  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>

<body>

  <!-- Create a div element to hold the plot -->

  <div id="plot"></div>


  <script>

    // Sample data

    var x = [1, 2, 3, 4, 5];

    var y = [10, 12, 9, 15, 11];


    // Create a trace for the original data

    var traceOriginal = {

      x: x,

      y: y,

      mode: 'lines',

      name: 'Original Data'

    };


    // Calculate moving average

    var windowSize = 3;

    var movingAverage = [];

    for (var i = 0; i < y.length - windowSize + 1; i++) {

      var sum = 0;

      for (var j = i; j < i + windowSize; j++) {

        sum += y[j];

      }

      movingAverage.push(sum / windowSize);

    }


    // Create a trace for the moving average

    var traceMovingAverage = {

      x: x.slice(windowSize - 1),

      y: movingAverage,

      mode: 'lines',

      name: 'Moving Average'

    };


    // Combine traces

    var data = [traceOriginal, traceMovingAverage];


    // Create layout options

    var layout = {

      title: 'Plot with Moving Average',

      xaxis: {

        title: 'X-axis'

      },

      yaxis: {

        title: 'Y-axis'

      }

    };


    // Create the plot

    Plotly.newPlot('plot', data, layout);

  </script>

</body>

</html>



Thanks

Power bi training


NP Nishanthi Panner Selvam Syncfusion Team September 6, 2023 09:18 AM UTC

Eden,


We have analyzed your query based on that we suggest you to use trendline, which essentially act like a moving average for the data already plotted on the graph which will meet your requirement.


Screenshot:



SB Sample: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/chart/trend-lines.html


For more information we suggest you to refer https://ej2.syncfusion.com/documentation/chart/trend-lines


Kindly revert us if you have any concerns.


Regards,

Nishanthi


Loader.
Up arrow icon