CODEWITHSUNDEEP
javascriptgoogle-visualization
Wessi
Wessi

Reputation: 1802

Google charts - max and min on horizontal axis

I have made a line chart with week numbers on the horizontal axis. It is meant to display a year and should therefore start at 1 and end at 52. I've tried using hAxis: {maxValue: 52} but it doesn't seem to work. Here are my settings:

<script type="text/javascript">
  google.charts.load('current', {'packages':['line']});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Ugenr.');
  data.addColumn('number', 'Anbefalet pris');
  data.addColumn('number', 'Nuværende pris');

  data.addRows([
    [1,  37.8, 41.8],
    [2,  6.6, 32.4],
    [3,  25.4, 25.7],
    [4,  11.7, 10.5],
    [5,  11.9, 6.6],
    [6,   8.8, 7.7],
    [7,   7.6, 9.6],
    [8,  12.3, 10.6],
    [9,  6.6, 14.8],
    [10, 12.8, 11.6],
    [11,  5.3, 4.7],
    [12,  6.6, 5.2],
    [13,  4.8, 3.6],
    [14,  4.2, 3.4],
    [15,  8.8, 31.8],
    [16,  30.9, 6.6],
    [17,  25.4, 25.7],
    [18,  11.7, 10.5],
    [19,  11.9, 10.4],
    [20,   6.6, 7.7],
    [21,   7.6, 9.6],
    [22,  12.3, 10.6],
    [23,  16.9, 14.8],
    [24, 12.8, 11.6],
    [25,  5.3, 4.7],
    [26,  6.6, 5.2],
    [27,  4.8, 3.6],
    [28,  4.2, 6.6],
    [29,  37.8, 41.8],
    [30,  30.9, 32.4],
    [31,  25.4, 25.7],
    [32,  11.7, 10.5],
    [33,  11.9, 10.4],
    [34,   8.8, 7.7],
    [35,   7.6, 9.6],
    [36,  12.3, 10.6],
    [37,  16.9, 14.8],
    [38, 12.8, 11.6],
    [39,  5.3, 4.7],
    [40,  6.6, 5.2],
    [41,  6.6, 3.6],
    [42,  4.2, 6.6],
    [43,  4.2, 3.4],
    [44,  37.8, 41.8],
    [45,  30.9, 32.4],
    [46,  25.4, 25.7],
    [47,  11.7, 10.5],
    [48,  11.9, 6.6],
    [49,   8.8, 7.7],
    [50,   7.6, 9.6],
    [51,  6.6, 10.6],
    [52,  16.9, 14.8]
  ]);

  var options = {
    chart: {
      title: 'Anbefalede og nuværende ugepriser',
      subtitle: 'anbefalede priser = blå, nuværende priser = rød',
        hAxis: {maxValue: 52}  
    },
    legend: { position:'none' },
    height: 500,
    explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
  };
  var chart = new google.charts.Line(document.getElementById('linechart_material'));

  chart.draw(data, options);
}

$(window).resize(function(){
  drawChart();
});
</script>

Upvotes: 0

Views: 219

Answers (1)

Arnauld
Arnauld

Reputation: 6110

It seems like many options of the Classic Charts are still not implemented in the Material Charts, including hAxis.minValue.

A possible workaround is to explicitly define your own labels, by using strings instead of numbers for your first column.

For instance (here with a label every 5 weeks):

data.addColumn('string', 'Ugenr.');
// ...

// the original data set is unchanged
var dataset = [
  [1,  37.8, 41.8],
  [2,  6.6, 32.4],
  // ...
];

// convert the 1st column to string
dataset = dataset.map(function(r) {
  return [!((r[0] - 1) % 5) ? r[0] + '' : '', r[1], r[2]];
});
data.addRows(dataset);

See a complete demo in this JSFiddle.

However, this version is not entirely satisfying because you won't get the week number when you put your mouse over a point for which it's not defined. So you may want to do return [r[0] + '', r[1], r[2]]; instead in the map() callback.

Upvotes: 1

Related Questions