chart.js

[Bulkington]

Hallo Gert, hallo zusammen,
ich würde gerne einige Daten mit Hilfe von Diagrammen darstellen und frage mich, ob die Freeware chart.js mit cmsimple kompatibel ist. Bei chart.js handelt es sich um eine Bibliothek basierend auf JavaScript, die entsprechende Built-Datei muss ich auf dem Server unterbringen, aber ich weiß nicht wo... Hat jemand Erfahrung damit, oder schon einmal etwas ähnliches versucht...

Vielen Dank,
Peter

[Gert]

Hallo Peter,

einfache Lösung, mehr gibt es heute nicht

Lege eine Datei ./cmsimple/userfuncs.php mit folgendem Inhalt an, oder ergänze sie, wenn schon vorhanden, mit folgender Funktion:

Code: Select all

<?php // utf-8 marker: äöü 

function cmsimpleChartQ1($chartName = 'Q1')
{
$output = '
<canvas id="' . $chartName . '" width="800" height="400"></canvas>
<script>// <![CDATA[
var ctx = document.getElementById("' . $chartName . '");
              var ' . $chartName . ' = new Chart(ctx, {
                  type: "bar",
                  data: {
                      labels: ["Januar", "Februar", "März"],
                      datasets: [{
                          label: "1. Quartal",
                          data: [12, 19, 14, 0]
                      }]
                  }
              });
// ]]></script>
';

return $output;
}

?>

Dann fügst Du in der template.htm Deines Templates direkt vor </head> folgende Zeile ein:

Code: Select all

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>

Dann rufst Du auf der Seite die Funktion auf:

Code: Select all

{{{function:cmsimpleChartQ1('Q1');}}}

Ist erstmal für einen (1) Chart pro Funktion, für jeden Chart musst Du die Funktion kopieren und anpassen, Beispiel:

Code: Select all

function cmsimpleChartQ2($chartName = 'Q2')
{
...
}

Code: Select all

{{{function:cmsimpleChartQ2('Q2');}}}

Chart.js nimmt denn kleinsten Wert als unteren Wert der y-Achse, was bei einem Balkendiagramm blöd ist. Deshalb habe ich bei "data:" hinten noch eine 0 angehängt, dann beginnt die y-Achse bei 0.

Und so sieht das dann aus:

https://www.ge-webdesign.de/demotpl/?Te ... rts_Plugin

Ist eine gute Idee für ein Plugin, aber jetzt wird erstmal das neue Jahr begrüsst,

einen guten Rutsch - Gert

[Bulkington]

Hallo Gert,
vielen Dank für die schnelle, präzise und umfangreiche Antwort!!! Die Response-Time ist wirklich toll. Konnte Deinen Chart auf der Webseite nachvollziehen, jetzt kann es also losgehen mit chart.cs... Perfekt.

Einen guten Rutsch nach 2020,
Peter

[Gert]

Hallo,

inzwischen ist das Plugin in Arbeit, fast fertig, aber der ganze Kleinkram ist noch zu erledigen

Den Link zur Demoseite weiter oben habe ich aktualisiert, hier noch einmal der aktuelle Link:

https://www.ge-webdesign.de/demotpl/?Te ... rts_Plugin

In den nächsten Tagen werde ich das Plugin "Charts" veröffentlichen,

Gert

[Gert]

Hallo Peter,

das Plugin "Charts" ist veröffentlicht.

Wenn Du auf das Plugin umsteigst, solltest Du die Zeile im head-Bereich, die das chartjs-Script von einem fremden Server einfügt, unbedingt entfernen. Das Charts Plugin fügt eine eigene Scritptdatei in den head-Bereich ein,

Gert