[FRAGE] Google Charts, überlappende Legenden aufgrund Tab Container

Hades85 · 01. Juli 2015

Hallo zusammen,

ich bin ziemlich neu in JS/HTML/PHP, programmiere hauptsächlich mit Java oder C.
Ich benutze für meine private Homepage die Google Charts API.
Jetzt habe ich aber seit der Benutzung von einer JS Tab Funktion(Tabs | jQuery UI), folgendes Problem:

Ohne die TAB Funktion, wird alles korrekt dargestellt.

In ein paar Google Einträgen die ähnliche Probleme wie ich hatten, ist die Rede davon die Parent Div Container auf nicht style="display:none" zu stellen.
Also das Problem entsteht wenn die Charts in einen unsichtbaren Container gezeichnet werden. Aber in meinem Code sind keine unsichtbaren Container oder übersehe ich was?

Code:

<div id="tabs">
    <ul>
      <li><a href="#tabs-1">Punkteverlauf</a></li>
      <li><a href="#tabs-2">Völker</a></li>
      <li><a href="#tabs-3">Karten</a></li>
    </ul>
    <div id="tabs-1">
      	<div id="punkteVerlauf" style="padding-left: 0px"> </div>
    </div>
    <div id="tabs-2">
      	<div id="Volk"> </div>
    </div>
    <div id="tabs-3"">
    
    	<div id="kartenSiege"> 
  		<div id="filter_div3" style="padding-left: 100px"></div>
  		<div id="chart_div3" style="width:700; height:700" ></div>
  		</div>
  			
  		<div id="kartenNiederlagen">
  		<div id="filter_div4" style="padding-left: 100px"></div>
  		<div id="chart_div4" style="width:700; height:700"></div>
  		</div>
  	</div>
  	
  	</div>

display:
none
block
inline
inline-block

Mit diesen Statements habe ich es schon probiert, aber keinen Erfolg gehabt.

Dann hatte ich die Idee die Charts neu zu zeichnen wenn der Tab aufgerufen wird aber bewerkstellige ich das?

Oder hat jemand noch eine andere Idee?

mikdoe · 01. Juli 2015

Wo hast du das gefunden mit dem parent div?

Hades85 · 01. Juli 2015

Hallo,

war etwas länger auf der Arbeit, deswegen erst jetzt meine Antwort.

javascript - Google Chart Tools - overlapping labels - Stack Overflow

javascript - Google charts legend pile up - Stack Overflow

mikdoe · 02. Juli 2015

Dann ist das entweder bei dir nicht der Grund oder du hast in deinem Code doch noch ein falsches CSS. Wie sieht der Code denn komplett aus? Kannst du mal ein minifiziertes Beispiel in Fiddle machen?

kkapsner · 02. Juli 2015

Welcher Tab wird denn beim Laden der Seite angezeigt? Es könnte ev. auch helfen, wenn du zuerst das Skript für den Graph und dann erst das Skript für die Tabs ausführst - könnte aber zu unschönem Flackern der Seite führen.

Hades85 · 02. Juli 2015

So, hat etwas gedauert.

https://jsfiddle.net/ujmmog4m/

in dem Beispiel ist alles in Ordnung. Ich verstehe es bisher noch nicht wo bei mir der Fehler liegt.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
wieso kann ich soetwas in JSFiddle probemlos einfädeln aber für meine Seite muss ich etxra eine CSS Datei auf meinen FTP hochladen?

Bei mir werden die JSScripte in einer php file abgespeichert. Achja, noch gar nicht erwähnt mein Code wird im Beitrag Bereich von Joomla 3+ ausgeführt bzw. included. Könnte das irgendwas damit zu tun haben?

kkapsner · 02. Juli 2015

https://jsfiddle.net/ujmmog4m/1/ und schon passt's nicht mehr...
https://jsfiddle.net/ujmmog4m/2/ und schon passt's wieder - genau so etwas in der Richtung hab' ich oben gemeint.

Hades85 · 02. Juli 2015

kkapsner schrieb:
https://jsfiddle.net/ujmmog4m/1/ und schon passt's nicht mehr...
https://jsfiddle.net/ujmmog4m/2/ und schon passt's wieder - genau so etwas in der Richtung hab' ich oben gemeint.

Ok, ich habe dich etwas anders verstanden, aber jetzt werden die meisten Grafiken richtig angezeigt.
Ich habe die Funktion für die Tabs als erstes eingefügt und danach folgen die ganzen anderen Funktionen der verschiedenen Grafiken.
Wenn ich das so einfüge wie du in JFiddle funktioniert es nicht richtig, ka.

