ทำเสร็จปรากฏว่า กราฟไม่อ่าน
สาเหตุที่กราฟไม่อ่าน (ไม่แสดงผล) หลังจากเปลี่ยนเป็นระบบ In-Memory เกิดจากลำดับการทำงาน (Timing) ของโค้ดครับ

เมื่อก่อนตอนใช้ Local Storage ข้อมูลจะถูกโหลดขึ้นมาทันทีที่เปิดเว็บ กราฟจึงวาดได้เลย แต่ตอนนี้ dataList เริ่มต้นด้วยค่าว่าง [] กราฟเลยไม่มีข้อมูลให้วาดในตอนแรก และเมื่อคุณอัปโหลดไฟล์เข้ามา ฟังก์ชันอัปโหลดอาจจะยังไม่ได้สั่งให้กราฟ “วาดใหม่” ครับ

🛠️ วิธีแก้ไขให้กราฟกลับมาทำงาน

คุณต้องสั่งให้กราฟอัปเดตทุกครั้งที่มีการเปลี่ยนแปลงข้อมูล โดยไปเพิ่มฟังก์ชัน updateAllCharts() (หรือชื่อฟังก์ชันวาดกราฟของคุณ) ใน 2 จุดหลักดังนี้ครับ:

1. ในฟังก์ชันอัปโหลดไฟล์ (สำคัญที่สุด)

เมื่อคุณเลือกไฟล์ JSON และข้อมูลเข้า RAM แล้ว ต้องสั่งให้กราฟทำงานทันที:

JavaScript

// ในจุดที่คุณกดยืนยันการอัปโหลดไฟล์ JSON
function handleJSONImport(importedData) {
    dataList = importedData;
    
    renderDataToTable();      // วาดตาราง
    updateDataSizeMonitor();  // อัปเดตขนาด RAM
    
    // ⭐️ เพิ่มบรรทัดนี้เพื่อให้กราฟวาดใหม่ตามข้อมูลที่เพิ่งโหลด
    if (typeof updateAllCharts === 'function') {
        updateAllCharts();
    }
}

2. ในฟังก์ชัน renderDataToTable (เพื่อให้กราฟขยับตามการแก้ไข)

เพื่อให้เวลาคุณ เพิ่ม/ลบ ข้อมูลแล้วกราฟเปลี่ยนตามทันที ให้เอาไปใส่ไว้ท้ายฟังก์ชันนี้ครับ:

JavaScript

function renderDataToTable() {
    // ... โค้ดวาดตารางของคุณ ...
    
    updateDataSizeMonitor(); 
    
    // ⭐️ เพิ่มตรงนี้ด้วย กราฟจะได้ Real-time พร้อมปุ่มสีทอง
    if (typeof updateAllCharts === 'function') {
        updateAllCharts();
    }
}

🔍 จุดที่ต้องเช็คเพิ่มเติม

ถ้าทำตามด้านบนแล้วกราฟยังไม่ขึ้น ให้ลองตรวจสอบเรื่อง “ปีที่เลือก (Year Filter)” ครับ:

• ปัญหา: ระบบใหม่เริ่มมาแบบว่างเปล่า ตัวกรองปีอาจจะยังไม่ได้ถูกเลือก (เป็นค่าว่าง) กราฟเลยไม่รู้จะเอาข้อมูลปีไหนมาแสดง
• วิธีแก้: ในฟังก์ชันที่โหลดไฟล์ JSON เสร็จ ให้สั่งให้ระบบเลือกปีปัจจุบัน หรือปีที่มีอยู่ในข้อมูลโดยอัตโนมัติด้วยครับ

💡 ทริคทดสอบ

ลองกด F12 ดูที่แท็บ Console ครับ ถ้ามีตัวหนังสือสีแดงแจ้งว่า updateAllCharts is not defined หรือ Error อื่นๆ เกี่ยวกับกราฟ ก๊อปปี้ข้อความนั้นมาบอกผมได้เลยครับ ผมจะช่วยดูว่าฟังก์ชันกราฟของคุณชื่ออะไรและต้องเรียกอย่างไรครับ

ตอนนี้ลองไปเติม updateAllCharts() ในฟังก์ชันอัปโหลดดูก่อนนะครับ กราฟน่าจะกลับมาเด้งทันทีที่โหลดไฟล์เสร็จครับ!

แก้

function loadFromJSONFile(file) {
const reader = new FileReader();
reader.onload = (e) => {
try {
const data = JSON.parse(e.target.result);
if (!Array.isArray(data)) {
alert(“รูปแบบไฟล์ JSON ไม่ถูกต้อง”);
return;
}

        // 1. อัปเดตตัวแปรหลัก dataList ใน RAM (In-Memory)
        dataList = data.filter(d => d && typeof d === 'object' && d.date);

        // ❌ 2. ลบ/ปิดการบันทึกลง Local Storage (เพื่อไม่ให้โดนจำกัด 5MB)
        // localStorage.setItem(STORAGE_KEY, JSON.stringify(dataList));

        // 3. ดึงปีล่าสุดมาแสดงผล
        const latestYear = dataList.length > 0 
            ? dataList[0].date.substring(0, 4) 
            : new Date().getFullYear().toString();

        document.getElementById('yearFilterInput').value = latestYear;

        // 4. อัปเดตตารางและขนาด RAM Monitor
        renderDataToTable(dataList, latestYear);
        if (typeof updateDataSizeMonitor === 'function') updateDataSizeMonitor();

        // ⭐️ 5. สั่งวาดกราฟใหม่ทันที (แก้ปัญหาหน้าว่าง)
        if (typeof updateAllCharts === 'function') {
            updateAllCharts();
        }

        // ⭐️ 6. อัปเดตสถานะปุ่ม Backup ให้เป็นสีเขียว (เพราะข้อมูลใน RAM ตรงกับไฟล์ที่เพิ่งโหลด)
        // เราใช้ "วันที่วันนี้" หลอกระบบว่าเพิ่ง Backup ไปสดๆ ร้อนๆ
        const today = new Date().toLocaleDateString();
        localStorage.setItem('V79_DONE_TODAY', today); 
        if (typeof updateBackupStatus === 'function') updateBackupStatus();

        alert(`✅ โหลดข้อมูล ${dataList.length} แถวเรียบร้อยแล้ว! (In-Memory Mode Enabled)`);

        if (dataList.length > 0) {
            document.getElementById('btnSwitchTab').removeAttribute('disabled');
        }

    } catch (err) {
        console.error("JSON Parse Error:", err);
        alert("❌ ไม่สามารถโหลดไฟล์ได้: ไฟล์อาจเสียหายหรือรูปแบบไม่ถูกต้อง");
    }
};
reader.readAsText(file, 'UTF-8');

}