| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CornYield Analysis | CornYield Optimizer Pro</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| </head> |
| <body class="bg-gray-50"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="container mx-auto px-4 py-8"> |
| <section class="mb-12 text-center"> |
| <h1 class="text-4xl font-bold text-green-800 mb-4">Yield Analysis Dashboard</h1> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Interactive visualizations of corn yield correlations and nutrient trends |
| </p> |
| </section> |
|
|
| <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-xl font-semibold mb-4">Yield vs. Soil Nutrients</h2> |
| <canvas id="yieldNutrientChart" height="400"></canvas> |
| <p class="text-sm text-gray-500 mt-2">Correlation between corn yield and key soil nutrients across 120 fields</p> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-xl font-semibold mb-4">Critical Nutrient Thresholds</h2> |
| <canvas id="thresholdChart" height="400"></canvas> |
| <p class="text-sm text-gray-500 mt-2">Yield response to nutrient levels showing optimal ranges</p> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-xl font-semibold mb-4">Seasonal Nutrient Trends</h2> |
| <canvas id="seasonalTrendChart" height="400"></canvas> |
| <p class="text-sm text-gray-500 mt-2">Monthly average nutrient levels showing seasonal patterns</p> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-xl font-semibold mb-4">Management Zone Comparison</h2> |
| <canvas id="zoneComparisonChart" height="400"></canvas> |
| <p class="text-sm text-gray-500 mt-2">Average yield and nutrient levels by management zone</p> |
| </div> |
| </section> |
|
|
| <section class="bg-white rounded-xl shadow-md p-6 mb-12"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Interactive Analysis Tools</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <h3 class="text-lg font-medium mb-3">Filter by:</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Soil Type</label> |
| <select class="w-full rounded-md border-gray-300 shadow-sm"> |
| <option>All Types</option> |
| <option>Clay</option> |
| <option>Loam</option> |
| <option>Sandy</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nutrient Focus</label> |
| <select class="w-full rounded-md border-gray-300 shadow-sm"> |
| <option>All Nutrients</option> |
| <option>Phosphorus (P)</option> |
| <option>Zinc (Zn)</option> |
| <option>Organic Matter</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-medium mb-3">Export Data</h3> |
| <div class="space-y-3"> |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
| <i data-feather="download" class="mr-2 w-4 h-4"></i> |
| Download CSV Report |
| </button> |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
| <i data-feather="printer" class="mr-2 w-4 h-4"></i> |
| Print Analysis |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <custom-footer></custom-footer> |
| |
| <script> |
| feather.replace(); |
| |
| |
| const yieldNutrientCtx = document.getElementById('yieldNutrientChart').getContext('2d'); |
| new Chart(yieldNutrientCtx, { |
| type: 'bar', |
| data: { |
| labels: ['Phosphorus (P)', 'Zinc (Zn)', 'Organic Matter', 'Potassium (K)', 'Nitrogen (N)'], |
| datasets: [{ |
| label: 'Correlation Coefficient', |
| data: [0.88, 0.91, 0.93, 0.75, 0.68], |
| backgroundColor: [ |
| 'rgba(75, 192, 192, 0.7)', |
| 'rgba(54, 162, 235, 0.7)', |
| 'rgba(153, 102, 255, 0.7)', |
| 'rgba(255, 159, 64, 0.7)', |
| 'rgba(255, 99, 132, 0.7)' |
| ], |
| borderColor: [ |
| 'rgba(75, 192, 192, 1)', |
| 'rgba(54, 162, 235, 1)', |
| 'rgba(153, 102, 255, 1)', |
| 'rgba(255, 159, 64, 1)', |
| 'rgba(255, 99, 132, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| scales: { |
| y: { |
| beginAtZero: true, |
| max: 1.0, |
| title: { |
| display: true, |
| text: 'Correlation with Yield' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const thresholdCtx = document.getElementById('thresholdChart').getContext('2d'); |
| new Chart(thresholdCtx, { |
| type: 'line', |
| data: { |
| labels: [0, 5, 10, 15, 20, 25, 30], |
| datasets: [{ |
| label: 'Zinc (ppm)', |
| data: [120, 135, 165, 195, 205, 208, 210], |
| borderColor: 'rgba(54, 162, 235, 1)', |
| backgroundColor: 'rgba(54, 162, 235, 0.1)', |
| tension: 0.3, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| annotation: { |
| annotations: { |
| box1: { |
| type: 'box', |
| yMin: 195, |
| yMax: 208, |
| backgroundColor: 'rgba(46, 125, 50, 0.2)', |
| borderColor: 'rgba(46, 125, 50, 0.5)', |
| borderWidth: 1, |
| label: { |
| content: 'Optimal Range', |
| enabled: true |
| } |
| } |
| } |
| } |
| }, |
| scales: { |
| y: { |
| title: { |
| display: true, |
| text: 'Yield (bushels/acre)' |
| } |
| }, |
| x: { |
| title: { |
| display: true, |
| text: 'Zinc (ppm)' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const seasonalTrendCtx = document.getElementById('seasonalTrendChart').getContext('2d'); |
| new Chart(seasonalTrendCtx, { |
| type: 'line', |
| data: { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
| datasets: [ |
| { |
| label: 'Phosphorus (ppm)', |
| data: [280, 290, 310, 340, 370, 390, 410, 400, 380, 350, 320, 300], |
| borderColor: 'rgba(255, 99, 132, 1)', |
| backgroundColor: 'rgba(255, 99, 132, 0.1)', |
| tension: 0.3, |
| fill: true |
| }, |
| { |
| label: 'Zinc (ppm)', |
| data: [8, 8.5, 9.2, 10.1, 11.5, 12.8, 13.5, 13.2, 12.5, 11, 9.5, 8.8], |
| borderColor: 'rgba(54, 162, 235, 1)', |
| backgroundColor: 'rgba(54, 162, 235, 0.1)', |
| tension: 0.3, |
| fill: true |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| interaction: { |
| mode: 'index', |
| intersect: false, |
| }, |
| scales: { |
| y: { |
| title: { |
| display: true, |
| text: 'Nutrient Level' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const zoneComparisonCtx = document.getElementById('zoneComparisonChart').getContext('2d'); |
| new Chart(zoneComparisonCtx, { |
| type: 'radar', |
| data: { |
| labels: ['Yield', 'P', 'Zn', 'OM', 'K', 'N'], |
| datasets: [ |
| { |
| label: 'High Yield Zone', |
| data: [210, 420, 14.5, 4.2, 350, 25], |
| backgroundColor: 'rgba(46, 125, 50, 0.2)', |
| borderColor: 'rgba(46, 125, 50, 1)', |
| pointBackgroundColor: 'rgba(46, 125, 50, 1)', |
| pointBorderColor: '#fff', |
| pointHoverBackgroundColor: '#fff', |
| pointHoverBorderColor: 'rgba(46, 125, 50, 1)' |
| }, |
| { |
| label: 'Medium Yield Zone', |
| data: [185, 380, 11.8, 3.5, 320, 22], |
| backgroundColor: 'rgba(255, 193, 7, 0.2)', |
| borderColor: 'rgba(255, 193, 7, 1)', |
| pointBackgroundColor: 'rgba(255, 193, 7, 1)', |
| pointBorderColor: '#fff', |
| pointHoverBackgroundColor: '#fff', |
| pointHoverBorderColor: 'rgba(255, 193, 7, 1)' |
| }, |
| { |
| label: 'Low Yield Zone', |
| data: [155, 320, 8.5, 2.8, 280, 18], |
| backgroundColor: 'rgba(244, 67, 54, 0.2)', |
| borderColor: 'rgba(244, 67, 54, 1)', |
| pointBackgroundColor: 'rgba(244, 67, 54, 1)', |
| pointBorderColor: '#fff', |
| pointHoverBackgroundColor: '#fff', |
| pointHoverBorderColor: 'rgba(244, 67, 54, 1)' |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| scales: { |
| r: { |
| angleLines: { |
| display: true |
| }, |
| suggestedMin: 0 |
| } |
| } |
| } |
| }); |
| </script> |
| </body> |
| </html> |
