Error: Google chart for Google Maps is not displaying text every 1 unit as expected

Question

Error: Google chart for Google Maps is not displaying text every 1 unit as expected

I am looking to display all the hAxis labels in my chart. Due to the extensive length of the code exceeding 4000 lines, I will only include what I consider to be crucial:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < results.length; i++) {
  if(i%10==0)
  {
      data.addRow(['' + i / 10 + '', elevations[i].elevation]);
  }
  else
  {
      data.addRow([null, elevations[i].elevation]);
  }
}
document.getElementById('chart_div').style.display = 'block';
chart.draw(data, {
  height: 250,
  colors: ['#F00'],
  legend: 'none',
  titleY: 'Elevation (m)',
  titleX: 'Distance',
  hAxis: {
      slantedTextAngle: 90,
      showTextEvery: 1,
  }
});

The current outcome can be seen here: https://i.sstatic.net/Fq2kz.png

To achieve my desired result, I need the Distance of the hAxis to display numbers from 0 to 7 consecutively, with an appropriate font-size and angle.

Note: I prefer to have no title for every column except multiples of 10. Any solution that omits adding a title to those specific columns would also be acceptable!

javascript google-maps google-visualization

Answer 1

Answer №1

Simply set hAxis.showTextEvery to 10.

To exclude the values of the first column from tooltips, utilize a tooltip-column.

If you choose the hAxis.slantedTextAngle option, also enable the hAxis.slantedText option with a value of true.

google.load('visualization', '1', {
    packages: ['corechart']
  });
  google.setOnLoadCallback(drawBasic);

  function drawBasic() {
    //some sample data
    var elevations = [];
    for (var i = 0; i < 300; ++i) {
      elevations.push({
        elevation: 100 * Math.random()
      })
    }
    var results = elevations;
    
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sample');
    data.addColumn('number', 'Elevation');
    data.addColumn({
      type: 'string',
      role: 'tooltip'
    });
    for (var i = 0; i < results.length; i++) {
      data.addRow([String(i / 10),
        elevations[i].elevation,
        String(elevations[i].elevation)
      ]);
    }

    document.getElementById('chart_div').style.display = 'block';
    var chart = new google.visualization.ColumnChart(
      document.getElementById('chart_div'));
    chart.draw(data, {
      colors: ['#F00'],
      legend: 'none',
      height: 250,
      titleY: 'Elevation (m)',
      titleX: 'Distance',
      
      hAxis: {
        slantedTextAngle: 90,
        slantedText: true,
        showTextEvery: 10,
      }
    });
  }

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div"></div>

Answer 2

Simply set hAxis.showTextEvery to 10.

To exclude the values of the first column from tooltips, utilize a tooltip-column.

If you choose the hAxis.slantedTextAngle option, also enable the hAxis.slantedText option with a value of true.

google.load('visualization', '1', {
    packages: ['corechart']
  });
  google.setOnLoadCallback(drawBasic);

  function drawBasic() {
    //some sample data
    var elevations = [];
    for (var i = 0; i < 300; ++i) {
      elevations.push({
        elevation: 100 * Math.random()
      })
    }
    var results = elevations;
    
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sample');
    data.addColumn('number', 'Elevation');
    data.addColumn({
      type: 'string',
      role: 'tooltip'
    });
    for (var i = 0; i < results.length; i++) {
      data.addRow([String(i / 10),
        elevations[i].elevation,
        String(elevations[i].elevation)
      ]);
    }

    document.getElementById('chart_div').style.display = 'block';
    var chart = new google.visualization.ColumnChart(
      document.getElementById('chart_div'));
    chart.draw(data, {
      colors: ['#F00'],
      legend: 'none',
      height: 250,
      titleY: 'Elevation (m)',
      titleX: 'Distance',
      
      hAxis: {
        slantedTextAngle: 90,
        slantedText: true,
        showTextEvery: 10,
      }
    });
  }

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div"></div>

Answer 3

Answer №2

After experimenting with both ColumnChart and Bar from Google chart's options, it became clear that neither worked perfectly for all scenarios. Here is the solution that proved to be the most effective:

For loading the API:

google.load('visualization', '1', {packages: ['corechart']});

When creating the LineCHart:

chart = new google.visualization.LineChart(document.getElementById('chart_div'));

And then specifying the options later in the code:

var options = {
  legend: { position: "none" },
  height: 250,
  colors: ['#F00'],
  hAxis: {
      title: 'Distance (<%= Event.DistanceUnits %>)',
      showTextEvery: 10
  },
  vAxis: {
      title: 'Altitude(m)'
  }
};

Lastly, when displaying the results, I included all of them in the visualization:

for (var i = 0; i < results.length; i++) {
    data.addRow(['' + i / 10 + '', Math.round(elevations[i].elevation)]);
}

Answer 4

After experimenting with both ColumnChart and Bar from Google chart's options, it became clear that neither worked perfectly for all scenarios. Here is the solution that proved to be the most effective:

For loading the API:

google.load('visualization', '1', {packages: ['corechart']});

When creating the LineCHart:

chart = new google.visualization.LineChart(document.getElementById('chart_div'));

And then specifying the options later in the code:

var options = {
  legend: { position: "none" },
  height: 250,
  colors: ['#F00'],
  hAxis: {
      title: 'Distance (<%= Event.DistanceUnits %>)',
      showTextEvery: 10
  },
  vAxis: {
      title: 'Altitude(m)'
  }
};

Lastly, when displaying the results, I included all of them in the visualization:

for (var i = 0; i < results.length; i++) {
    data.addRow(['' + i / 10 + '', Math.round(elevations[i].elevation)]);
}

Error: Google chart for Google Maps is not displaying text every 1 unit as expected

Answer №1

Answer №2

Similar questions

Retrieve the array from the response instead of the object

How to pass the ng-repeat $index value as a parameter in AngularJS

Custom styling options for Google Chart

Unable to transfer the properties of reactjs to react-chartist

The data type 'string | number | boolean' cannot be assigned to type 'undefined'. Specifically, the type 'string' is incompatible with type 'undefined'. Error code: ts(2322)

I am unable to get the radio button checked in Angular 2

What is the best way to implement bypassSecurityTrustResourceUrl for all elements within an array?

Angular 2 Encounter Error When Trying to Access Undefined Property in a Function

Unveiling the Technique: Adjusting Field Visibility When Dropdown is Altered

How many server queries does a single web application require?

Is there a way to execute a JavaScript function on a webpage using Selenium automation?

The ajax method for loading an xml file results in displaying the undefined message

Is it possible to access an external website by clicking on a link within a DIV element?

Use ajax to add rows to the second-to-last table

I am looking to update the appearance of a button dynamically in Vue.js based on changes to an

Guide to executing a server-side FUNCTION within a specific namespace room exclusively with the help of socket.io, express, and node.js

Is the Vis.js network function ready to go?

Having trouble displaying the Primevue dialog modal in Vue 3?

Update the content according to the size of the screen

Flask - Refreshing Forms Dynamically