kostenloser Webspace werbefrei: lima-city


Google Diagram mehrmals ändern

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    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>
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

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

Login zum Webhosting ohne Werbung!