Display specific values on Google Charts axes

I'm working with a chart that contains numerous dates. I'm wondering if there is a way to display only specific titles on the chart. For instance, showing the first, last, and every fifth date between them?

https://i.sstatic.net/2P4rw.png

Answer №1

Utilize the ticks configuration setting for customizing axis labels

To extract values from the data, apply the getValue function on the DataTable
getValue requires two arguments, row & column

Both rows and columns are zero-indexed, with the first being represented as 0
data.getValue(0, 0)

To obtain the last value in the initial column, use getNumberOfRows() - 1

data.getValue(data.getNumberOfRows() - 1, 0)

To retrieve every fifth element, leverage the modulus operator %,
It is important to note that this may include the first element,
and potentially the last element, depending on the number of rows...

// include every fifth
var tickMarks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  if (i % 5 === 0) {
    tickMarks.push(data.getValue(i, 0));
  }
}

Refer to the following functional code snippet, which only adds the first and last...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Units');
    data.addRows([
      [new Date(2016,0,1), 100],
      [new Date(2016,0,3), 120],
      [new Date(2016,0,30), 110],
      [new Date(2016,1,1), 170],
      [new Date(2016,1,10), 180],
      [new Date(2016,1,25), 110],
      [new Date(2016,2,1), 170],
      [new Date(2016,2,14), 171],
      [new Date(2016,2,20), 172],
      [new Date(2016,3,12), 173],
      [new Date(2016,3,16), 174],
      [new Date(2016,3,19), 175],
      [new Date(2016,4,12), 176],
      [new Date(2016,4,16), 177],
      [new Date(2016,4,19), 178],
      [new Date(2016,5,12), 179],
      [new Date(2016,5,16), 180],
      [new Date(2016,5,19), 181],
      [new Date(2016,6,12), 190],
      [new Date(2016,6,16), 192],
      [new Date(2016,6,19), 196],
      [new Date(2016,6,24), 192],
      [new Date(2016,7,12), 190],
      [new Date(2016,7,16), 192],
      [new Date(2016,7,19), 196]
    ]);

    var tickMarks = [];

    //add the first one
    tickMarks.push(data.getValue(0, 0));

    //add the last one
    tickMarks.push(data.getValue(data.getNumberOfRows() - 1, 0));

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, {
      hAxis: {
        format: 'M/d/yy',
        ticks: tickMarks
      }
    });
  },
  packages: ['corechart']
});
<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

Create eye-catching banners, images, iframes, and more!

I am the owner of a PHP MySQL website and I'm looking to offer users banners and images that they can display on their own websites or forums. Similar to Facebook's feature, I want to allow users to use dynamic banners with links. This means the ...

Solving the puzzle of complex polymorphic object model deserialization in Java Jackson: Facing the JsonMappingException error – Unexpected token (START_OBJECT) instead

I am working with a hierarchy of objects described as follows: A B extends A C extends B D extends B E extends C F extends A and contains a reference to A The annotation for class A is defined as: @JsonTypeInfo(use=JsonTypeInfo.Id.CLASS,include=Jso ...

Issue with SetTimeout not functioning properly on initial use within socket.io

Currently, I am trying to come up with a method to retrieve an IP address from a node server that is hosted on a dynamic IP. The issue I am facing is that the setTimeout function does not seem to work properly on the server side during the initial launch. ...

What is the easiest way to transform this json data into plain text format?

Snippet: if (message.content.startsWith(config.prefix + 'shop')) { const shop = LabyMod.getShop('all').then(shop => shop.map((sh) => sh.name)); const awaitShop = await shop console.log(JSON.stringify(awaitShop)) ...

Incorporating the non-typescript npm package "pondjs" into Meteor applications using typescript files

Implementing the Pondjs library into my project seemed straightforward at first: meteor npm install --save pondjs However, I'm encountering difficulties when trying to integrate it with my Typescript files. The documentation suggests: In order ...

Is there a way to adjust the padding temporarily?

Important Note: Despite the misleading title of my question, it doesn't accurately reflect my actual query (sort of). Below is the code snippet in question: .one{ background-color: gray; } .two{ padding: 20px; } <div class = "one"> < ...

React's useEffect delay instability

Currently, I am in the process of creating a Pomodoro clock. My approach involves utilizing the useEffect and setTimeout functions to develop countdowns. Initially, everything appeared to be running smoothly until I noticed a delay ranging from 30ms to 50m ...

The conundrum of jsPDF's image compatibility

I am attempting to generate a PDF document on the client-side using the jsPDF library. The code I have written is as follows: <script type="text/javascript" src="libs/base64.js"></script> <script type="text/javascript" src="libs/sprintf.js" ...

Center the popover over the element

I am in the process of creating a resource map using SVGs. My goal is to display a popover in the center of the element when a user clicks on it. However, due to CSS rotation of the map, the traditional techniques such as the one mentioned here have not be ...

Guide on showcasing an alert notification when the data is already existing within an array through javascript

Need help with displaying an alert message in JavaScript for duplicate values in an array? var names = []; var nameInput = document.getElementById("txt1"); var messageBox = document.getElementById("display"); function insert() { names. ...

The process of loading and saving extensive data to the local storage of a user's Firefox browser involves extensive reading and writing operations

Our team has developed a sophisticated HTML5 offline application that houses a substantial amount of data, totaling tens of megabytes. We are looking for a way to allow users to save and retrieve copies of this data on their disk. While we have made some ...

Restoring the dropdown list in a React Material-UI Autocomplete widget

We are currently designing an autocomplete feature using Material UI for our React application. Our objective is to dynamically generate the dropdown list as part of a search function, which is functioning correctly. However, we are facing an issue where t ...

The imported path is not found in Tsconfig

Hey there! I've been working on getting my project's imports to play nice with typescript import paths. Every time I encounter this error : Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'app' imported from dist/index.js It seems l ...

The Naming Convention for NPM Scripts

In my package.json, I have a script that looks similar to this: { ... scripts: { ... "testdb:e2e": "TESTDB_ENV='...' gulp mocha:e2e:backend && gulp mocha:e2e:frontend" } ... } I am interested in adding a s ...

Tell me the permissions that a user possesses in discord.js

I need help creating a command using Discord.js that can display a user's permissions. For instance, the command could be $permissions @user and it should output something like: "User permissions within this guild: " I'm unsure if ...

Update the CSS for InputLabel

I have a drop-down list that I want to customize. The issue is illustrated below: https://i.sstatic.net/hzVtl.png I'm looking to center the text "choose format" within the field and adjust the font size. return ( <FormControl sx={{ m: 1 ...

add information to a JavaScript "JSON array"

When working in JS (specifically node/js but applicable to general JS), one common issue arises. Upon receiving JSON data from the server, there is often a need to modify it before presenting it on the view. How should this be approached? Creating additi ...

Tips for incorporating routes in Polka.js in a way that resembles the functionality of express.Route()

One of the challenges I am facing is trying to import route logic from another file in my project. While using Express.js, this could be done easily with express.Route(). However, when attempting polka.Route(), an error occurs stating that Route doesn&apos ...

What is the best way to divide a single object in an array into multiple separate objects?

In my dataset, each object within the array has a fixedValue property that contains category and total values which are fixed. However, other keys such as "Col 2", "Col 3", etc. can have random values with arbitrary names like "FERFVCEEF erfe". My goal is ...

Code remaining stable post-execution of promise

I'm facing a problem with my Node.js application where I'm using promise-mysql and bluebird packages to make calls to a MySQL database. Despite following tutorials and successfully querying the database, I keep encountering a timeout error. The p ...