Add stacked chart with topic ratios and subject filtering

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

database.py

@@ -395,6 +395,30 @@ def setup_database():
     except sqlite3.OperationalError:
         cursor.execute("ALTER TABLE users ADD COLUMN pdf_viewer TEXT DEFAULT 'adobe'")
 
+    # Migration to normalize subject names (e.g., "CHEMISTRY" to "Chemistry", "PHYSICS" to "Physics", etc.)
+    try:
+        # Define subject mappings
+        subject_mappings = {
+            'CHEMISTRY': 'Chemistry',
+            'PHYSICS': 'Physics', 
+            'BIOLOGY': 'Biology',
+            'MATHEMATICS': 'Mathematics',
+            'ZOOLOGY': 'Zoology',
+            'BOTANY': 'Botany'
+        }
+        
+        for old_subject, new_subject in subject_mappings.items():
+            # Check if there are any questions with the old subject name
+            cursor.execute("SELECT COUNT(*) FROM questions WHERE subject = ?", (old_subject,))
+            count = cursor.fetchone()[0]
+            
+            if count > 0:
+                # Update all old subject names to new standardized names
+                cursor.execute("UPDATE questions SET subject = ? WHERE subject = ?", (new_subject, old_subject))
+                print(f"Updated {cursor.rowcount} questions from '{old_subject}' to '{new_subject}'")
+    except Exception as e:
+        print(f"Error during subject normalization migration: {e}")
+
     conn.commit()
     conn.close()
 

routes/general.py

@@ -99,4 +99,301 @@ def chart():
     total_questions = conn.execute("SELECT COUNT(q.id) FROM questions q JOIN sessions s ON q.session_id = s.id WHERE s.user_id = ?", (current_user.id,)).fetchone()[0]
     total_classified = conn.execute("SELECT COUNT(q.id) FROM questions q JOIN sessions s ON q.session_id = s.id WHERE s.user_id = ? AND q.subject IS NOT NULL AND q.chapter IS NOT NULL", (current_user.id,)).fetchone()[0]
     conn.close()
