Charts.js im Artikel einfügen.

tatort

Hallo,

wie Ihr vielleicht wisst habe ich eine Fanpage zum Thema "Tatort" jetzt möchte ich zur bald kommenden Folge #1000 die Kommissarseiten etwas aufmöbeln. Hierzu hatte ich vor via Chart die Einschaltquoten an zu zeigen.
In Fiddle ( https://jsfiddle.net/5oajpx2n/4/ ) klappt die Darstellung des Charts. Der Übertrag in den Artikel hat leider nicht funktioniert: http://tatort-fans.de/heinz-drache-a…-buelow/#fehler das Feld ist leer. In der Fehlerkonsole ist mir so nichts aufgefallen.

Was mache ich hier falsch?

PS: Keine Angst ich möchte im Content "keinen" Quelltext haben, ich werde es dann in ein Plugin gießen.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Hast du im Script-Teil <srcipt>...</script> nur JavaScript oder mischst du zufällig HMTL dort mit rein?

Ich sehe p-Tag im Script, die da nicht reingehören. Wie hast du das denn bisher umgesetzt? Evtl. hilft dir wpautop()

tatort

ein p im Script? Bei mir sieht das wie folgend im Firebug aus

HTML

<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [
        "Tatort 174 - Tod macht erfinderisch", 
        "Tatort 177 - Die kleine Kanaille", 
        "Tatort 183 - Tödliche Blende ",
        "Tatort 202 - Schuldlos schuldig", 
        "Tatort 219 - Keine Tricks, Herr Bülow "
        ],
               datasets: [{
            label: "Einschaltquote in Mio.",
            fill: true,
            
            backgroundColor: "rgba(245,245,245,0.6)",
            pointBorderColor: "rgba(0,127,255,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,


            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            pointHitRadius: 5,
            data: [
            22.58, 
            17.11, 
            15.41, 
            14.21, 
            16.49
            ],


        }]
    },
    options: {
                legend: {
                    display: false,
                },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                display: false
            }]
        }
    },
});


</script>

Alles anzeigen

SirEctor

Wo hast du diesen Code eingetragen?

Entferne mal alle Leerzeilen.

tatort

Hi,

vielen Dank SirEctor, beim ausschalten der HTML-Kompression konnte ich die Problem auch sehen. Jetzt funktioniert es einwandfrei.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Charts.js im Artikel einfügen.

Jetzt mitmachen!