Abbreviating Column Labels in Google Visualization

Is there a way to use the google visualization API to display column headers in an abbreviated form in a table, but show the full labels in a pie chart using the same dataset?

Check out this snippet of JavaScript:


//create the dashboard and table chart
var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));
table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart_div',
    'view': {'columns': ViewColumns},
    'options': {
        height: 400,
    },
});
dashboard.bind(table);

//bind the data to the table
baseData = new google.visualization.DataTable(response);
dashboard.draw(baseData);

//add a column chart bound to the same data
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'column_chart_div',
'options': {
    isStacked: true,
    height: 400,
    width: 800,
},
});
columnChart.setDataTable(table.getDataTable());
columnChart.draw();

HTML:


<div id="dashboard_div">
<div id="column_chart_div" class="inline"> </div>
<div id="chart_div"></div>

Answer №1

th.google-visualization-table-th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px;  
}

th.google-visualization-table-th:hover {
  white-space: nowrap;
  overflow: visible;
}

I wish I could make the full text appear on hover over the adjacent column, but unfortunately, I haven't been successful in achieving that yet.

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

AngularJS: Issue with JQuery Slider not Updating Scope Value

I am currently working on a project using AngularJS and I have integrated a jQuery slider into it. However, I am facing an issue where I need to change the value of a select box which is defined in a $scope array, but the functionality is not working as ex ...

Adding a script to the head of a Next.js page by using the Script component

I need assistance with inserting tracking code from Zoho application into the Head section of each page in my Next.js application. I am currently using a _document.tsx file and following the instructions provided by Next.js regarding the use of the Next.js ...

Exploring AngularJS Navigation in Windows 8 App Store Applications

Hello, I recently started learning about developing Windows Store apps. I found a way to incorporate AngularJS into my Windows 8 store app by making some adjustments in the AngularJS library. However, I'm now struggling with implementing AngularJS rou ...

Tips for combining data from various sources in GraphQL

Need some guidance on setting up GraphQL as a beginner. I am facing challenges in efficiently setting up resolvers for my schema, especially when dealing with fields from different backend APIs. type User { name: String address: String dateOfBirth ...

What are the steps for initializing a session in Vue.js with Django upon a successful login?

Upon successful login, I want to redirect to a page indicating success and also include a session. How can this be achieved? I am using HTML with Vue.js for the front end and Django for the back end. Below is my Vue.js script for the login: <script> ...

The Redux store is duplicating the state across different reducers, causing it to appear twice

Having Trouble Viewing Different States for Two Reducers in Redux DevTools In my React project, I am attempting to incorporate a second reducer using Redux to gain a better understanding of the overall state. However, when I inspect the state in Redux Dev ...

Issue with hashtag in regular expressions

Looking for a way to identify and link hashtag words with an anchor tag? Here's a snippet showcasing the concept: <p class="display"></p> var content = "I enjoy #blueSky. My favorite color is #green. #sky is amazing"; ...

Material-UI: Avoid onClick event firing when clicking on an element that is overlapped by another in a sticky Table

I have a unique setup in my table where each row, including the header row, begins with a checkbox. This header row has a sticky property. As I scroll through the table, rows start to move behind the header row. If I try to click the checkbox in the heade ...

Monitor the change in FileReader().readyState using AngularJS

Below is the AngularJS code I have written to read a local file. var files = document.getElementById("file"); files.addEventListener("change", handleFile, false); function handleFile(event) { SpinnerService.upload(); // Display loading spinner ...

Encountering an issue when making a POST request using JSON data

I've encountered an issue with my server.js file code. I'm trying to push JSON content into the user object, but I keep getting an error message. Can someone please help me identify where I've gone wrong? const express = require('expre ...

encountering the issue of not being able to assign a parameter of type 'string | undefined' to a parameter of type

Seeking help with the following issue: "Argument of type 'string | undefined' is not assignable to parameter of type" I am unsure how to resolve this error. Here is the section of code where it occurs: export interface IDropDown { l ...

Transform an asynchronous callback into an asynchronous generator format

I have the following function from a third-party package that I am unable to modify async function runTransaction(callback) { const client = await createClient(); try { await client.query("BEGIN"); await callback(client); } ...

Issue encountered in transmitting information from JSP to servlet

I am facing an issue with receiving data from JSP to servlet. I understand that I need to serialize this data using JSON. In my JSP, I have written the following JavaScript code: var myJSONText = JSON.stringify(items); document.getElementById('test&a ...

Add a Time Stamp to the Ajax URL Query

I'm attempting to add a timestamp to my URL that is being called by AJAX every 5 seconds. The purpose is to prevent caching in Internet Explorer browsers. However, it seems like the AJAX call is not functioning properly now without any error messages. ...

The property this.props.Values is not defined

I'm facing an issue with a page. Specifically, I am working with the value: this.props.CategoriesList. This value represents a list of categories. The problem is that when I click on a button to navigate to the page where this value is used, it shows ...

jPlayer calculates the "duration" as 1,440 minutes on iOs devices for all mp3 files

My homemade webpage is designed for playing mp3s and viewing pdfs. I'm using jPlayer v 2.9.2 to play the mp3s, which works fine on PC but encounters issues on iPhone. The duration values are incorrect, showing "1439:59" remaining for all files, causin ...

The findOne() function is providing the complete model instead of a specific document as expected

When using findOne() to extract a document, the correct result is printed when the returned value is logged. However, when looping over it, the model is printed instead of the original document stored in the City table: { _id: 62e135519567726de42421c2, co ...

Issue with Material-ui IconButton's edge properties not functioning as expected

Is there a way to position the delete icon on the right side of the screen? It seems like using edge= "end" is not working as expected. If you'd like to take a look, here is the sandbox link: https://codesandbox.io/s/admiring-silence-vwfoe? ...

Using AJAX to communicate with a MySQL database and create a countdown timer using JavaScript

I have been trying to display data from a database using Ajax and incorporate countdown timers with times also fetched from the same database. It has been a struggle for me for almost 24 hours now. You can check out the main code here where you will notic ...

What is the best way to loop through a group of WebElements, and only log the results that contain a specific substring?

In my test case, I'm utilizing Mocha to handle the scenario. The test appears to be passing successfully, however, no logs are being printed... it('Is 'Mooooooo!!!! I2MaC0W' a Substring in Results?', function() { this.timeout(50 ...