-    return render_template('chart.html', total_sessions=total_sessions, total_pdfs=total_pdfs, total_questions=total_questions, total_classified_questions=total_classified)
+    return render_template('chart.html', total_sessions=total_sessions, total_pdfs=total_pdfs, total_questions=total_questions, total_classified_questions=total_classified)
+
+
+@main_bp.route('/stacked_chart')
+@login_required
+def stacked_chart():
+    conn = get_db_connection()
+    
+    # Get classified questions grouped by session_id, subject, and topic (chapter)
+    # Filter for only specific subjects (P, C, B, Z, M) as requested
+    # Also normalize subject names to ensure consistency
+    classified_data = conn.execute("""
+        SELECT s.id as session_id, s.name as session_name, 
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END as subject,
+               q.chapter, COUNT(*) as question_count
+        FROM questions q
+        JOIN sessions s ON q.session_id = s.id
+        WHERE s.user_id = ? 
+          AND q.subject IS NOT NULL 
+          AND q.chapter IS NOT NULL
+          AND UPPER(SUBSTR(TRIM(
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END
+          ), 1, 1)) IN ('P', 'C', 'B', 'Z', 'M')
+        GROUP BY s.id, s.name, 
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END,
+               q.chapter
+        ORDER BY s.created_at DESC, s.id, 
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END,
+               q.chapter
+    """, (current_user.id,)).fetchall()
+    
+    # Group the data by session_id for the chart
+    sessions_data = {}
+    for row in classified_data:
+        session_id = row['session_id']
+        session_name = row['session_name'] or session_id  # Use session_id if name is None
+        subject = row['subject']
+        topic = row['chapter']
+        count = row['question_count']
+        
+        if session_id not in sessions_data:
+            sessions_data[session_id] = {
+                'session_name': session_name,
+                'subjects': {}
+            }
+        
+        if subject not in sessions_data[session_id]['subjects']:
+            sessions_data[session_id]['subjects'][subject] = {}
+        
+        sessions_data[session_id]['subjects'][subject][topic] = count
+    
+    conn.close()
+    
+    return render_template('stacked_chart.html', sessions_data=sessions_data)
+
+
+@main_bp.route('/api/stacked_chart_data')
+@login_required
+def api_stacked_chart_data():
+    conn = get_db_connection()
+    
+    # Get classified questions grouped by session_id, subject, and topic (chapter)
+    # Filter for only specific subjects (P, C, B, Z, M) as requested
+    # Also normalize subject names to ensure consistency
+    classified_data = conn.execute("""
+        SELECT s.id as session_id, s.name as session_name, s.original_filename,
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END as subject,
+               q.chapter, COUNT(*) as question_count
+        FROM questions q
+        JOIN sessions s ON q.session_id = s.id
+        WHERE s.user_id = ? 
+          AND q.subject IS NOT NULL 
+          AND q.chapter IS NOT NULL
+          AND UPPER(SUBSTR(TRIM(
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END
+          ), 1, 1)) IN ('P', 'C', 'B', 'Z', 'M')
+        GROUP BY s.id, s.name, s.original_filename,
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END,
+               q.chapter
+        ORDER BY s.created_at DESC, s.id, 
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END,
+               q.chapter
+    """, (current_user.id,)).fetchall()
+    
+    # Get topic occurrence statistics - total occurrences and number of sessions for each topic
+    topic_stats = conn.execute("""
+        SELECT 
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END as subject,
+               q.chapter,
+               COUNT(*) as total_occurrences,
+               COUNT(DISTINCT q.session_id) as total_sessions_with_topic
+        FROM questions q
+        JOIN sessions s ON q.session_id = s.id
+        WHERE s.user_id = ? 
+          AND q.subject IS NOT NULL 
+          AND q.chapter IS NOT NULL
+          AND UPPER(SUBSTR(TRIM(
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END
+          ), 1, 1)) IN ('P', 'C', 'B', 'Z', 'M')
+        GROUP BY 
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END,
+               q.chapter
+    """, (current_user.id,)).fetchall()
+    
+    # Get wrong ratios for topics - aggregated by topic across all sessions
+    wrong_ratios = conn.execute("""
+        SELECT 
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END as subject,
+               q.chapter,
+               SUM(CASE WHEN q.status = 'wrong' THEN 1 ELSE 0 END) as total_wrongs,
+               COUNT(DISTINCT q.session_id) as total_sessions_with_wrongs
+        FROM questions q
+        JOIN sessions s ON q.session_id = s.id
+        WHERE s.user_id = ? 
+          AND q.subject IS NOT NULL 
+          AND q.chapter IS NOT NULL
+          AND UPPER(SUBSTR(TRIM(
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END
+          ), 1, 1)) IN ('P', 'C', 'B', 'Z', 'M')
+        GROUP BY 
+               CASE 
+                 WHEN q.subject = 'CHEMISTRY' THEN 'Chemistry'
+                 WHEN q.subject = 'PHYSICS' THEN 'Physics'
+                 WHEN q.subject = 'BIOLOGY' THEN 'Biology'
+                 WHEN q.subject = 'MATHEMATICS' THEN 'Mathematics'
+                 WHEN q.subject = 'ZOOLOGY' THEN 'Zoology'
+                 WHEN q.subject = 'BOTANY' THEN 'Botany'
+                 ELSE q.subject
+               END,
+               q.chapter
+    """, (current_user.id,)).fetchall()
+    
+    # Group the data by session_id for the chart
+    sessions_data = {}
+    for row in classified_data:
+        session_id = row['session_id']
+        session_name = row['session_name'] or session_id  # Use session_id if name is None
+        
+        # Use original_filename if session_name is the same as session_id
+        if session_name == session_id and row['original_filename']:
+            session_name = row['original_filename']
+        
+        subject = row['subject']
+        topic = row['chapter']
+        count = row['question_count']
+        
+        if session_id not in sessions_data:
+            sessions_data[session_id] = {
+                'session_name': session_name,
+                'subjects': {}
+            }
+        
+        if subject not in sessions_data[session_id]['subjects']:
+            sessions_data[session_id]['subjects'][subject] = {}
+        
+        sessions_data[session_id]['subjects'][subject][topic] = count
+    
+    # Create mapping for topic stats (total occurrences and number of sessions with topic)
+    topic_stats_map = {}
+    for row in topic_stats:
+        subject = row['subject']
+        topic = row['chapter']
+        total_occurrences = row['total_occurrences']
+        total_sessions_with_topic = row['total_sessions_with_topic']
+        
+        topic_stats_map[f"{subject}|{topic}"] = {
+            'total_occurrences': total_occurrences,
+            'total_sessions_with_topic': total_sessions_with_topic
+        }
+    
+    # Add topic occurrence ratios to the data for each session
+    for session_id in sessions_data:
+        for subject in sessions_data[session_id]['subjects']:
+            for topic in sessions_data[session_id]['subjects'][subject]:
+                # Store topic occurrence ratio data
+                if 'wrong_ratios' not in sessions_data[session_id]:
+                    sessions_data[session_id]['wrong_ratios'] = {}
+                if subject not in sessions_data[session_id]['wrong_ratios']:
+                    sessions_data[session_id]['wrong_ratios'][subject] = {}
+                
+                key = f"{subject}|{topic}"
+                
+                # Get topic stats (total occurrences and number of sessions with topic)
+                topic_stat = topic_stats_map.get(key, {'total_occurrences': 0, 'total_sessions_with_topic': 0})
+                
+                # Store topic occurrence ratio: total occurrences / number of sessions with topic
+                sessions_data[session_id]['wrong_ratios'][subject][topic] = {
+                    'total_occurrences': topic_stat['total_occurrences'],
+                    'total_sessions_with_topic': topic_stat['total_sessions_with_topic']
+                }
+    
+    conn.close()
+    
+    return jsonify(sessions_data)

