chart.js auf Produktseiten verwenden

Hallo Zusammen,

ich komme gerade nicht weiter. Ich würde gerne chart.js (https://www.chartjs.org/) nutzen um Diagramme in einem Reiter auf den Produktseiten auszugeben.

Ich hab mit chart.js schon gearbeitet, weiß also grundsätzlich wie es funktioniert, aber nicht wie ich das bei Gambio reinbekomme.

Ich hab erstmal die chart.min.js (https://cdnjs.com/libraries/Chart.js) in GXModules/MeinShop/PriceChart/Shop/Themes/All/Javascript/Global hochgeladen.

Jetzt würde ich auf der Produktseite eigentlich nur ein div einbauen, z.B. sowas:

Code:

<div class="chart-bar">
<canvas id="priceChart"></canvas>
</div>

und im Fuß der Seite ein Script, was das Diagramm erzeugt:

Code:

<script>
const ctx = document.getElementById('priceChart');
new Chart(ctx, {
    type:
        'bar',
        data: {
            labels: ['2022-05', '2022-06', '2022-07', '2022-08', '2022-09', '2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12', '2025-01', '2025-02', '2025-03', '2025-04', '2025-05', '2025-06', '2025-07', '2025-08', '2025-09', '2025-10'],
            datasets: [ {data: [517.437, 546.60, 534.11, 520.68, 519.05, 513.49, 513.00, 544.84, 512.65, 503.02, 502.22, 509.67, 502.11, 508.14, 501.59, 482.21, 553.54, 534.18, 554.03, 548.38, 547.45, 535.44, 542.84, 540.10, 539.65, 544.46, 542.10, 550.59, 550.44, 543.46, 542.45, 541.15, 543.44, 558.97, 557.13, 560.37, 548.92, 562.12, 554.18, 518.33, 499.89, 534.20], borderWidth: 0,backgroundColor: "#DC143C",}]
        },
        options: {
            animation: false,
            responsive: true,
            maintainAspectRatio: false,
            aspectRatio: 3,
                                    plugins: {
                legend: {
                    display: false
                }
            },
        }
    }
);
</script>

Die Daten für das Diagramm sind aber natürlich für jedes Produkt unterschiedlich und ich muss die per API aktualisieren. Diese Daten müssten daher in den Artikeltext, ich sehe aber gerade nicht wie das gehen soll.

Mir ist klar, dass es wohl smarter wäre ein Gambio Modul zu schreiben, was auf die Datenbank zugreift und darüber Diagramme erzeugt. Ich kann sowas aber nicht entwickeln. Ich kann aber problemlos extern diese Daten erzeugen und per API aktualisieren, daher wäre das für mich aktuell die einfachste Lösung.

 

Moin. Da niemand geantwortet hat und ich selbst keine Lösung gefunden habe, musste ich mir was anderes ausdenken.

Ich erzeuge jetzt svgs mit pygal (https://www.pygal.org/en/stable/), lade die auf den Server und embedde sie als <figure><embed>. JS wäre mir lieber gewesen, aber die svgs die pygal ausspuckt sind tatsächlich sogar ein bisschen dynamisch (mouseover etc.). Von daher okay.