Google Diagram mehrmals ändern

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

20:19, 1.7.2013

Hallo, ich wollte soeben was mit Google Diagrammen ausprobieren, und hab den Code von

https://google-developers.appspot.com/chart/interactive/docs/quick_start

genommen, aber ihn so abgeändert, damit ich zwischen den beiden Varianten hin und her swichen kann. Das heisst, ich hab 2 Buttons und einen Eventlistener per click. Das Funktioniert auch, das erste mal, aber sobald ich beide ein mal aufgerufen hab, kann ich nicht mehr wechseln. Weiss jemand woran das liegt und wie ich es beheb?

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

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

      // Set a callback to run when the Google Visualization API is loaded.
      google.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');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // 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 BarsChart = new google.visualization.BarChart(document.getElementById('chart_div'));
        var PieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
        
        var Pie = document.getElementById("PieButton");
        	Pie.addEventListener("click", function (){PieChart.draw(data, options)}, false);
        var Bars = document.getElementById("BarsButton");
        	Bars.addEventListener("click", function (){BarsChart.draw(data, options)}, false);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    <button id="PieButton">Pie</button>
    <button id="BarsButton">Bars</button>
  </body>
</html>

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

n0tiert

n0tiert hat kostenlosen Webspace.

20:45, 1.7.2013

tausch das mal aus:

// Instantiate and draw our chart, passing in some options.
        var BarsChart;
        var PieChart;
        
        var Pie = document.getElementById("PieButton");
        	Pie.addEventListener("click", function (){
			PieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
			PieChart.draw(data, options)
			}, false);
        
		var Bars = document.getElementById("BarsButton");
        	Bars.addEventListener("click", function (){
			BarsChart = new google.visualization.BarChart(document.getElementById('chart_div'));
			BarsChart.draw(data, options)
			}, false);

würde aber das ganze in verbindung mit jQuery machen...

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city