Automatic adjustment of line chart scales

Utilizing Google visualization charts in my Grails application has been a bit tricky. Specifically, when I add numerous rows of data to the line chart, it starts behaving strangely. Check out these screenshots https://i.sstatic.net/rWdwx.pnghttps://i.sstatic.net/PWzlT.png

Is there a way to prevent this odd scaling issue? I want the scaling to remain consistent whether there is a lot of data or none at all. I'm not concerned about the length of the chart expanding with more data, but rather the size of the hAxis labels and vAxis labels that seem to enlarge unnecessarily. Here is how I have set up the chart:

    visualization.draw(visualization_data, {width: 55840, title: 'Wykres wydajności', vAxis: {textPosition: 'in'}, hAxis: {direction: 1, slantedText: true, slantedTextAngle: 90}, pointSize: 10, chartArea: {top: 10, width: '50%', height: '50%', left: 10}, legend: {position: 'right'}});

Additionally, here's the styling I've applied:

        #linechart {
        overflow-x: scroll;
        overflow-y: hidden; 
        width: 100%;
        height: 500px;
    }
javascriptchartsgoogle-visualization

Answer №1

Adjust the textStyle setting on both axis to control the fontSize.

textStyle: {
  fontSize: 12
}

Please refer to the snippet below for a functioning example...

