Utilizing Google chart tools allows you to incorporate multiple charts onto a single page

<html>

<head>
  <script type="text/javascript" src="https://www.google.com/jsapi">
  </script>
  <script type="text/javascript>
    google.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.setOnLoadCallback(drawAll);

    function drawAll() {
      drawChart();
      drawChart2();
    }

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);

      var options = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };

      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(data, options);
    }

    function drawChart2() {
      var data2 = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);

      var options2 = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };

      var chart2 = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart2.draw(data2, options2);
    }
  </script>
</head>

<body>
  <div id="donutchart" style="width: 900px; height: 500px;"></div>
</body>

</html>

I wish to include multiple charts on the same page and explore various chart types provided by Google Chart Tool from this URL:

javascriptajaxxmlxsltxpath

Answer №1

Simply include an additional div :)

<html>

<head>
  <script type="text/javascript" src="https://www.google.com/jsapi">
  </script>
  <script type="text/javascript">
    google.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.setOnLoadCallback(drawAll);

    function drawAll() {
      drawChart();
      drawChart2();
    }

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);

      var options = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };

      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(data, options);
    }

    function drawChart2() {
      var data2 = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);

      var options2 = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };

      var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2'));
      chart2.draw(data2, options2);
    }
  </script>
</head>

<body>
  <div id="donutchart" style="width: 900px; height: 500px;"></div>
  <div id="donutchart2" style="width: 900px; height: 500px;"></div>

</body>

</html>

Answer №2

Simply insert one more div

<html>

<head>
  <script type="text/javascript" src="https://www.google.com/jsapi">
  </script>
  <script type="text/javascript">
    google.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.setOnLoadCallback(drawAll);

    function drawAll() {
      drawChart();
      drawChart2();
    }

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);

      var options = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };

      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(data, options);
    }

    function drawChart2() {
      var data2 = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);

      var options2 = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };

      var chart2 = new google.visualization.PieChart(document.getElementById('donutchart1'));
      chart2.draw(data2, options2);
    }
  </script>
</head>

<body>
  <div id="donutchart" style="width: 900px; height: 500px;"></div>
  <div id="donutchart1" style="width: 900px; height: 500px;"></div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance User Experience with Dynamic Scroll Page Transition

Hey everyone! I've been working on revamping a website and stumbled upon this fascinating page transition that I would love to replicate. However, I haven't been able to find a JQuery library that can achieve this effect. Does anyone have any i ...

javascriptjquery

What is the best way to change a Vue prop using an external JavaScript function?

In my current project, I am developing a website utilizing PHP templates and jQuery. One of the features includes a table built with Vue: let vuetablecomponent= new Vue({ components: { ManualTable }, }).$mount('[data-vue-app=manualtable]'); I ...

javascriptvue.js

saving a JSON element in a JavaScript array

