would anyone able to help me to resolve the issue in my Android app as I am new to develop Android mobile app.

I have a website, using python/flask, to display trading chart. the javascript from within the HTML page calls python API to return JSON data for display trading chart. It works well.

In my Android program, my cardAdaptor call the same Python API, but i do not know how to make it work in webView.

I show you my codes for the web first, hopefully you can understand what my issue
my python API code:

import yfinance as yf
import json
import plotly.express as px
import plotly

st = yf.Ticker("ANZ.AX")
df = st.history(period="1d", interval="1m")
df=df.reset_index()
df.columns = ['Date-Time']+list(df.columns[1:])
max = (df['Open'].max())
min = (df['Open'].min())
range = max - min
margin = range * 0.05
max = max + margin
min = min - margin
fig = px.area(df, x="Date-Time", y="Open",
    width=850, height=450,
        hover_data=("Open","Close","Volume"),
        range_y=(min,max), template="seaborn" )
fig.update_layout(title_text="ANZ Group", title_x=0.5)
#fig.show()
graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
return graphJSON

In html code:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="/static/assets/plugins/chart.js/Chart.min.js"></script>
                  <script>
                  const [response,
                        dailyTradeResponse
                         ] = await Promise.all([
                      fetch("/callback/getStock?data=" + Stock + "&period=" + Period + "&interval=" + Interval + "&chartselected=" + Chartselected),
                      fetch("/callback/getDailyTradeInfo?data=" + Stock + "&period=" + Period + "&interval=" + Interval )

                  ]);
                  response = fetch("/callback/getStock?data=" + Stock + "&period=" + Period + "&interval=" + Interval + "&chartselected=" + Chartselected)
                  if (response.ok) {
                      var chartJson = await response.json();
                      if (response.ok) {
                          Plotly.newPlot('chart', chartJson, {});
                          //hideSpinnerAndDisplayChartBlock();
                      } 
                  }
                  </script>


     div class="card-body">
         <div id="chart" class="chart"></div>
     </div>

I want to do the same thing in my Android App. that is what i have done.
first. i set up the permission from the AndroidMainfest.xml

 <uses-permission android:name="android.permission.INTERNET" />

Create a cardView trading layout, card_trading_chart.xml

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <!-- Other views (if needed) -->

    <WebView
        android:id="@+id/tradingChartWebView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        tools:ignore="WebViewLayout" />
</androidx.cardview.widget.CardView>

In my Java CardAdapter, call the api and place the output to webView

// CardAdapter.java
public class CardAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private static  int TYPE_IMAGE_TITLE = 0;
    private static  int TYPE_TRADING_CHART = 0;
    private List<CardItem> cardItems; // Your data model (list of items)
    private boolean isHorizontal; // Flag to determine the orientation

    public CardAdapter(List<CardItem> cardItems, boolean isHorizontal) {
        this.cardItems = cardItems;
        this.isHorizontal = isHorizontal;

        if (isHorizontal) {
            TYPE_TRADING_CHART = 0;
        } else {
            TYPE_TRADING_CHART = 1;
        }
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        if (isHorizontal) {
            View itemView = inflater.inflate(R.layout.card_trading_chart, parent, false);
            return new TradingChartViewHolder(itemView);
        } else {
            View itemView = inflater.inflate(R.layout.card_item, parent, false);
            return new ImageTitleViewHolder(itemView);
        }

    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        System.out.println("position:[" + position + "]");
        CardItem item = cardItems.get(position);

        if (holder instanceof ImageTitleViewHolder) {
            // Bind data for image + title card
            ImageTitleViewHolder imageTitleHolder = (ImageTitleViewHolder) holder;
            imageTitleHolder.itemTitle.setText(item.getTitle());
            imageTitleHolder.itemImage.setImageResource(item.getImageResId());
            //Load image using Glide/Picasso or set drawable directly

        } else if (holder instanceof TradingChartViewHolder) {
            TradingChartViewHolder chartHolder = (TradingChartViewHolder) holder;

            // Load trading chart data into the WebView
            String chartUrl = "https://mytradingbot.com.au/apicallback/getRSIGaugeChart?data=ANZ.AX";
            chartHolder.tradingChartWebView.loadUrl(chartUrl);

        }
    }

    @Override
    public int getItemCount() {
        return cardItems.size();
    }

    // Custom view holder for image + title card
    static class ImageTitleViewHolder extends RecyclerView.ViewHolder {
        ImageView itemImage;
        TextView itemTitle;

        ImageTitleViewHolder(View itemView) {
            super(itemView);
            itemImage = itemView.findViewById(R.id.itemImage);
            itemTitle = itemView.findViewById(R.id.itemTitle);
        }
    }

    // Custom view holder for trading chart card
    static class TradingChartViewHolder extends RecyclerView.ViewHolder {
        WebView tradingChartWebView;

        @SuppressLint("SetJavaScriptEnabled")
        TradingChartViewHolder(View itemView) {
            super(itemView);
            tradingChartWebView = itemView.findViewById(R.id.tradingChartWebView);
            tradingChartWebView.getSettings().setJavaScriptEnabled(true);
        }
    }

}

when I run my android app, the webView only shows the JSON Data. See attached screen shot. I can understand why, cos in webView, i need to call

Plotly.newPlot('chart', chartJson, {});

Can anyone advise me? doesn’t have to do it in webView, i just want to display the trading char.