Erweiterung Kreisdiagramm???

[kischd]

Ich glaube mich zu erinnern, dass ich im Forum mal etwas von einer Kreisdiagramm-Erweiterung gelesen habe.
Leider finde ich nichts mehr.

Hat jmd von Euch schon so etwas mal umgesetzt?

[dazzle89]

Eine solche Erweiterung ist mir nicht bekannt, du kannst das aber recht simpel mit chartJS umsetzen: http://www.chartjs.org/

Mit Rocksolid Custom Elements oder ähnlichen Erweiterungen könntest du dann noch ein Backend-Formular erstellen, in dem man die einzelnen Werte eingibt. Das Script erstellt dir daraus automatisch das Diagramm.

[Samson1964]

Ich kenne keine Erweiterung dafür.
chart.js setze ich in einer eigenen Erweiterung ein, wo ich ein Liniendiagramm erzeuge. In meinem Template steht der Javascript-Code und mit meinem FE-Modul schreibe ich dort die Daten hinein. Hier Auszüge aus dem Template:

<?php
    $GLOBALS['TL_JQUERY'][] = '<script type="text/javascript" src="system/modules/dewis/public/js/Chart.js"></script>';
?>

<h2>Entwicklung von DWZ und Leistung</h2>
<div class="diagramm" style="margin-bottom:20px;">
    <canvas id="dwzchart" height="300" width="400"></canvas>
    <div><span style="color:#0000ff">DWZ</span>&nbsp;|&nbsp;<span style="color:#ff9900">Leistung</span></div>
</div>

<script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
    var lineChartData = {
        labels : [<?= $this->chartlabel ?>],
        datasets : [
            {
                label: "DWZ",
                fillColor : "rgba(216,216,255,0.4)",
                strokeColor : "rgba(51,51,255,1)",
                pointColor : "rgba(0,0,255,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(220,220,220,1)",
                data : [<?= $this->chartdwz ?>]
            },
            {
                label: "Leistung",
                fillColor : "rgba(247,218,189,0.4)",
                strokeColor : "rgba(229,138,47,1)",
                pointColor : "rgba(255,165,0,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : [<?= $this->chartleistung ?>]
            }
        ]

    }

window.onload = function(){
    var ctx = document.getElementById("dwzchart").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true,
    });
}


</script>

[susi.15]

Hi Samson,
hast du diese Erweiterung in deinem github-Archiv? Ich würde das gerne mal ausprobieren

[Samson1964]

Das ist verbaut in dieser PHP-Datei: https://github.com/Samson1964/contao...ieler.php#L324
Dort werden die Werte in Arrays geschrieben und in den Zeilen 377/378 werden die Arrays für das Template konvertiert.

Ich hatte vor eine separate Chart-Erweiterung zu coden, aber sehr weit vorwärts bin ich damit noch nicht gekommen. Diese geplante Erweiterung würde meine Lösung nicht ersetzen, aber man könnte auf einfache Weise Werte im BE pflegen, die Diagrammart wählen und im FE ausgeben.