Displaying names at the top of charts using Google Charts

Currently, I am working on a project involving column charts to display data.

I want to be able to display the name of each column directly on top of it.

Here is an example of how my array looks:

0: (3) ["Date", "United State", "Australia"] 
1: (3) ["Week 48", 66, 67]
2: (3) ["Week 02", 66, 0]

Although I tried adding { role: 'annotation' } to my header, I did not see the desired outcome.

What I am aiming for is something similar to this image. However, I am unsure of where to begin. Any suggestions or assistance would be greatly appreciated.

https://i.sstatic.net/XumLV.jpg

javascriptgoogle-visualization

Answer №1

In order to add annotations to each series column, the annotation column should directly follow.

The array structure should be as shown below:

["Date", "United States", {role: 'annotation'}, "Australia", {role: 'annotation'}],
["Week 48", 66, "United States", 67, "Australia"],
["Week 02", 66, "United States", 0, "Australia"]

For a demonstration, refer to the working snippet provided:

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataTable = google.visualization.arrayToDataTable([
    ["Date", "United States", {type: 'string', role: 'annotation'}, "Australia", {type: 'string', role: 'annotation'}],
    ["Week 48", 66, "United States", 67, "Australia"],
    ["Week 02", 66, "United States", 0, "Australia"]
  ]);
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(dataTable);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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

ag-grid Server Side pagination function to enable independent setting of last row

Currently, I am utilizing ag-grid, Angular 7, and implementing a server-side datasource with pagination. In my API setup, I initiate two requests: the first request provides the total number of items in the table, while the second fetches the data for the ...

javascriptangularag-grid

What steps should I take to ensure my bootstrap form is fully responsive?

I'm struggling to make my form responsive. It looks fine on desktop, but not on mobile. As a beginner, I feel lost... Any help with this would be greatly appreciated. Here's the code snippet: <div class="container"> <div class="row ...

javascripthtmlcssbootstrap-4

Altering the hexadecimal code to adjust the color of a string

I have come across several posts like this one, but none of them have been able to solve my issue. const HexPattern = /(#[0-9a-f]{6})(\s*[\w,]+\s*)/gi function parseColors(str) { return str.replace(HexPattern, (s, g0, g1) => `<span ...

javascripthtmljquery

Utilizing a loop in conjunction with the array_push() function to dynamically insert elements and generate JSON

My goal is to generate JSON data in a specific format: [{"name":"AS","data":["150","250","300"]},{"name":"JS","data":["175","180","210"]},{"name":"MS","data":["100","75","200"]}] Here is the script I have developed for this task: $c = mysql_query("SEL ...

javascriptphpjsonhighcharts

Bootstrap 5 - centering "padding" both internally and externally within the accordion

Need help aligning three Boostrap 5 grids: Header outside of accordion Overview in accordion header Details in accordion body The accordion header has margins and padding on the left and right, and the collapse icon also occupies some space. I want the ...

javascripthtmlcssbootstrap-5

Tanstack onMutate Callback Fails to Activate Modal on React State Update

Currently, I am in the process of developing a Dapp and I need to incorporate transaction tracking. One issue I am facing is with trying to display a modal window when the approval setting process begins. Despite attempting to alter the isOpen state of the ...

javascriptreactjstanstackreact-query

When capturing photos using h5 on iOS devices, the browser may experience a flash back issue

I have been searching Baidu and Google for a while now, but I still haven't found a solution. Here is the specific issue: When using h5 to take photos on iOS systems, the browser flashes back. HTML Code <img src="xxx" onclick="sta ...

javascripthtmlvue.js

Looking to automatically adjust the browser viewport when the iOS keyboard pops up?

Is there a way to keep the conversation area completely in view when the keyboard displays on iOS web browsers like Safari and Chrome? I am trying to create an app-like chatting experience, but the viewport keeps getting partially pushed out of view when t ...

javascriptioscsssafari

Struggling to extract specific data from a table using angular.js

My table includes Roman numerals (i.e. I, II, III, ......VIII) for filtering using Angular.js. However, I am facing an issue where the filtration process works for some values but not for others. Please review my code below: subject.html: <table cl ...

javascriptphpangularjsfilter

The Express.js application functions properly on a local environment, but encounters issues when deployed on Heroku

Currently, I am experiencing an issue with deploying a music visualizer that I created. It seems to work perfectly in all scenarios except when I click on a song to play from the search bar, where I keep encountering a '503 (Service Unavailable)' ...

javascriptnode.jsexpressheroku

Error alert: The "moment" reference is absent when utilizing moment in Laravel alongside Vue.js

Using Laravel 5, I have installed Moment.js through the npm install command. I am attempting to incorporate it into one of my views with Vue.js, but no matter what I try, I keep getting the error "moment is not defined." If I use require, I get "require is ...

javascriptlaravel-5vue.jsmomentjs

GWT: The setInnerHTML method decodes attribute values before setting them

Upon receiving this specific string from the server-side: <a onclick="doit('&#39;')">...</a>, my goal is to set it as the inner HTML of an element. However, when attempting to use Element#setInnerHTML, the string ends up converti ...

javascriptgwtescapinghtml-entities

Issue with opening image modal when clicking on images, JavaScript seems to be malfunctioning

I created a gallery of modal images that I want to open when clicked, but for some reason it's not working as expected. What I'm trying to achieve is passing the image ID of each image to JavaScript when they are clicked so that the script can th ...

javascripthtmlcssimagemodal-dialog

Issues arise when trying to render text within Javascript as "NOTICE", however PHP is able to display it seamlessly without any hiccups

PHP uses metadata from image files to create text and stores it in a variable with the same name as the IMG source. No issues there. JavaScript is responsible for displaying the gallery, allowing users to scroll and enlarge images. While enlarging an imag ...

javascriptphpjqueryhtml

Check out this Angular demonstration page!

Looking to demonstrate the features of my Angular page using a plugin like intro.js, however, only part of the page is shown upon loading. Users are greeted with an input box to fill out an id and submit before the rest of the page is displayed after makin ...

javascriptjqueryangularjsdemo

Creating a Task Manager with useReducer and MongoDB - Issue: "Error message: todo.map is not a function"

Recently, I attempted to create a basic Todolist application using nodejs and MongoDB. To simplify the actions and enhance my understanding of it, I utilized useReducer. Unfortunately, I encountered an error stating 'todos.map is not a function' ...

javascriptnode.jsreactjsmongodbuse-reducer

When I decide to incorporate both BootstrapVue and Vuetify CSS frameworks into a single project

Can I incorporate two CSS frameworks into my current Nuxt.js project? Does anyone have any insight on why it might be beneficial to use two different CSS frameworks in a Vue.js project? Please provide some guidance on this matter. I am looking to optimize ...

javascriptvue.jsvue-test-utils

Combining objects using ES6 import/export with async/await functionality

I am facing a situation where I have two files named config.js and config.json and my goal is to combine them into one object and then export it: config.json { "c": 3 } config.js import fs from "fs"; import fse from "fs-extra& ...

javascriptnode.jsasync-awaitfses6-modules

What is the best way to determine if a variable is defined in a Node.js environment?

Currently, I am developing a program in node.js, which is essentially JavaScript. Within my code, there is a specific variable: var query = azure.TableQuery... However, I have noticed that sometimes this particular line of code does not execute. Here i ...

javascriptnode.js

"Populate the input fields in a table with the data retrieved from the AJAX request's

For my current project, I am utilizing an ajax request to select data from a database. The selected data includes the area and floor number of a building, formatted as follows: "storey": [{ "storeyno": "1st Floor", &qu ...

javascriptphpjquerymysqlajax