Currently, I am utilizing AJAX to fetch data from a database using PHP and then converting it into JSON format. <?php echo json_encode($data); ?> This is the AJAX function being used: ajaxCall("getdata.php", container, function (data) { var co ...

javascriptphpjqueryjsonajax

Sinatra application encounters internal server error resulting in AJAX request failure

I'm currently developing a game where a user's guess is submitted to the backend for evaluation and then feedback is returned in the form of an array. To achieve this, I am utilizing AJAX to fetch a set of data from a Sinatra backend. Below is th ...

jqueryrubyajaxsinatra

Guide to displaying a server response within a React application

Is there a way for me to synchronize the data retrieved from the server with the template in my component? I am trying to fetch data from the server, perform some parsing, and then display it in a table within the component. However, the issue is that the ...

javascriptreactjs

Guide on creating a Jasmine test for a printer utility

Currently, I am working on writing a Jasmine test for the print function shown below: printContent( contentName: string ) { this._console.Information( `${this.codeName}.printContent: ${contentName}`) let printContents = document.getElementById( c ...

javascriptangulartypescriptjasmine

Achieve a clockwise rotation of an object back to its original position using Three.js

As a novice in the world of THREE.js, I am currently working on an animation that spins a 3D model around its Y axis. However, for my website project, I need to smoothly rotate it back to its original position within a span of 90 frames. Despite trying dif ...

javascriptthree.js

Utilizing JavaScript to Load an HTML File in a Django Web Development Project

Having a django template, I aim to load an html file into a div based on the value of a select box. The specific target div is shown below: <table id="template" class="table"> Where tables are loaded. </table> There ex ...

javascripthtmldjango

Why won't my code work with a jQuery selector?

I'm struggling to retrieve the value from a dynamically generated <div> using jQuery. It seems like the syntax I'm using doesn't recognize the div with an id tag. The HTML code is stored in a variable, and below is a snippet of code w ...

jqueryhtmlajaxtypescriptpowerbi

The asynchronous nature of how setInterval operates

I am working with a setInterval function that executes asynchronous code to make calls to the server: setInterval(()=> { //run AJAX function here }, 5000); In scenarios where the server does not receive a response within 5 seconds, there is a like ...

javascriptajaxecmascript-6setinterval

Steps for aligning items in a column horizontally in Bootstrap 5

After creating a Grid system with only 2 columns, I placed text in the first column and a carousel in the second. Despite setting a custom size for the carousel image, I'm facing difficulty centering it horizontally within the column. .title-sec { ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

PHP script to refresh a div when a file is changed

I am working with a Raspberry Pi that is connected to buttons, allowing me to change the value in a file named "setting.txt". The contents of this file may be as simple as: 42 The buttons trigger a process that updates this file (for example, changing 42 ...

javascriptphphtmlajax

Utilizing unique layouts for specific views in sails.js and angular.js

I am currently working on a Sails.js + Angular.js project with a single layout. However, I have come across different HTML files that have a completely different layout compared to the one I am using. The layout file I am currently using is the default la ...

javascriptangularjsnode.jssails.js

What sets apart `npm install --save-dev gulp-uglify` from `npm install gulp-uglify`?

I'm feeling perplexed regarding the npm installation process. Based on what I've gathered, there are several options available to me when installing modules: The -g option which saves modules globally --save-dev No arguments. Could someone cl ...

javascriptnpm

What are the steps to transform a blob into an xlsx or csv file?

An interesting feature of the application is the ability to download files in various formats such as xlsx, csv, and dat. To implement this, I have utilized a library called fileSaver.js. While everything works smoothly for the dat/csv format, there seems ...

javascriptcsvdatasetblobxlsx

Switch the class between two elements using a link

Here is the HTML code I am working with: <a href="javascript:"> <img class="remove" src="images/remove.png" /> </a> <div class="content"> <h2>About</h2> <p>We are Sydney Wedding Photographers and have ...

javascriptjqueryhtmlcss

Tips for integrating google's api.js file into my vue application

Currently, I am in the process of integrating Google Calendar into my Vue project. The steps I am following can be found at this link. Additionally, I came across an example code snippet at this URL. This is how my Vue file looks: <template> <d ...

javascriptvue.jsgoogle-calendar-api

Dynamically transform array values into an object

I'm interested in developing an algorithm that can replicate values for a specific object schema, as shown in the sample data below: let layer1 = {name: 'x', values: [{_color: '#996666', time: 0, tween: 'quadEaseIn& ...

javascriptarraysloopsdynamic-programmingjavascript-objects

Having trouble successfully sending a variable through a JavaScript form

Within my HTML file, I have a form with various input fields and radio buttons that allow users to enter search parameters. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href='https:// ...

javascriptnode.jsforms

Using JavaScript to Transmit URL

Imagine I have a URL similar to this: http://localhost:8000/intranet/users/view?user_id=8823 All I aim to achieve is to extract the value from the URL using JavaScript, specifically the user_id (which is 8823 in this instance), and transmit it through an ...

javascripthtmliframe