Nur meine Pie Chart ist noch nicht 100% korrekt.

Code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/phpcustom/tab.css">
    
    
    <script type="text/javascript">
    
    $(function() {
      	$( "#tabs" ).tabs();
	});

 		// Load the Visualization API and the controls package.
    	google.load('visualization', '1', {
    	'packages' : [ 'corechart', 'bar','controls' ]
		});

		
    	
    
      function drawChartPunkteVerlauf() {
    	  
    	  var data 		= new google.visualization.DataTable();
          var datum 	= <?php echo json_encode($arrayDatum); ?>;
          var punkte 	= <?php echo json_encode($arrayPunkte);?>;
          
          data.addColumn('string');
          data.addColumn('number');
          
          for(var i=0;i<datum.length;i++){
        	  data.addRows([[datum[i],parseInt(punkte[i])]]);
  		  }
          
          var options = {
        		  	title: 'Punkterverlauf alle gespielten Partien',
		   			'width':1050,
                  	'height':500,
                  	chartArea:{width:980},
                  	legend:{position: 'none'},
                  	
                  	hAxis: {textStyle:{color: 'black',fontSize: 9},
                  			title: 'Datum des Match',slantedText:true, slantedTextAngle:35}
          };

          var chart = new google.visualization.ColumnChart(document.getElementById('punkteVerlauf'));

          chart.draw(data, options);
        }

      function drawChartKarteS(){
     		
    	  var karte 	= <?php echo json_encode($arrayKarte_KS); ?>;
          var punkte 	= <?php echo json_encode($arrayPunkte_KS);?>;
              
          	var data = new google.visualization.DataTable();
          	data.addColumn('string', 'Karte');
          	data.addColumn('number', 'Top 8 Kartenauswahl - Siege'); //Muss den selben Namen haben wie filterColumnLabel

          	for(var i=0;i<karte.length;i++){
            	  data.addRows([[karte[i],parseInt(punkte[i])]]);
      		  }
            
            var dashboard = new google.visualization.Dashboard(document.getElementById('kartenSiege'));

            var donutRangeSlider = new google.visualization.ControlWrapper({
              'controlType': 'NumberRangeFilter',
              'containerId': 'filter_div3',
              'options': {
                'filterColumnLabel': 'Top 8 Kartenauswahl - Siege', //Muss den selben Namen haben wie Column, siehe weiter oben in der selben Funktion
                'minValue': 1,
                'ui': {'labelStacking': 'vertical'}
              }
             });

            var pieChart = new google.visualization.ChartWrapper({
              'chartType': 'PieChart',
              'containerId': 'chart_div3',
              'options': {
              	
                'width': 700,
                'height': 700,
                'pieSliceText': 'label',
                'legend': 'none',
                is3D: true
              }
            });

            dashboard.bind(donutRangeSlider, pieChart);
            
            dashboard.draw(data);
     	}

      function drawChartKarteN() {

    	  var karte 	= <?php echo json_encode($arrayKarte_KN); ?>;
          var punkte = <?php echo json_encode($arrayPunkte_KN);?>;
             
         	var data = new google.visualization.DataTable();
         	data.addColumn('string', 'Karte');
         	data.addColumn('number', 'Top 8 Kartenauswahl - Niederlagen'); //Muss den selben Namen haben wie filterColumnLabel

         	for(var i=0;i<karte.length;i++){
           	  data.addRows([[karte[i],parseInt(punkte[i])]]);
     		  }
           var dashboard = new google.visualization.Dashboard(document.getElementById('kartenNiederlagen'));

           var donutRangeSlider = new google.visualization.ControlWrapper({
             'controlType': 'NumberRangeFilter',
             'containerId': 'filter_div4',
             'options': {
             'filterColumnLabel': 'Top 8 Kartenauswahl - Niederlagen', //Muss den selben Namen haben wie Column
             'ui': {'labelStacking': 'vertical'}
             }
           });

           var pieChart = new google.visualization.ChartWrapper({
             'chartType': 'PieChart',
             'containerId': 'chart_div4',
             'options': {
          	 'width': 700,
             'height': 700,
             'pieSliceText': 'label',
             'legend': 'none',
             is3D: true
             },
           hAxis: {title: "Hours", titleTextStyle: {italic: false}}
           });
			
           dashboard.bind(donutRangeSlider, pieChart);
           
           dashboard.draw(data);
      }

       function drawChartVolk(){
   		
    	   var data 		= new google.visualization.DataTable();
           var volk 		= <?php echo json_encode($arrayVolk_S); ?>;
           var punkte 		= <?php echo json_encode($arrayPunkte_S);?>;
           var neg 			= <?php echo json_encode($arrayPunkte_N);?>;
           
           var qoute = new Array(volk.length);
           
           data.addColumn('string','Völker');
           data.addColumn('number','Siege');
           data.addColumn('number','Niederlagen');
 		   data.addColumn('number','Sieg Quote');

 		  //Hier werden die Quoten berechnet.
 		  for(var i=0;i<volk.length;i++){
 			  qoute[i]=parseInt(punkte[i])/(parseInt(punkte[i])+parseInt(neg[i]))*100;
 		  }

           //Hinzuf�gen der Daten, erst den Namen des Volks, dann die Siege, Niederlagen und abschlie�end die Qoute in Prozent als String.
           for(i=0;i<volk.length;i++){
         	  data.addRows([[volk[i],parseInt(punkte[i]),parseInt(neg[i]),
         	           	  	{	
 	           	  				v: qoute[i], 
     				 			f: qoute[i].toFixed(2)+'%'
     				 		}
 	 			]]);
   		  }
           
           var options = {
        		    hAxis: {textStyle:{color: 'black',fontSize: 15},slantedText:true, slantedTextAngle:35},
        		    legend: 'true',
         		  	title: 'Anzahl der Siege/Niederlagen der jeweiligen Völker',
 		   			'width':1050,
                   	'height':500,
                   	chartArea:{width:'85%',height: '70%'},
                   	isStacked: true,
                   	vAxes:[
                   	      {title: 'Anzahl der Siege/Niederlagen'}, // Left axis
                   	      {title: 'Siegquote'} // Right axis
                   	    ],
                   	series: 
                       	{
                   		0:{ targetAxisIndex: 0 },
                   		1: { targetAxisIndex: 0},
                   		2: { type: "line", targetAxisIndex: 1}
                       	}
                    
                    
           };

           var chart = new google.visualization.ColumnChart(document.getElementById('Volk'));
           //chart.clearChart();
           chart.draw(data, options);
   	}

       

    function drawChartAll(){
    	drawChartPunkteVerlauf();
		drawChartKarteS();
		drawChartKarteN();
		drawChartVolk();
		
	}
	// Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChartAll);
    </script>

