Ankündigung

Einklappen
Keine Ankündigung bisher.

JS-Code in Variable gespeichert - dort Variablen einfügen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • JS-Code in Variable gespeichert - dort Variablen einfügen

    Hallo zusammen,

    ich möchte gerne einen Helper für eine Joomla-Komponente schreiben, welcher seinerseits Graphen mittels Graph.js generiert.

    Graph.js wird schon eingebunden, und nun soll ein Graph mittels return zurück gegeben werden:

    PHP-Code:
    $labelset '"January","February","March","April","May","June","July"';
    $data "5,100,90,80,70,60,50";
    $data2 "50,60,70,80,90,100,5";
    $script '<script>
        var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

        var barChartData = {
            labels : [ $labelset ],
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data : [ $data ]
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,0.8)",
                    highlightFill : "rgba(151,187,205,0.75)",
                    highlightStroke : "rgba(151,187,205,1)",
                    data : [ $data2 ]
                }
            ]

        }
        window.onload = function(){
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx).Bar(barChartData, {
                responsive : true
            });
        }

        </script>'
    ;
    echo 
    $script;
    ?> 
    Hier erhalte ich die Fehlermeldung:

    ReferenceError: Can't find variable: $labelset
    Wie kann ich hier Variablen einsetzen, ohne dass dieser Fehler auftritt?

    Vielen Dank für eure Hilfe


  • #2
    http://php.net/manual/de/language.operators.string.php

    Kommentar


    • #3
      Dankeschön

      Kommentar


      • #4
        Ich habe da noch ein Verständnisproblem.

        Ich habe meinen Helper erstellt, welcher wie folgt aussieht:

        PHP-Code:
            defined('_JEXEC') or die;

            abstract class 
        JHtmlGraphs 
            
        {
                public  function 
        draw($title NULL$labelset NULL$data NULL$data2 NULL)
                {
                
        $script "<script> var barChartData = { labels : [ {$labelset} ], datasets : [ { fillColor : 'rgba(220,220,220,0.5)', strokeColor : 'rgba(220,220,220,0.8)', highlightFill: 'rgba(220,220,220,0.75)', highlightStroke: 'rgba(220,220,220,1)', data : [ $data ] }, { fillColor : 'rgba(151,187,205,0.5)', strokeColor : 'rgba(151,187,205,0.8)', highlightFill : 'rgba(151,187,205,0.75)', highlightStroke : 'rgba(151,187,205,1)', data : [ $data2 ] } ] }; window.onload = function(){ var ctx = document.getElementById('canvas_{$title}').getContext('2d'); window.myBar = new Chart(ctx).Bar(barChartData, { responsive : true }); }    </script>";
                
        $canvas "<div style='width: 100%'><canvas id='canvas_{$title}' height='20' width='20'></canvas></div>";
                return 
        $script $canvas;
                }

            } 
        Wenn ich das nun in meiner View einbinde, funktioniert das soweit auch:

        PHP-Code:
        <?php echo JHtml::_('graphs.draw'"Titel"$labelset$data$data2);    ?>
        Dabei kommt dann beispielsweise folgender Code heraus:

        PHP-Code:
        <script> var barChartData = { labels : [ "January","February","March","April","May","June","July" ], datasets : [ { fillColor 'rgba(220,220,220,0.5)'strokeColor 'rgba(220,220,220,0.8)'highlightFill'rgba(220,220,220,0.75)'highlightStroke'rgba(220,220,220,1)'data : [ 5,100,90,80,70,60,50 ] }, { fillColor 'rgba(151,187,205,0.5)'strokeColor 'rgba(151,187,205,0.8)'highlightFill 'rgba(151,187,205,0.75)'highlightStroke 'rgba(151,187,205,1)'data : [ 50,60,70,80,90,100,100 ] } ] }; window.onload = function(){ var ctx document.getElementById('canvas_Titel').getContext('2d'); window.myBar = new Chart(ctx).Bar(barChartData, { responsive true }); }    </script><div style='width: 100%'><canvas id='canvas_Titel' height='20' width='20'></canvas></div>                </div> 
        Wunderbar. Der Graph wird angezeigt, siehe http://d.pr/i/GuX4 .

        Wenn ich nun aber mehrere Graphen auf einer Seite darstellen möchte, funktioniert dies nicht. Es wird immer nur der "letzte" eingefügte Graph auch erstellt, obwohl der Titelname abweichend gewählt wurde.

        Ich freue mich über jede Hilfe. Wenn das zu JS-spezifisch ist, dann würde ich mich über eine Empfehlung eines JS-Forums sehr freuen.

        Kommentar


        • #5
          wie der sourcecode von mehreren graph aussieht verrät du uns nicht?
          könnte ja sein, dir fällt dann selbst auf, an was es liegt.

          ha übrigens graph.js nicht gefunden:
          http://en.wikipedia.org/wiki/Compari...ing_frameworks

          Kommentar


          • #6
            Entschuldigung, es heißt natürlich chart.js

            Wenn ich versuche 2 Charts einzubinden sieht der Code aktuell wie folgt aus, da sich der Helper auch geändert hat:


            Code der gerenderten HTML-Seite:

            PHP-Code:
                        <div class="row-striped">
                            <
            div class="row-fluid">
                            <
            script>
                                var 
            Titel_data = [
                            {
                                
            value300,
                                
            color:'#F7464A',
                                
            highlight'#FF5A5E',
                                
            label'Red'
                            
            },
                            {
                                
            value50,
                                
            color'#46BFBD',
                                
            highlight'#5AD3D1',
                                
            label'Green'
                            
            },
                            {
                                
            value100,
                                
            color'#FDB45C',
                                
            highlight'#FFC870',
                                
            label'Yellow'
                            
            },
                            {
                                
            value40,
                                
            color'#949FB1',
                                
            highlight'#A8B3C5',
                                
            label'Grey'
                            
            },
                            {
                                
            value120,
                                
            color'#4D5360',
                                
            highlight'#616774',
                                
            label'Dark Grey'
                            
            }

                        ];

                        
            window.onload = function(){
                            var 
            Titel_ctx document.getElementById('chart-area_Titel').getContext('2d');
                            
            window.Titel = new Chart(Titel_ctx).Doughnut(Titel_data, {responsive true});
                        };
                    
            </script><div id='canvas-holder'><canvas id='chart-area_Titel' width='500' height='500'/></div>                </div>

                            <div class="row-fluid">
                            <script>
                                var Titel2_data = [
                            {
                                value: 300,
                                color:'#F7464A',
                                highlight: '#FF5A5E',
                                label: 'Red'
                            },
                            {
                                value: 50,
                                color: '#46BFBD',
                                highlight: '#5AD3D1',
                                label: 'Green'
                            },
                            {
                                value: 100,
                                color: '#FDB45C',
                                highlight: '#FFC870',
                                label: 'Yellow'
                            },
                            {
                                value: 40,
                                color: '#949FB1',
                                highlight: '#A8B3C5',
                                label: 'Grey'
                            },
                            {
                                value: 120,
                                color: '#4D5360',
                                highlight: '#616774',
                                label: 'Dark Grey'
                            }

                        ];

                        window.onload = function(){
                            var Titel2_ctx = document.getElementById('chart-area_Titel2').getContext('2d');
                            window.Titel2 = new Chart(Titel2_ctx).Doughnut(Titel2_data, {responsive : true});
                        };
                    </script><div id='canvas-holder'><canvas id='chart-area_Titel2' width='500' height='500'/></div> 
            Code des Helpers:
            PHP-Code:
                abstract class JHtmlGraphs 
                
            {
                    public  function 
            draw($title NULL$labelset NULL$data NULL$data2 NULL)
                    {
                    
            $labelset '"January","February","March","April","May","June","July"';
                    
            $data "5,100,90,80,70,60,50";
                    
            $data2 "50,60,70,80,90,100,100";
                    
            //$script = "<script> var barChartData_$title = { labels : [ {$labelset} ], datasets : [ { fillColor : 'rgba(220,220,220,0.5)', strokeColor : 'rgba(220,220,220,0.8)', highlightFill: 'rgba(220,220,220,0.75)', highlightStroke: 'rgba(220,220,220,1)', data : [ $data ] }, { fillColor : 'rgba(151,187,205,0.5)', strokeColor : 'rgba(151,187,205,0.8)', highlightFill : 'rgba(151,187,205,0.75)', highlightStroke : 'rgba(151,187,205,1)', data : [ $data2 ] } ] }; window.onload = function(){ var ctx_$title = document.getElementById('canvas_$title').getContext('2d'); window.myBar = new Chart(ctx_$title).Bar(barChartData_$title, { responsive : true }); }    </script>";
                    
            $script "<script>
                                var 
            {$title}_data = [
                            {
                                value: 300,
                                color:'#F7464A',
                                highlight: '#FF5A5E',
                                label: 'Red'
                            },
                            {
                                value: 50,
                                color: '#46BFBD',
                                highlight: '#5AD3D1',
                                label: 'Green'
                            },
                            {
                                value: 100,
                                color: '#FDB45C',
                                highlight: '#FFC870',
                                label: 'Yellow'
                            },
                            {
                                value: 40,
                                color: '#949FB1',
                                highlight: '#A8B3C5',
                                label: 'Grey'
                            },
                            {
                                value: 120,
                                color: '#4D5360',
                                highlight: '#616774',
                                label: 'Dark Grey'
                            }

                        ];

                        window.onload = function(){
                            var 
            {$title}_ctx = document.getElementById('chart-area_{$title}').getContext('2d');
                            window.
            $title = new Chart({$title}_ctx).Doughnut({$title}_data, {responsive : true});
                        };
                    </script>"
            ;
                    
                    
            $canvas "<div id='canvas-holder'><canvas id='chart-area_{$title}' width='500' height='500'/></div>";
                    return 
            $script $canvas;
                    }

                } 

            Code des Layouts:

            PHP-Code:

            JHtml::script(Juri::root() . 'media/com_bestia/chartjs/Chart.js');
            JHtml::addIncludePath(JPATH_COMPONENT.'/helpers/html');    
            ....
            <div class="row-fluid span4">
                    <div class="well well-small">
                        <h2 class="module-title nav-header">Mailspool</h2>

                        <div class="row-striped">
                            <div class="row-fluid">
                            <?php echo JHtml::_('graphs.draw'"Titel");    ?>
                            </div>

                            <div class="row-fluid">
                            <?php echo JHtml::_('graphs.draw'"Titel2");    ?>

                                <div class="span9">
                                    <span class="badge badge-info hasTooltip" title=
                                    "Anzahl nicht versendete Emails">25</span> <strong class=
                                    "row-title"><a href="index.php?option=com_categories&view=categories&extension=com_bestia">
                                    Emails warten auf Versand</a></strong>
                                </div>

                                <div class="span3">
                                    <span class="small">info</span>
                                </div>
                            </div>

                         </div>
                    </div>
                </div>
            Der erste Graph wird geladen, der 2. nicht, siehe: http://d.pr/i/U70j

            Kommentar


            • #7
              mir gefält das syntax hightlighting nicht, ist da was falsch?

              wieso machste eigentlich immer window.onload, schreib doch einfach erst den doom.

              wenn du keine fehler findest, schau ich es mir heute abend mal an.

              Kommentar


              • #8
                Hallo moma

                Das window.onload war hier tatsächlich der Fehler.

                Ich habe es nun durch

                Code:
                			var ctx_{$title} = document.getElementById('chart-area_{$title}').getContext('2d');
                			var Chart_{$title} = new Chart(ctx_{$title}).{$type}({$title}_data);
                ersetzt und es funktioniert

                Kommentar

                Lädt...
                X