Contao-Camp 2024
Ergebnis 1 bis 2 von 2

Thema: Visualisierung von MetaModels-Daten

  1. #1
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Frage 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
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  2. #2
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.681
    User beschenken
    Wunschliste

    Standard

    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.Bals 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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •