Help in custom web view

[Md_Mamun]

I am using custom web view to display a html code but it is not working properly. This is the code

Responsive Sensor Data Graphs body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .graph-container { width: 100%; max-width: 350px; margin-bottom: 20px; } .graph-label { text-align: center; margin-top: -20px; }

Sensor Data

<div class="graph-container">
    <canvas id="tempGraph"></canvas>
    <div class="graph-label">Temperature (°C)</div>
</div>

<div class="graph-container">
    <canvas id="humidityGraph"></canvas>
    <div class="graph-label">Humidity (%)</div>
</div>

<div class="graph-container">
    <canvas id="magGraph"></canvas>
    <div class="graph-label">Magnetic Field Strength (μT)</div>
</div>

<script>
    // Dummy data based on Kolkata
    const dummyData = {
        temperature: 30,
        humidity: 70,
        magX: 25,
        magY: 30,
        magZ: 28
    };

    function fetchData() {
        fetch('http://192.168.4.1/sensor')
            .then(response => response.text())
            .then(data => {
                // Assuming the format is like: 25°C,70%,25,30,28
                const values = data.split(',');
                updateGraphs({
                    temperature: parseFloat(values[0]),
                    humidity: parseFloat(values[1]),
                    magX: parseFloat(values[2]),
                    magY: parseFloat(values[3]),
                    magZ: parseFloat(values[4])
                });
            })
            .catch(() => {
                // If fetching fails, show dummy data
                updateGraphs(dummyData);
            });
    }

    function updateGraphs(data) {
        drawGraph('tempGraph', data.temperature, 'Temperature', '°C');
        drawGraph('humidityGraph', data.humidity, 'Humidity', '%');
        drawMagneticGraph('magGraph', data.magX, data.magY, data.magZ);
    }

    function drawGraph(id, value, label, unit) {
        const canvas = document.getElementById(id);
        const ctx = canvas.getContext('2d');
        const width = canvas.width = 250;
        const height = canvas.height = 150;

        const colors = ['#e74c3c', '#e67e22', '#f1c40f', '#2ecc71', '#3498db'];
        const gradient = ctx.createLinearGradient(0, 0, width, height);
        colors.forEach((color, i) => {
            gradient.addColorStop(i * 0.25, color);
        });

        ctx.clearRect(0, 0, width, height);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);

        ctx.fillStyle = '#000';
        ctx.font = '16px Arial';
        ctx.fillText(`${label}: ${value}${unit}`, 10, 30);
    }

    function drawMagneticGraph(id, x, y, z) {
        const canvas = document.getElementById(id);
        const ctx = canvas.getContext('2d');
        const width = canvas.width = 250;
        const height = canvas.height = 150;

        const colors = ['#e74c3c', '#e67e22', '#f1c40f', '#2ecc71', '#3498db'];
        const gradient = ctx.createLinearGradient(0, 0, width, height);
        colors.forEach((color, i) => {
            gradient.addColorStop(i * 0.25, color);
        });

        ctx.clearRect(0, 0, width, height);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);

        ctx.fillStyle = '#000';
        ctx.font = '14px Arial';
        ctx.fillText(`Mag X: ${x}μT`, 10, 30);
        ctx.fillText(`Mag Y: ${y}μT`, 10, 50);
        ctx.fillText(`Mag Z: ${z}μT`, 10, 70);
    }

    setInterval(fetchData, 5000);  // Update every 5 seconds
</script>

[HarshVardhanSolanki]

Do you want to fetch this data from website or you are trying to modify the Extension?