(though width: 55840 may appear excessively wide??)

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', '2005');
    data.addColumn('number', '2006');
    data.addRows([
       [new Date('01/01/2016'), 200, 210],
       [new Date('01/02/2016'), 190, 220],
       [new Date('01/03/2016'), 205, 200],
       [new Date('01/04/2016'), 220, 230],
       ...
      (data continues)
       ...
       [new Date('01/30/2016'), 190, 220],
       [new Date('01/31/2016'), 205, 200]
    ]);

    var options = {
      width: 55840,
      height: 800,
      title: 'Performance Chart',
      vAxis: {
        textPosition: 'in',
        textStyle: {
          fontSize: 12
        }
      },
      hAxis: {
        direction: 1,
        slantedText: true,
        slantedTextAngle: 90,
        textStyle: {
          fontSize: 12
        }
      },
      pointSize: 10,
      chartArea: {top: 10, width: '50%', height: '50%', left: 10},
      legend: {position: 'right'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('linechart'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linechart"></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

Setting the default value for a dropdown in Angular 2 using Kendo UI

I'm currently facing an issue with creating a dropdownlist using Kendo UI. The problem arises when I try to set a default selected value upon loading the screen. Referring to their documentation, my code is structured like this: HTML: <kendo-drop ...

javascriptangulardrop-down-menukendo-ui

Struggling to retrieve information from session storage to pass along to a PHP class

Is there a way to fetch the email of the currently logged-in user from sessionStorage and send it to a PHP file? I have tried implementing this, but it seems to be not functioning properly. Could you assist me in resolving this issue? <?php $mongoCl ...

javascriptphphtmlajaxgetelementbyid

What is the best approach to retrieve all items from DynamoDB using NodeJS?

I am trying to retrieve all the data from a DynamoDB table using Node.js. Here is my current code: const READ = async (payload) => { const params = { TableName: payload.TableName, }; let scanResults = []; let items; do { items = await ...

javascriptnode.jsexpressamazon-dynamodbes6-promise

The Node Express.js app is functioning properly when run locally, but displays the error "Cannot GET /" when running in a Docker container

My Node application has an Express.js server defined like this: const express = require('express') const SignRequest = require('./SignRequest/lambda/index.js') const VerifyResponse = require('./VerifyResponse/lambda/index.js') ...

javascriptnode.jsdockerexpress

Converting a database query result into a JavaScript variable: A step-by-step guide

I've been struggling with this problem for a day now and I feel like giving up. My main goal is to export the query result as a string (specifically dataString) so that I can easily import it as a string in my external .js file. module.exports.getKl ...

javascriptnode.jspostgresqlrequire

How can we ensure that a child directive in AngularJS shares the same data as its parent?

My child directive needs access to the same data as its parent pages. What would be the most effective method for sharing this data? Should the child directive fetch the data separately, or should the parent send it through attributes? ...

javascriptangularjs

Tips for utilizing the verticesNeedUpdate feature in threejs for refreshing the vertex positions of a 3D cube

let geometry = new THREE.BoxGeometry(500, 500, 500); scene.add(geometry); let edgesGeometry = new THREE.EdgesGeometry(geometry); scene.add(edgesGeometry); let material = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 2 }); scene.add(material); ...

javascriptthree.js

Unable to assign a scroll event delegation by using the "on" method

When attempting to delegate a scroll event in order for my element to maintain the same handler after being returned by an ajax call, I utilized the on method for delegation. $('body').on({ scroll:function(){ alert('scrolling&ap ...

javascriptjquerydelegates

What is the best approach to modifying the color of a menu item in the sidebar upon clicking it using Material-UI in a React application?

I am a beginner with this framework and my goal is to change the color when clicking on a Menu Item in the Sidebar. For example, clicking on the table component should change the table name and icon to white color. Could someone please help me figure out h ...

javascripthtmlcssreactjsmaterial-ui

Calculating the width of fluctuating DOM elements in AngularJS

It seems like most of my Angular questions are just me overlooking something really silly, so let's hope that's the case here too. Currently, I am working on a directive to manage the scrolling of a wide list of thumbnails. While it was working ...

javascripthtmlangularjs

Tracking mouse positions across an HTML document

I've been working on a project inspired by the voxel painter example on the three.js page. In this particular example, the mouse coordinates are utilized to move a roll-over helper that indicates where a box will be placed upon click. mouse.set((even ...

javascripthtmlcanvasthree.js

Testing the onClick event in React components using unit testing

I'm facing an issue with testing a Button wrapper component that utilizes a material-ui button. I tried writing some test code, but it's failing when trying to test the onClick event. index.tsx (ButtonWrapper Component) import React from &ap ...

javascriptreactjsunit-testingjestjs

Is it possible for me to listen to an AngularJS event using regular JavaScript, outside of the Angular framework?

Is it possible to listen to an event triggered in AngularJS using regular JS (outside of Angular)? I have a scenario where an event is being emitted using RxJS in Angular 2. Can I observe that event from pure JS? Here's some example pseudo code: imp ...

javascriptangulartypescriptrxjsdom-events

React Material UI Select component is failing to recognize scrolling event

Having some difficulty understanding how to detect a scroll event with a Select component using Material-UI. The Select has MenuProps={...}, and I want to listen for the scroll event inside it. I've tried putting onScroll within MenuProps={...}, but ...

javascriptreactjstypescriptreact-hooksmaterial-ui

"Learn how to showcase a picture in full-screen mode when the webpage is opened

I recently came across a script on Stack Overflow that allows me to select an image at random from an array. The script can be found here: Script to display an image selected at random from an array on page load However, I want to take this concept furthe ...

javascriptjqueryhtmlcss

Is it not odd that there are two '=>' symbols in an arrow function when there is typically only one? What could this possibly signify?

function updateStateValue(name) { return (event) => { setState({ ...state, [name]: event.target.checked }); }; } To view the full code example, visit CodeSandbox. ...

javascriptreactjsmaterial-ui

Display the keyboard and keep it visible when the password toggler is activated

Looking for help with my code that displays a password input with a toggler overlaying it. The ion-toggle directive is used to switch between the visible and hidden password inputs. <label class="item item-input"> <input placeholder="Passwor ...

javascriptangularjsinputionic-frameworksoft-keyboard

The HTML embed element is utilized to display multimedia content within a webpage, encompassing

Currently, I am working on a static website for my Computer Networks course. Students need to be able to download homework files in PDF format from the website. I have used embed tags to display the files online, but I'm facing an issue where the embe ...

javascripthtmlcss

Changing model to array in mvc 3

I have a model that I would like to convert into an array by clicking on a button to execute a JavaScript function. The function will then send the array to a controller that will either read and parse the data as JSON or simply as a Model. For example: ...

javascriptjqueryasp.net-mvcasp.net-mvc-3razor

Creating a feature in Vuejs that allows for real-time card updates on the screen by sending a post request to the database and

After sending a post request to the database, I need to refresh my cardData array which gets its value from a get request in order to see the changes. The current saveDraft() function adds values to the cardData array, but it requires a page refresh or c ...

javascriptvue.jspostgetrequest