const ctx = document.getElementById('stockChart').getContext('2d');
const volumeCtx = document.getElementById('volumeChart').getContext('2d');
const pvCtx = document.getElementById('pvChart').getContext('2d');
const mfiCtx = document.getElementById('mfiChart').getContext('2d');

function renderPriceVolumeChart(priceData, volumeData) {
    const priceChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: priceData.labels,
            datasets: [{
                label: 'Price',
                data: priceData.values,
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 2,
                fill: false
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: false
                }
            }
        }
    });

    const volumeChart = new Chart(volumeCtx, {
        type: 'bar',
        data: {
            labels: volumeData.labels,
            datasets: [{
                label: 'Volume',
                data: volumeData.values,
                backgroundColor: 'rgba(153, 102, 255, 0.5)',
                borderColor: 'rgba(153, 102, 255, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}
function renderPVChart(pvData) {
    const pvChart = new Chart(pvCtx, {
        type: 'line',
        data: {
            labels: pvData.labels,
            datasets: [{
                label: 'Price Volume (PV)',
                data: pvData.values,
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2,
                fill: false
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: false
                }
            }
        }
    });

    // Add horizontal line at y=0
    pvChart.config.data.datasets.push({
        type: 'line',
        data: [{x: pvData.labels[0], y: 0}, {x: pvData.labels[pvData.labels.length - 1], y: 0}],
        borderColor: 'rgba(0, 0, 0, 0.5)',
        borderWidth: 1,
        label: 'Neutral Line',
        pointRadius: 0,
        fill: false
    });
}

function renderMFIChart(mfiData) {
    const mfiChart = new Chart(mfiCtx, {
        type: 'line',
        data: {
            labels: mfiData.labels,
            datasets: [{
                label: 'Money Flow Index (MFI)',
                data: mfiData.values,
                borderColor: 'rgba(255, 206, 86, 1)',
                borderWidth: 2,
                fill: false
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });

    // Add horizontal line at y=50
    mfiChart.config.data.datasets.push({
        type: 'line',
        data: [{x: mfiData.labels[0], y: 50}, {x: mfiData.labels[mfiData.labels.length - 1], y: 50}],
        borderColor: 'rgba(0, 0, 0, 0.5)',
        borderWidth: 1,
        label: 'Neutral Line',
        pointRadius: 0,
        fill: false
    });
}

function updateCharts(priceData, volumeData, pvData, mfiData) {
    renderPriceVolumeChart(priceData, volumeData);
    renderPVChart(pvData);
    renderMFIChart(mfiData);
}

// Example usage: Call updateCharts with your data
// updateCharts(priceData, volumeData, pvData, mfiData);