CODEWITHSUNDEEP
chartsgoogle-visualization
BenMorel
BenMorel

Reputation: 36514

How to prevent Google Charts from changing x-axis order?

I'm trying to draw a Google Chart whose x-axis represents the week numbers. As we're crossing a new year, the axis goes 50, 51, 52, 1, 2, 3, ....

I'm properly ordering my data, but Google Charts insists on reordering my x-axis, and I end up with a weird graph:

var chartData = [
  ["Week","Revenue"],
  [40,227],
  [41,317],
  [42,320],
  [43,482],
  [44,418],
  [45,345],
  [46,313],
  [47,316],
  [48,380],
  [49,467],
  [50,349],
  [51,256],
  [52,393],
  [1,276],
  [2,349],
  [3,312]
];

google.load("visualization", "1", {
packages:["corechart"],
callback: function() {
  var div = document.getElementById('chart');
  var chartDataTable = google.visualization.arrayToDataTable(chartData);
  var chart = new google.visualization['LineChart'](div);
  chart.draw(chartDataTable);
}});
<div id="chart" style="height: 400px;">test</div>
<script src="//www.google.com/jsapi"></script>

How can I prevent it from reordering my data?

Upvotes: 4

Views: 1144

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

google's object notation allows you to provide a value (v:) and a formatted value (f:)

thus, you can use a value of 1 with a format of '40'

e.g. --> {v: 1, f: '40'}

in a row --> [{v: 1, f: '40'},227]

the following working snippet uses object notation to re-format the values for the x-axis,
and re-use those values for the x-axis labels (hAxis.ticks) 

var chartData = [
  ["Week","Revenue"],
  [40,227],
  [41,317],
  [42,320],
  [43,482],
  [44,418],
  [45,345],
  [46,313],
  [47,316],
  [48,380],
  [49,467],
  [50,349],
  [51,256],
  [52,393],
  [1,276],
  [2,349],
  [3,312]
];

var hAxisTicks = [];
chartData.forEach(function (row, index) {
  if (index === 0) {
    return;
  }
  row[0] = {
    v: index,
    f: row[0].toString()
  };
  hAxisTicks.push(row[0]);
});

google.charts.load('current', {
  callback: function () {
    var div = document.getElementById('chart');
    var chartDataTable = google.visualization.arrayToDataTable(chartData);
    var chart = new google.visualization['LineChart'](div);
    chart.draw(chartDataTable, {
      hAxis: {
        ticks: hAxisTicks
      }
    });
  },
  packages:['corechart']
});
<div id="chart"></div>
<script src="https://www.gstatic.com/charts/loader.js"></script>

note:

recommend using loader.js to load the the library, instead of jsapi

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

this only changes the load statement, see snippet above...

EDIT:

there are more options available for continuous axis
which must be sorted, or in reverse sort order ('number', 'date' values)

but the chart will respect the original sort order for a discrete axis ('string' values)

see following snippet for 'string' values

and discrete vs. continuous for more... 

var chartData = [
  ["Week","Revenue"],
  [40,227],
  [41,317],
  [42,320],
  [43,482],
  [44,418],
  [45,345],
  [46,313],
  [47,316],
  [48,380],
  [49,467],
  [50,349],
  [51,256],
  [52,393],
  [1,276],
  [2,349],
  [3,312]
];

chartData.forEach(function (row, index) {
  if (index === 0) {
    return;
  }
  row[0] = row[0].toString();
});

google.charts.load('current', {
  callback: function () {
    var div = document.getElementById('chart');
    var chartDataTable = google.visualization.arrayToDataTable(chartData);
    var chart = new google.visualization['LineChart'](div);
    chart.draw(chartDataTable);
  },
  packages:['corechart']
});
<div id="chart"></div>
<script src="https://www.gstatic.com/charts/loader.js"></script>

Upvotes: 2

Related Questions