chart.js

Andere Lösungen
Post Reply
Bulkington
Posts: 28
Joined: Tue 4. Jun 2013, 13:55
Contact:

chart.js

Post by Bulkington » Tue 31. Dec 2019, 11:46

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
Posts: 1303
Joined: Sun 18. Nov 2012, 14:18

Re: chart.js

Post by Gert » Tue 31. Dec 2019, 14:18

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
Last edited by Gert on Wed 1. Jan 2020, 20:54, edited 1 time in total.
Gert Ebersbach | CMSimple | Templates - Plugins - Services

Bulkington
Posts: 28
Joined: Tue 4. Jun 2013, 13:55
Contact:

Re: chart.js

Post by Bulkington » Tue 31. Dec 2019, 16:57

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
Posts: 1303
Joined: Sun 18. Nov 2012, 14:18

Re: chart.js

Post by Gert » Wed 1. Jan 2020, 20:57

Hallo,

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

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 Ebersbach | CMSimple | Templates - Plugins - Services

Gert
Posts: 1303
Joined: Sun 18. Nov 2012, 14:18

Re: chart.js

Post by Gert » Thu 2. Jan 2020, 18:30

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
Gert Ebersbach | CMSimple | Templates - Plugins - Services

Post Reply