templates/_nav_links.html

@@ -12,6 +12,9 @@
         <a class="nav-link" href="/chart">
             <i class="bi bi-bar-chart-line me-1"></i> Charts
         </a>
+        <a class="nav-link" href="/stacked_chart">
+            <i class="bi bi-bar-chart-steps me-1"></i> Stacked Chart
+        </a>
         <a class="nav-link" href="{{ url_for('subjective.list_questions') }}">
             <i class="bi bi-magic me-1"></i> Subjective Gen
         </a>

templates/stacked_chart.html

@@ -0,0 +1,509 @@
+{% extends "base.html" %}
+
+{% block title %}Stacked Chart - Classified Questions{% endblock %}
+
+{% block content %}
+<div class="container mt-5">
+    <div class="card bg-dark text-white">
+        <div class="card-header text-center">
+            <h1 class="h3 mb-0">Classified Questions Stacked Chart</h1>
+            <p class="mb-0">Session -> Subjects -> Topics</p>
+        </div>
+        <div class="card-body">
+            <div class="row">
+                <div class="col-12">
+                    <div class="d-flex flex-wrap justify-content-center mb-3" id="mainChartSubjectCheckboxes">
+                        <!-- Main chart subject checkboxes will be populated by JavaScript -->
+                    </div>
+                    <div class="col-12" style="overflow-x: auto;">
+                        <div id="chartWrapper" style="min-width: 800px; height: 450px;">
+                            <canvas id="stackedChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row mt-4">
+                <div class="col-12">
+                    <h4 class="text-center">Topic-wise Aggregate</h4>
+                    <div class="d-flex flex-wrap justify-content-center mb-3" id="subjectCheckboxes">
+                        <!-- Subject checkboxes will be populated by JavaScript -->
+                    </div>
+                    <div class="d-flex justify-content-center mb-3">
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="sortByWrongRatio">
+                            <label class="form-check-label" for="sortByWrongRatio">Sort by Wrong Ratio</label>
+                        </div>
+                    </div>
+                    <div class="row mb-3">
+                        <div class="col-md-6">
+                            <div class="card bg-secondary text-white text-center p-3">
+                                <h5>Total Questions</h5>
+                                <p class="fs-2 fw-bold" id="totalQuestionsCount">0</p>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="card bg-warning text-dark text-center p-3">
+                                <h5>Tests with Wrongings</h5>
+                                <p class="fs-2 fw-bold" id="wrongingsCount">0</p>
+                            </div>
+                        </div>
+                    </div>
+                    <canvas id="topicChart" width="400" height="300"></canvas>
+                </div>
+            </div>
+
+            <div class="row mt-4">
+                <div class="col-12">
+                    <div class="table-responsive">
+                        <table class="table table-dark table-striped">
+                            <thead>
+                                <tr>
+                                    <th>Session ID</th>
+                                    <th>Session Name</th>
+                                    <th>Subject</th>
+                                    <th>Topic</th>
+                                    <th>Question Count</th>
+                                    <th>Wrong Ratio</th>
+                                </tr>
+                            </thead>
+                            <tbody id="dataTableBody">
+                                <!-- Data will be populated by JavaScript -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+// Global variables to store chart instances and data
+let stackedChartInstance = null;
+let topicChartInstance = null;
+let originalData = null;
+let selectedSubjects = new Set(); // Track selected subjects
+
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('/api/stacked_chart_data')
+        .then(response => response.json())
+        .then(data => {
+            originalData = data;
+            
+            // Extract all unique subjects from the data
+            const allSubjects = new Set();
+            Object.keys(data).forEach(sessionId => {
+                Object.keys(data[sessionId].subjects).forEach(subject => {
+                    allSubjects.add(subject);
+                });
+            });
+            
+            // Create checkboxes for each subject for both charts
+            createSubjectCheckboxes(Array.from(allSubjects));
+            createMainChartSubjectCheckboxes(Array.from(allSubjects)); // For the main chart
+            
+            // Initialize with all subjects selected
+            allSubjects.forEach(subject => selectedSubjects.add(subject));
+            
+            createStackedChart(data);
+            createTopicChart(data);
+            updateAdditionalData(data);
+            populateDataTable(data);
+            
+            // Add event listener for the sort by wrong ratio checkbox
+            document.getElementById('sortByWrongRatio').addEventListener('change', function() {
+                sortByWrongRatio = this.checked;
+                createTopicChart(data);
+            });
+        })
+        .catch(error => console.error('Error fetching chart data:', error));
+});
+
+function createSubjectCheckboxes(subjects) {
+    const container = document.getElementById('subjectCheckboxes');
+    container.innerHTML = ''; // Clear existing checkboxes
+    
+    subjects.forEach(subject => {
+        const div = document.createElement('div');
+        div.className = 'form-check mx-2';
+        
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.className = 'form-check-input';
+        input.id = `subject-${subject}`;
+        input.value = subject;
+        input.checked = true; // Initially all are checked
+        input.dataset.subject = subject;
+        
+        input.addEventListener('change', function() {
+            if (this.checked) {
+                selectedSubjects.add(subject);
+            } else {
+                selectedSubjects.delete(subject);
+            }
+            
+            // Apply the filter to both charts
+            applySubjectFilter();
+        });
+        
+        const label = document.createElement('label');
+        label.className = 'form-check-label';
+        label.htmlFor = `subject-${subject}`;
+        label.textContent = subject;
+        
+        div.appendChild(input);
+        div.appendChild(label);
+        container.appendChild(div);
+    });
+}
+
+function createMainChartSubjectCheckboxes(subjects) {
+    const container = document.getElementById('mainChartSubjectCheckboxes');
+    container.innerHTML = ''; // Clear existing checkboxes
+    
+    // Only show checkboxes for P, C, B, Z, M subjects
+    const pcbzmSubjects = subjects.filter(subject => {
+        const firstLetter = subject.charAt(0).toUpperCase();
+        return ['P', 'C', 'B', 'Z', 'M'].includes(firstLetter);
+    });
+    
+    pcbzmSubjects.forEach(subject => {
+        const div = document.createElement('div');
+        div.className = 'form-check form-check-inline mx-2';
+        
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.className = 'form-check-input';
+        input.id = `main-subject-${subject}`;
+        input.value = subject;
+        input.checked = true; // Initially all are checked
+        input.dataset.subject = subject;
+        
+        input.addEventListener('change', function() {
+            if (this.checked) {
+                selectedSubjects.add(subject);
+            } else {
+                selectedSubjects.delete(subject);
+            }
+            
+            // Apply the filter to both charts
+            applySubjectFilter();
+        });
+        
+        const label = document.createElement('label');
+        label.className = 'form-check-label';
+        label.htmlFor = `main-subject-${subject}`;
+        // Use only the first letter as label
+        label.textContent = subject.charAt(0).toUpperCase();
+        
+        div.appendChild(input);
+        div.appendChild(label);
+        container.appendChild(div);
+    });
+}
+
+function updateAdditionalData(data) {
+    // Calculate total number of questions
+    let totalQuestions = 0;
+    let sessionsWithWrongings = new Set(); // Track sessions that have wrongings
+    
+    Object.keys(data).forEach(sessionId => {
+        Object.keys(data[sessionId].subjects).forEach(subject => {
+            Object.keys(data[sessionId].subjects[subject]).forEach(topic => {
+                totalQuestions += data[sessionId].subjects[subject][topic];
+                
+                // For now, assuming all questions count toward wrongings
+                // In a real implementation, you would check for actual wrongings
+                sessionsWithWrongings.add(sessionId);
+            });
+        });
+    });
+    
+    // Update the displayed counts
+    document.getElementById('totalQuestionsCount').textContent = totalQuestions;
+    document.getElementById('wrongingsCount').textContent = sessionsWithWrongings.size;
+}
+
+function applySubjectFilter() {
+    if (selectedSubjects.size === 0) {
+        // If no subjects are selected, show empty data
+        createStackedChart({});
+        createTopicChart({});
+        updateAdditionalData({});
+        return;
+    }
+    
+    // Filter data based on selected subjects
+    const filteredData = {};
+    Object.keys(originalData).forEach(sessionId => {
+        filteredData[sessionId] = {
+            session_name: originalData[sessionId].session_name,
+            subjects: {},
+            wrong_ratios: originalData[sessionId].wrong_ratios // Keep the original wrong_ratios data
+        };
+        
+        Object.keys(originalData[sessionId].subjects).forEach(subject => {
+            if (selectedSubjects.has(subject)) {
+                filteredData[sessionId].subjects[subject] = originalData[sessionId].subjects[subject];
+            }
+        });
+    });
+    
+    createStackedChart(filteredData);
+    createTopicChart(filteredData);
+    updateAdditionalData(filteredData);
+}
+
+function createStackedChart(data) {
+    const ctx = document.getElementById('stackedChart').getContext('2d');
+    const sessionIds = Object.keys(data);
+    const sessionNames = sessionIds.map(id => data[id].session_name || id);
+
+    // Collect all unique subject-topic combinations
+    const datasetMap = {}; // key: "subject|topic", value: {subject, topic, counts[], wrong_ratios[]}
+
+    sessionIds.forEach((sessionId, sessionIndex) => {
+        const sessionData = data[sessionId];
+        Object.keys(sessionData.subjects).forEach(subject => {
+            Object.keys(sessionData.subjects[subject]).forEach(topic => {
+                const key = `${subject}|${topic}`;
+                if (!datasetMap[key]) {
+                    datasetMap[key] = {
+                        subject: subject,
+                        topic: topic,
+                        counts: new Array(sessionIds.length).fill(0),
+                        wrong_ratios: new Array(sessionIds.length).fill(null)
+                    };
+                }
+                datasetMap[key].counts[sessionIndex] = sessionData.subjects[subject][topic];
+                
+                // Get topic occurrence ratio for this topic (total occurrences / number of sessions with topic)
+                if (sessionData.wrong_ratios && 
+                    sessionData.wrong_ratios[subject] && 
+                    sessionData.wrong_ratios[subject][topic]) {
+                    const topicData = sessionData.wrong_ratios[subject][topic];
+                    datasetMap[key].wrong_ratios[sessionIndex] = `${topicData.total_occurrences}/${topicData.total_sessions_with_topic}`;
+                } else {
+                    datasetMap[key].wrong_ratios[sessionIndex] = '0/0';
+                }
+            });
+        });
+    });
+
+    const datasets = Object.values(datasetMap).map(item => ({
+        label: `${item.subject} - ${item.topic}`,
+        backgroundColor: getRandomColor(),
+        data: item.counts,
+        stack: item.subject,  // Each subject gets its own stacked bar
+        // Store wrong ratios for tooltip
+        wrong_ratios: item.wrong_ratios
+    }));
+
+    // Dynamically set the min-width based on session count
+    const chartWrapper = document.getElementById('chartWrapper');
+    chartWrapper.style.minWidth = Math.max(800, sessionIds.length * 200) + 'px';
+
+    // Destroy previous chart instance if exists
+    if (stackedChartInstance) {
+        stackedChartInstance.destroy();
+    }
+    
+    stackedChartInstance = new Chart(ctx, {
+        type: 'bar',
+        data: { labels: sessionNames, datasets: datasets },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                title: { display: true, text: 'Questions by Session → Subject → Topic' },
+                legend: { display: true, position: 'right', labels: { boxWidth: 12, font: { size: 10 } } },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const label = context.dataset.label || '';
+                            const value = context.parsed.y;
+                            const wrongRatio = context.dataset.wrong_ratios[context.dataIndex] || '0/0';
+                            
+                            return `${label}: ${value} questions (Wrong: ${wrongRatio})`;
+                        }
+                    }
+                }
+            },
+            scales: {
+                x: { stacked: true, title: { display: true, text: 'Sessions' } },
+                y: { stacked: true, title: { display: true, text: 'Question Count' } }
+            }
+        }
+    });
+}
+
+function createTopicChart(data) {
+    const topicCounts = {};
+    const topicWrongRatios = {}; // Store wrong ratios for each topic
+    
+    Object.keys(data).forEach(sessionId => {
+        const subjects = data[sessionId].subjects;
+        Object.keys(subjects).forEach(subject => {
+            Object.keys(subjects[subject]).forEach(topic => {
+                const key = `${subject} - ${topic}`;
+                topicCounts[key] = (topicCounts[key] || 0) + subjects[subject][topic];
+                
+                // Store topic occurrence ratio for this topic (total occurrences / number of sessions with topic)
+                if (data[sessionId].wrong_ratios && 
+                    data[sessionId].wrong_ratios[subject] && 
+                    data[sessionId].wrong_ratios[subject][topic]) {
+                    const topicData = data[sessionId].wrong_ratios[subject][topic];
+                    topicWrongRatios[key] = `${topicData.total_occurrences}/${topicData.total_sessions_with_topic}`;
+                } else if (!topicWrongRatios[key]) {
+                    // Initialize with default if not set
+                    topicWrongRatios[key] = '0/0';
+                }
+            });
+        });
+    });
+
+    // Convert to array and sort by count (highest first)
+    const sortedEntries = Object.entries(topicCounts).sort((a, b) => b[1] - a[1]);
+    const labels = sortedEntries.map(entry => entry[0]);
+    const counts = sortedEntries.map(entry => entry[1]);
+    const colors = labels.map(() => getRandomColor());
+    
+    // Get wrong ratios in the same order as labels
+    const wrongRatios = labels.map(label => topicWrongRatios[label] || '0/0');
+
+    const ctx = document.getElementById('topicChart').getContext('2d');
+    
+    // Destroy previous chart instance if exists
+    if (topicChartInstance) {
+        topicChartInstance.destroy();
+    }
+    
+    topicChartInstance = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: 'Total Questions',
+                data: counts,
+                backgroundColor: colors,
+                // Store wrong ratios for tooltip
+                wrong_ratios: wrongRatios
+            }]
+        },
+        options: {
+            indexAxis: 'y',
+            responsive: true,
+            plugins: {
+                legend: { display: false },
+                title: { display: true, text: 'Topic-wise Question Distribution' },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const label = context.dataset.label || '';
+                            const value = context.parsed.x;
+                            const wrongRatio = context.dataset.wrong_ratios[context.dataIndex] || '0/0';
+                            
+                            return `${label}: ${value} questions (Wrong: ${wrongRatio})`;
+                        }
+                    }
+                }
+            },
+            scales: { x: { title: { display: true, text: 'Count' } } }
+        }
+    });
+}
+
+function populateDataTable(data) {
+    const tableBody = document.getElementById('dataTableBody');
+    tableBody.innerHTML = ''; // Clear existing data
+
+    const sessionIds = Object.keys(data);
+
+    sessionIds.forEach(sessionId => {
+        const sessionData = data[sessionId];
+        const subjects = Object.keys(sessionData.subjects);
+
+        // Calculate total number of topic rows across all subjects in this session
+        let totalTopicsCount = 0;
+        subjects.forEach(subject => {
+            const topics = Object.keys(sessionData.subjects[subject]);
+            totalTopicsCount += topics.length;
+        });
+
+        let isFirstRowOfSession = true; // Flag to determine if this is the first row of the session
+
+        subjects.forEach(subject => {
+            const topics = Object.keys(sessionData.subjects[subject]);
+
+            topics.forEach((topic, index) => {
+                const row = document.createElement('tr');
+
+                // Add session ID and session name only on the very first row of each session
+                if (isFirstRowOfSession) {
+                    // Session ID cell - spans across all topic rows in the session
+                    const sessionIdCell = document.createElement('td');
+                    sessionIdCell.rowSpan = totalTopicsCount;
+                    sessionIdCell.textContent = sessionId;
+                    row.appendChild(sessionIdCell);
+
+                    // Session name cell - spans across all topic rows in the session
+                    const sessionNameCell = document.createElement('td');
+                    sessionNameCell.rowSpan = totalTopicsCount;
+                    sessionNameCell.textContent = sessionData.session_name || sessionId;
+                    row.appendChild(sessionNameCell);
+
+                    isFirstRowOfSession = false; // Set flag to false after first row
+                }
+
+                // Add subject cell only for the first topic of each subject (with rowSpan for topics in this subject)
+                if (index === 0) {
+                    const subjectTopicsCount = topics.length;
+
+                    // Subject cell - spans across all topics within this subject only
+                    const subjectCell = document.createElement('td');
+                    subjectCell.rowSpan = subjectTopicsCount;
+                    subjectCell.textContent = subject;
+                    row.appendChild(subjectCell);
+                }
+
+                // Topic cell - always added
+                const topicCell = document.createElement('td');
+                topicCell.textContent = topic;
+                row.appendChild(topicCell);
+
+                // Question count cell - always added
+                const countCell = document.createElement('td');
+                countCell.textContent = sessionData.subjects[subject][topic];
+                row.appendChild(countCell);
+
+                // Wrong ratio cell - always added
+                const wrongRatioCell = document.createElement('td');
+                if (sessionData.wrong_ratios && 
+                    sessionData.wrong_ratios[subject] && 
+                    sessionData.wrong_ratios[subject][topic]) {
+                    const wrongData = sessionData.wrong_ratios[subject][topic];
+                    wrongRatioCell.textContent = `${wrongData.wrong_count}/${wrongData.wrong_sessions}`;
+                } else {
+                    wrongRatioCell.textContent = '0/0'; // Default if no wrong data
+                }
+                row.appendChild(wrongRatioCell);
+
+                tableBody.appendChild(row);
+            });
+        });
+    });
+}
+
+// Helper function to generate random colors for chart
+function getRandomColor() {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+</script>
+{% endblock %}