<div style="position: absolute;height: auto;width: 112px;left: 101px;"><img src="https://saxonia.de/wp-content/uploads/chart-flagge.png"></div><div class="oberschrift" style="padding-top: 56px;padding-bottom:0px;color:#000000;">Daily prices on 20.04.2026</div> <div class="metal-buttons">
    <div class="metal-flex" style="display: inline-block;margin-left: 50px;width:25%;">
    <div class="chart-metall">GOLD</div>
    <button class="metal-button gold" data-index="1">Purchase price:  129789.2 €/kg<br /></button>
    <button class="metal-button silber" data-index="2">sales price fabricated:  144498.68 €/kg<br /></button>
    <button class="metal-button platin" data-index="3">sales price unfabricated:  137930.55 €/kg<br /></button>
    </div>
    <div class="metal-flex" style="display: inline-block;margin-left: 50px;width:25%;">
    <div class="chart-metall2">SILVER</div>
    <button class="metal-button palladium" data-index="4">Purchase price: 2151.69 €/kg<br /></button>
    <button class="metal-button palladium" data-index="5">sales price fabricated: 2518.88 €/kg<br /></button>
    <button class="metal-button palladium" data-index="6">sales price unfabricated: 2345.16€/kg<br /></button>
    </div>
    <div class="metal-flex" style="display: inline-block;margin-left: 50px;width:25%;">
    <div class="chart-metall">PLATINUM</div>
    <button class="metal-button palladium" data-index="7">Purchase price: 55520.67 €/kg<br /></button>
    <button class="metal-button palladium" data-index="8">sales price fabricated: 60323.80€/kg<br /></button>
    </div>
    <div class="metal-flex" style="display: inline-block;margin-left: 50px;width:25%;">
    <div class="chart-metall">PALLADIUM</div>
    <button class="metal-button palladium" data-index="9">Purchase price: 40140.68 €/kg<br /></button>
    <button class="metal-button palladium" data-index="10">sales price fabricated: 46500.14 €/kg<br /></button>
    </div>
    </div><form id="foo" method="POST"><!-- <div class="oberschrift" style="padding-top:40px;">Kursübersicht für Gold, Silber, Platin & Palladium</div> -->
    <p style="text-align: center;margin-top: 40px;margin-bottom: 40px;">
    from <input type="text" id="kursanzeige_datum"   name="datum1" style="width:110px;" value=""> 
    to <input type="text" id="kursanzeige_datum2"   name="datum2" style="width:110px;" value="">
    <input type="submit" id="kursanzeige_button" value="Show" style="padding: 6px;margin-top: -6px;margin-left: 7px;text-transform: none;font-size: 16px;"><span id="export-xl"><img src="/wp-content/uploads/excelicon.jpg" style="height: auto;width: 25px;margin-left: 20px;margin-top: -5px;cursor:pointer;"></span><span id="export-pdf"><img src="/wp-content/uploads/pdf-files-icon.png" style="height: auto;width: 29px;margin-left: 9px;margin-top: -5px;cursor:pointer;"></span><span onclick="location.href='#dataTable'" style="margin-left:10px;position:relative;bottom:-8px;cursor:pointer;">Table view</span></p><div id="fehler_kursanzeiger" style="text-align:center;margin-top:-20px;font-size:14px;color:#dc3545;display:none;"></div></form><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
        <canvas id="myChart" width="200" height="100"></canvas>

        <table id="dataTable">
        <thead>
            <tr>
                <th>Date</th>
                <th>GOLD purchase price</th>
                <th>GOLD sales price fabricated</th>
                <th>GOLD sales price unfabricated</th>
                <th>SILVER purchase price</th>
                <th>SILVER sales price fabricated</th>
                <th>SILVER sales price unfabricated</th>
                <th>PLATINUM purchase price</th>
                <th>PLATINUM sales price fabricated</th>
                <th>PALLADIUM purchase price</th>
                <th>PALLADIUM sales price fabricated</th>
            </tr>
        </thead>
        <tbody>
            <!-- Rows will be added here dynamically -->
        </tbody>
    </table>
    <!-- <button id="export-xl">Tabelle exportieren</button> -->


        <script>        
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["20.04.2026"],
                datasets: [{
                    label: 'GOLD Ankauf',
                    data: ["129789.20"],
                    backgroundColor: 'rgb(205, 170, 53)',
                    borderColor: 'rgb(205, 170, 53)',
                    fill: false,
                    hidden: true
                } ,
                {
                    label: 'GOLD verarbeitet',
                    data: ["144498.68"],
                    backgroundColor: 'rgb(205, 170, 53)',
                    borderColor: 'rgb(205, 170, 53)',
                    fill: false                    ,
                    hidden: true
                } ,
                {
                    label: 'GOLD unverarbeitet',
                    data: ["137930.55"],
                    backgroundColor: 'rgb(205, 170, 53)',
                    borderColor: 'rgb(205, 170, 53)',
                    fill: false,
                    hidden: true
                } ,
                {
                    label: 'SILBER Ankauf',
                    data: ["2151.69"],
                    backgroundColor: 'rgb(87, 217, 203)',
                    borderColor: 'rgb(87, 217, 203)',
                    fill: false,
                    hidden: true
                } ,
                {
                    label: 'SILBER verarbeitet',
                    data: ["2518.88"],
                    backgroundColor: 'rgb(135, 255, 189)',
                    borderColor: 'rgb(135, 255, 189)',
                    fill: false,
                    hidden: false
                } ,
                {
                    label: 'SILBER unverarbeitet',
                    data: ["2345.16"],
                    backgroundColor: 'rgb(114, 105, 181)',
                    borderColor: 'rgb(114, 105, 181)',
                    fill: false,
                    hidden: true
                } ,
                {
                    label: 'PLATIN Ankauf',
                    data: ["55520.67"],
                    backgroundColor: 'rgb(49, 67, 120)',
                    borderColor: 'rgb(49, 67, 120)',
                    fill: false,
                    hidden: true
                } ,
                {
                    label: 'PLATIN verarbeitet',
                    data: ["60323.80"],
                    backgroundColor: 'rgb(94, 140, 167)',
                    borderColor: 'rgb(94, 140, 167)',
                    fill: false,
                    hidden: true
                } ,
                {
                    label: 'PALLADIUM Ankauf',
                    data: ["40140.68"],
                    backgroundColor: 'rgb(57, 145, 145)',
                    borderColor: 'rgb(57, 145, 145)',
                    fill: false,
                    hidden: true
                } ,
                {
                    label: 'PALLADIUM unverarbeitet',
                    data: ["46500.14"],
                    backgroundColor: 'rgb(65, 110, 91)',
                    borderColor: 'rgb(65, 110, 91)',
                    fill: false,
                    hidden: true
                }]
            },
			options: {
                legend: {
                    display: false
                },
				responsive: true,
				title: {
					display: false,
					text: 'Chart.js Line Chart'
				},
				tooltips: {
					mode: 'index',
					intersect: false,
                                                    callbacks: {
                label: function(tooltipItem, chart){
                    var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                    return datasetLabel + ': ' + number_format(tooltipItem.yLabel, 2) + ' €/kg';
                }
            },
                
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: false,
							labelString: 'Month',
                                                        fontColor: '#ff0000'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Euro/kg'
						}
					}]
				}
			},
                
        });

        // Call this function on page load
        jQuery(document).ready(function () {
            const buttons = document.querySelectorAll(".metal-buttons .metal-button");
            buttons[4].click();
            buttons.forEach((button) => {
                const buttonIndex = button.dataset.index;
                button.dataset.visible = myChart.data.datasets[buttonIndex - 1].hidden ? "false" : "true";
            });
        });
        

        const buttons = document.querySelectorAll(".metal-buttons .metal-button");
        let lastClickedButtonIndex = null;

        buttons.forEach((button) => {
            button.addEventListener("click", function() {
                lastClickedButtonIndex = button.dataset.index;
                const buttonIndex = button.dataset.index;
                // Reset all buttons data-visible to false
                buttons.forEach((btn) => {
                    btn.dataset.visible = "false";
                });
                
                // Set the clicked button data-visible to true or toggle it
                button.dataset.visible = (button.dataset.visible === "true" && myChart.data.datasets[buttonIndex - 1].hidden === false) ? "false" : "true";
                
                
                const datasetIndex = buttonIndex - 1;
                
                // Hide all datasets and columns first
                myChart.data.datasets.forEach((dataset, index) => {
                    dataset.hidden = true;
                    // Hiding the table columns
                    const tableCells = document.querySelectorAll(`#dataTable tbody td:nth-child(${index + 2})`); // +2 because the first column is the date
                    tableCells.forEach(cell => {
                        cell.style.display = "none";  
                    });
                    // Hiding the table headers
                    const tableHeader = document.querySelector(`#dataTable thead th:nth-child(${index + 2})`);
                    if (tableHeader) {
                        tableHeader.style.display = "none";
                    }
                });
                
                // Show the clicked dataset and column
                myChart.data.datasets[datasetIndex].hidden = false;
                // Showing the table columns
                const tableCellsToShow = document.querySelectorAll(`#dataTable tbody td:nth-child(${datasetIndex + 2})`);
                tableCellsToShow.forEach(cell => {
                    cell.style.display = "";  
                });
                // Showing the table headers
                const tableHeaderToShow = document.querySelector(`#dataTable thead th:nth-child(${datasetIndex + 2})`);
                if (tableHeaderToShow) {
                    tableHeaderToShow.style.display = "";
                }
                
                myChart.update();
            });
        });




        // Update bei Datumsaenderung
        function updateButtonVisibility(response) {
            const buttons = document.querySelectorAll(".metal-buttons .metal-button");
    
            buttons.forEach((button) => {
                const buttonIndex = button.dataset.index;
                button.dataset.visible = myChart.data.datasets[buttonIndex - 1].hidden ? "false" : "true";
            });
        
            // Make all table headers visible again
            const allHeaders = document.querySelectorAll("#dataTable thead th");
            allHeaders.forEach(header => {
                header.style.display = ""; // Resets the display property to its default
            });
            
        
            // Adding table data
            const tableBody = document.querySelector("#dataTable tbody");
            tableBody.innerHTML = "";
        
            for (let i = 0; i < response.datum.length; i++) {
                const row = document.createElement("tr");
        
                const dateCell = document.createElement("td");
                dateCell.textContent = response.datum[i];
                row.appendChild(dateCell);
                for (let j = 1; j <= 10; j++) {
                    const cell = document.createElement("td");
                    cell.textContent = (parseFloat(response["wert" + j][i]).toFixed(2));
                    row.appendChild(cell);
                }
        
                tableBody.appendChild(row);
            }

         
        }
   
  
        
		
        </script>{"id":5578,"date":"2024-01-18T12:47:48","date_gmt":"2024-01-18T11:47:48","guid":{"rendered":"https:\/\/saxonia.de\/?page_id=5578"},"modified":"2024-01-18T12:47:48","modified_gmt":"2024-01-18T11:47:48","slug":"daily-courses","status":"publish","type":"page","link":"https:\/\/saxonia.de\/en\/precious-metals-trading\/daily-courses\/","title":{"rendered":"Daily courses"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row css=&#8221;.vc_custom_1685697385499{margin-bottom: 50px !important;}&#8221;][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text][\/vc_column_text][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row css=&#8221;.vc_custom_1685697385499{margin-bottom: 50px !important;}&#8221;][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text][\/vc_column_text][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":1275,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5578","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Daily courses - SAXONIA<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/saxonia.de\/en\/precious-metals-trading\/daily-courses\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Daily courses - SAXONIA\" \/>\n<meta property=\"og:description\" content=\"[vc_row css=&#8221;.vc_custom_1685697385499{margin-bottom: 50px !important;}&#8221;][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text][\/vc_column_text][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/saxonia.de\/en\/precious-metals-trading\/daily-courses\/\" \/>\n<meta property=\"og:site_name\" content=\"SAXONIA\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/saxonia.de\\\/en\\\/precious-metals-trading\\\/daily-courses\\\/\",\"url\":\"https:\\\/\\\/saxonia.de\\\/en\\\/precious-metals-trading\\\/daily-courses\\\/\",\"name\":\"Daily courses - SAXONIA\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/saxonia.de\\\/#website\"},\"datePublished\":\"2024-01-18T11:47:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/saxonia.de\\\/en\\\/precious-metals-trading\\\/daily-courses\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/saxonia.de\\\/en\\\/precious-metals-trading\\\/daily-courses\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/saxonia.de\\\/en\\\/precious-metals-trading\\\/daily-courses\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/saxonia.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PRECIOUS METALS TRADING\",\"item\":\"https:\\\/\\\/saxonia.de\\\/en\\\/precious-metals-trading\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Daily courses\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/saxonia.de\\\/#website\",\"url\":\"https:\\\/\\\/saxonia.de\\\/\",\"name\":\"SAXONIA\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/saxonia.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Daily courses - SAXONIA","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/saxonia.de\/en\/precious-metals-trading\/daily-courses\/","og_locale":"en_US","og_type":"article","og_title":"Daily courses - SAXONIA","og_description":"[vc_row css=&#8221;.vc_custom_1685697385499{margin-bottom: 50px !important;}&#8221;][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text][\/vc_column_text][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]","og_url":"https:\/\/saxonia.de\/en\/precious-metals-trading\/daily-courses\/","og_site_name":"SAXONIA","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/saxonia.de\/en\/precious-metals-trading\/daily-courses\/","url":"https:\/\/saxonia.de\/en\/precious-metals-trading\/daily-courses\/","name":"Daily courses - SAXONIA","isPartOf":{"@id":"https:\/\/saxonia.de\/#website"},"datePublished":"2024-01-18T11:47:48+00:00","breadcrumb":{"@id":"https:\/\/saxonia.de\/en\/precious-metals-trading\/daily-courses\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/saxonia.de\/en\/precious-metals-trading\/daily-courses\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/saxonia.de\/en\/precious-metals-trading\/daily-courses\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/saxonia.de\/"},{"@type":"ListItem","position":2,"name":"PRECIOUS METALS TRADING","item":"https:\/\/saxonia.de\/en\/precious-metals-trading\/"},{"@type":"ListItem","position":3,"name":"Daily courses"}]},{"@type":"WebSite","@id":"https:\/\/saxonia.de\/#website","url":"https:\/\/saxonia.de\/","name":"SAXONIA","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/saxonia.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/saxonia.de\/en\/wp-json\/wp\/v2\/pages\/5578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saxonia.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saxonia.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saxonia.de\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/saxonia.de\/en\/wp-json\/wp\/v2\/comments?post=5578"}],"version-history":[{"count":2,"href":"https:\/\/saxonia.de\/en\/wp-json\/wp\/v2\/pages\/5578\/revisions"}],"predecessor-version":[{"id":5581,"href":"https:\/\/saxonia.de\/en\/wp-json\/wp\/v2\/pages\/5578\/revisions\/5581"}],"up":[{"embeddable":true,"href":"https:\/\/saxonia.de\/en\/wp-json\/wp\/v2\/pages\/1275"}],"wp:attachment":[{"href":"https:\/\/saxonia.de\/en\/wp-json\/wp\/v2\/media?parent=5578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}