CODEWITHSUNDEEP
javascriptcharts
chug187
chug187

Reputation: 137

Google charts auto-sorting

I have a simple Google chart:

google.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
  var data = [
    [new Date("Month"), "Shipments"],
    [new Date("2015-05-01T04:00:00.000Z"), 51666],
    [new Date("2014-11-01T04:00:00.000Z"), 53783],
    [new Date("2015-02-01T05:00:00.000Z"), 63454],
    [new Date("2014-12-01T05:00:00.000Z"), 63722],
    [new Date("2015-03-01T05:00:00.000Z"), 63836],
    [new Date("2015-09-01T04:00:00.000Z"), 63884],
    [new Date("2015-04-01T04:00:00.000Z"), 68869],
    [new Date("2015-08-01T04:00:00.000Z"), 68954],
    [new Date("2015-01-01T05:00:00.000Z"), 72110],
    [new Date("2015-06-01T04:00:00.000Z"), 77942],
    [new Date("2015-07-01T04:00:00.000Z"), 86856],
    [new Date("2014-10-01T04:00:00.000Z"), 92168]
  ];

  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable(data);

  var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div')
  );
  chart.draw(data);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

You can also see this in action at http://codepen.io/chug187/pen/GpQzNg.

Why does it automatically sort by the dates in the data? I want to have the chart's columns appear in ascending order of the number of shipments, yet Google Charts is sorting the data by date. There doesn't appear to be any options for either the DataTable, DataView or ComboChart classes to ensure that the data appears as it exists in the data array.

Upvotes: 2

Views: 2777

Answers (1)

Sujeet Jaiswal
Sujeet Jaiswal

Reputation: 1089

Since the values on X-axis are date, it does not consider it discrete (like strings) and treat as continuous data and hence sorts them.

You can make them string, and apply sort them based on the numerical data by

[String(new Date("2015-05-01T04:00:00.000Z")), 51666],

data.sort([{column: 1}, {column: 0}]);

You can find the codepen working as per your need here

You can also refer google charts documentation here

Upvotes: 1

Related Questions