CODEWITHSUNDEEP
google-visualizationlinechart
Sven Koluem
Sven Koluem

Reputation: 687

Google Charts API, only show every second value on hAxis

I search for a solution, to only show every second value on the hAxis label of an Google LineChart.

Upvotes: 2

Views: 3068

Answers (1)

jmac
jmac

Reputation: 7128

The hAxis label interval is set by the hAxis.showTextEvery option as described here. This only works for discrete (non-number) horizontal axes. For example:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5],
    ['B',   2,       0.5,         1],
    ['C',   4,       1,           0.5],
    ['D',   8,       0.5,         1],
    ['E',   7,       1,           0.5],
    ['F',   7,       0.5,         1],
    ['G',   8,       1,           0.5],
    ['H',   4,       0.5,         1],
    ['I',   2,       1,           0.5],
    ['J',   3.5,     0.5,         1],
    ['K',   3,       1,           0.5],
    ['L',   3.5,     0.5,         1],
    ['M',   1,       1,           0.5],
    ['N',   1,       0.5,         1]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10},
                  hAxis: {showTextEvery: 2}}
          );
}

If your axis is numerical, you can set this using the hAxis.minorGridlines.count option, as follows:

hAxis: {minorGridlines: {count: 1}}

This will add a single gridline (with no label) in between every two major gridlines.

Upvotes: 4

Related Questions