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

[SPQR Inc.]

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:

$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

[Gast]

http://php.net/manual/de/language.operators.string.php

[SPQR Inc.]

Dankeschön

[SPQR Inc.]

Ich habe da noch ein Verständnisproblem.

Ich habe meinen Helper erstellt, welcher wie folgt aussieht:

    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 echo JHtml::_('graphs.draw', "Titel", $labelset, $data, $data2);    ?>

Dabei kommt dann beispielsweise folgender Code heraus:

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

[Gast]

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

[SPQR Inc.]

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:

            <div class="row-striped">
                <div class="row-fluid">
                <script>
                    var Titel_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 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:

    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:

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

[Gast]

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.

[SPQR Inc.]

Hallo moma

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

Ich habe es nun durch

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

ersetzt und es funktioniert