EDIT:

Hier nochmal im JSFiddle

https://jsfiddle.net/ujmmog4m/5/

die Zahlen werden im Pie Chart nicht korrekt platziert.

Hier ohne Tab
https://jsfiddle.net/uxars7yL/1/

kkapsner · 03. Juli 2015

Hades85 schrieb:
Ich habe die Funktion für die Tabs als erstes eingefügt und danach folgen die ganzen anderen Funktionen der verschiedenen Grafiken.

Und genau das ist falsch... wie ich oben schon geschrieben hab'...

Hades85 · 03. Juli 2015

kkapsner schrieb:
Und genau das ist falsch... wie ich oben schon geschrieben hab'...

Das Problem ist aber sobald ich die Funktionen wie du einfüge nach dem draw, wird meine css datei komplett ignoriert.

kkapsner · 03. Juli 2015

Das kann nicht sein - kannst du mal einen Link machen, wo wir uns die beiden Varianten ansehen können?

Hades85 · 04. Juli 2015

kkapsner schrieb:
Das kann nicht sein - kannst du mal einen Link machen, wo wir uns die beiden Varianten ansehen können?

Also der Fehler lässt sich mit JSFiddle nicht reproduzieren, da funktioniert alles wie gewünscht.

https://jsfiddle.net/ujmmog4m/6/

Der selbe code auf meiner Page

Anhang anzeigen 4613

Setze ich die Tab Funktion vor die Draws, kommt das bei raus. Er zeichnet alle Charts in alle Tabs.

ich habe die standard CSS benutzt, daher das etwas andere Layout

mikdoe · 04. Juli 2015

Der Link "Anhang 4613" zu deiner Page ist kaputt.

kkapsner · 04. Juli 2015

Hades85 schrieb:
Also der Fehler lässt sich mit JSFiddle nicht reproduzieren, da funktioniert alles wie gewünscht.

Dann gehe ich mal davon aus, dass das Problem bei irgendwas anderem liegt. Gib' uns einfach einen Link zu deiner Seite.

[FRAGE] Google Charts, überlappende Legenden aufgrund Tab Container

Hades85

New member

mikdoe

Moderator

Hades85

New member

mikdoe

Moderator

kkapsner

Super Moderator

Hades85

New member

kkapsner

Super Moderator

Hades85

New member

kkapsner

Super Moderator

Hades85

New member

kkapsner

Super Moderator

Hades85

New member

mikdoe

Moderator

kkapsner

Super Moderator