+ Antworten
Ergebnis 1 bis 5 von 5

Thema: Highcharts in Joomla einpflegen

  1. #1
    Neu an Board
    Registriert seit
    21.10.2014
    Ort
    Dresden
    Beiträge
    3
    Bedankte sich
    0
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Frage Highcharts in Joomla einpflegen

    Hallo zusammen,

    derzeit sitze ich daran ein Modul für Joomla 2.5 zu schreiben, bei dem ich aus einer Mysql Datenbank Werte auslesen möchte und diese dann in einem Balkendiagramm per JQuery(Highcharts) anzeigen lassen möchte. Wie ich die Werte aus dem php da rein bekomme ist kein problem, aber in meiner Lokalen Testumgebung wird das Diagramm nicht angezeigt. Es bleibt nur das leere div wo es drinnen liegen sollte.
    Da ich leider noch nicht sehr lange mit joomla arbeite gingen mir auch entsprechend fix die Ideen aus.

    Die API hab ich wie folgt in meinem Template eingefügt
    PHP-Code:
    $doc->addScript('http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'); 
    Hab jetzt auch schon den halben Tag Foren gewälzt aber bin nicht unbedingt schlauer geworden.
    Das Script, welches das Diagramm erstellen soll, habe ich direkt in der default.php meines Modules.
    Das sieht da folgendermaßen aus.

    HTML-Code:
    <script type="text/javascript">
    		jQuery(function () {
    		    jQuery('#container').highcharts({
    		        chart: {
    		            type: 'column'
    		        },
    		        title: {
    		            text: 'Wärmeerzeugung'
    		        },
    		        subtitle: {
    		            text: 'Chemnitz'
    		        },
    		        xAxis: {
    		            categories: [
    		                'Verbrauch',
    		                'Biothermie',
    		                'Solarthermie',
    		                'Geothermie'
    		            ]
    		        },
    		        yAxis: {
    		            min: 0,
    		            title: {
    		                text: 'kwh/Einwohner'
    		            }
    		        },
    		        tooltip: {
    		            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    		            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    		                '<td style="padding:0"><b>{point.y:.1f} k</b></td></tr>',
    		            footerFormat: '</table>',
    		            shared: true,
    		            useHTML: true
    		        },
    		        plotOptions: {
    		            column: {
    		                pointPadding: 0.2,
    		                borderWidth: 0
    		            }
    		        },
    		        series: [{
    		            name: 'Verbrauch',
    		            color: '#f5982b',
    		            data: [200]
    		
    		        }, {
    		            name: 'Bioenergie',
    		            color: '#689a5c',
    		            data: [26.9]
    		
    		        }, {
    		            name: 'Solarenergie',
    		            color: '#c04a2a',
    		            data: [17.6]
    		
    		        }, {
    		            name: 'Geoenergie',
    		            color: '#733c0f',
    		            data: [47.2]
    		
    		        }]
    		    });
    		});
    </script>
    Was genau mache ich hier falsch?

  2. #2
    Gute Seele des Boards Avatar von jacxx
    Registriert seit
    07.03.2005
    Ort
    horsehead nebula
    Beiträge
    10.924
    Bedankte sich
    622
    Erhielt 2.475 Danksagungen
    in 2.298 Beiträgen

    Standard

    $doc->addScript('http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');
    Im JDocument werden Gänsefüße statt Hochkomma verwendet?

    http://docs.joomla.org/JDocument/addScript
    Wer Joomla nachmacht oder verfälscht, oder nachgemachte oder verfälschte sich verschafft und in Verkehr bringt, wird mit Typo3 nicht unter zwei Jahren bestraft.
    Joomla Forum
    Joomla braucht Dich!

  3. #3
    Gehört zum Inventar Avatar von Re:Later
    Registriert seit
    21.04.2014
    Ort
    Berlin
    Beiträge
    5.795
    Bedankte sich
    156
    Erhielt 2.255 Danksagungen
    in 2.022 Beiträgen

    Standard

    Ich vermisse da noch das
    Code:
    <script src="http://code.highcharts.com/highcharts.js"></script>
    Von alleine kann das JQuery nicht

    Webkonsole kennst du für JavaScriptfehler?
    Firefox > extras > Web-Entwickler > Web-Konsole:

    TypeError: jQuery(...).highcharts is not a function

    So sieht das mit deinem Code (bei mir im HEAD) dann aus unter Joomla 3 und jQuery v1.11.1

    ch.jpg
    Geändert von Re:Later (22.10.2014 um 05:07 Uhr)

  4. #4
    Neu an Board
    Registriert seit
    21.10.2014
    Ort
    Dresden
    Beiträge
    3
    Bedankte sich
    0
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    danke schonmal für die fixen antworten. also mir wäre nicht bekannt das es n unterschied im php macht ob ich den string mit ' oder " verpacke.
    und zu re:later ich habe lokal die anderen sachen mit in meinem verzeichniss liegen und so eingebunden
    PHP-Code:
    $doc->addScript(JURI::base().'/templates/beez5/javascript/highcharts.js');
    $doc->addScript(JURI::base().'/templates/beez5/javascript/highcharts-3d.js');
    $doc->addScript(JURI::base().'/templates/beez5/javascript/modules/exporting.js'); 
    und bei dir funktioniert es also auf anhieb problemlos? :O

    muss man bei joomla ein spezielles plugin oder so installieren damit jquery angezeigt wird oder sollte es nach dem einbinden direkt funktionieren?

    auch danke für den tip mit der web-konsole ich benutze bislang nur firebug da ich eigentlich nicht oft mit JS in kontakt komme^^

  5. #5
    Neu an Board
    Registriert seit
    21.10.2014
    Ort
    Dresden
    Beiträge
    3
    Bedankte sich
    0
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Rotes Gesicht

    konnte den fehler finden.

    ich hatte folgendes eingebunden
    PHP-Code:
    $doc->addScriptDeclaration('jQuery.noConflict();jQuery(document).ready(function(){initMyJS();});'); 
    jetzt hab ic heinfach am ende das
    Code:
    {initMyJS();}
    entfernt und es klappt. nur entdeckt dank der web-konsole.
    VIIIIELEN DANK

+ Antworten

Berechtigungen

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