Visualisierung von MetaModels-Daten

Hallo zusammen,

im Forum habe ich nur sehr wenige und zumeist recht alte Beiträge zur Visualisierung von Daten gefunden.
Derzeit suche ich nach einer Methode, um Google Charts oder andere Skripte dazu zu nutzen, um sich verändernde Daten in greifbarer Form dazustellen (Bar-Charts, Pie-Charts, Heatmaps usw.)?

Hat hier schon jemand Erfahrungen gesammelt? Ggf. auch direkt Meta-Models angebunden an solche Skripte?

Danke & Gruß
Alexander

nichts leichter als das, sagte Frederick zu Piggeldy...

Beispiel:

siehe https://developers.google.com/chart/...cs/quick_start

in dein Template metalodels_prerendered_chart.html5

PHP-Code:

---


<?php

foreach ($this->data as $arrItem) {
    $rows[] = daten_sammeln.... z.B. als Array
}


// ggf. noch umwandeln z.B json_encode oder implode
$dataRows = ...
?>
    <!--Load the AJAX API (das ggf. in head oder "footer") -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <!--im Template mit den MM-Daten befüllen... -->
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
/*
ORIGINAL
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);
*/
        // MM
        data.addRows(<?= $dataRows ?>);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>

---

Das System ist immer das das Gleiche: erst Daten sammeln und dann im JavaScript oder was auch immer einfügen... egal ob das Google/OpenStreet-Maps, Charts, Animationen, SVG-Bilder/Karten o.ä. sind