CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
José Filipe Ferreira
José Filipe Ferreira

Reputation: 43

Google Timeline Chart Haxis

I need a hAxis, from 0 to the max value (let's say 130). Timeline charts almost solves my problem, initally my data was in hours however I had to transform it in seconds. Which was fine but it resets after the number 60 and starts again from 0.

see this image:

Therefore my question is: Is there a way that xAxis increments till the max value or a certain value and does not reset ?

  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
 

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Máquina' });
    dataTable.addColumn({ type: 'string', id: 'NºEncomenda' });
    dataTable.addColumn({ type: 'number', id: 'Inicio' });
    dataTable.addColumn({ type: 'number', id: 'Fim' });
    dataTable.addRows([
	

['Repuxagem 1001 ', '20194053 ', 0,4000],
['Estampagem Topo ', '20194053 ', 4000,33000],
['Estampagem Lado ', '20194053 ', 4000,33000],
['Recartilhado 1005 ', '20194053 ', 33000,37000],
['Recartilhado 3001 ', '20194054 ', 7000,9000],
['Calf 2 ', '20194054 ', 17000,21000],
['Recartilhado 3005 ', '20194054 ', 21000,23000],
['Repuxagem 1001 ', '20194063 ', 7000,11000],
['Calf2 ', '20194063 ', 11000,17000],
['Recartilhado 3005 ', '20194063 ', 17000,21000],
['Repuxagem 1001 ', '20194206 ', 11000,14000],
['Impressão Topo ', '20194206 ', 11000,14000],
['Calf1 ', '20194206 ', 15000,20000],
['Recartilhado 1005 ', '20194206 ', 20000,23000],
['Repuxagem 2001 ', '20194315 ', 9000,12000],
['Recartilhado 2005 ', '20194315 ', 9000,13000],
['Repuxagem 2001 ', '20194316 ', 8000,9000],
['Calf1 ', '20194316 ', 20000,21000],
['Recartilhado 2005 ', '20194316 ', 21000,22000],
['Recartilhado 3001 ', '20194351 ', 9000,11000],
['Recartilhado 3005 ', '20194351 ', 9000,11000],
['Repuxagem 1001 ', '20194361 ', 29000,33000],
['Calf1 ', '20194361 ', 49000,55000],
['Recartilhado 1005 ', '20194361 ', 55000,59000],
['Recartilhado 3001 ', '20194435 ', 30000,31000],
['Recartilhado 3005 ', '20194435 ', 30000,31000],
['Repuxagem 2001 ', '20194172 ', 1000,5000],
['Calf2 ', '20194172 ', 5000,11000],
['Recartilhado 3005 ', '20194172 ', 11000,15000],
['265 ', '20194172 ', 15000,43000],
['Recartilhado 1005 ', '20194172 ', 43000,47000],
['Repuxagem 2001 ', '20194223 ', 5000,8000],
['Calf1 ', '20194223 ', 11000,15000],
['Recartilhado 2005 ', '20194223 ', 15000,18000],
['322 ', '20194223 ', 37000,60000],
['Recartilhado 1005 ', '20194223 ', 60000,63000],
['Repuxagem 1001 ', '20194224 ', 4000,7000],
['Calf1 ', '20194224 ', 7000,11000],
['Recartilhado 1005 ', '20194224 ', 11000,14000],
['322 ', '20194224 ', 14000,37000],
['Recartilhado 1005 ', '20194224 ', 37000,40000],
['Recartilhado 3001 ', '20194257 ', 11000,15000],
['Estampagem Topo ', '20194257 ', 33000,71000],
['Estampagem Lado ', '20194257 ', 33000,71000],
['Recartilhado 2005 ', '20194257 ', 71000,75000],
['Repuxagem 2001 ', '20194392 ', 33000,39000],
['Recartilhado 2005 ', '20194392 ', 33000,39000],
['Recartilhado 3001 ', '20194269 ', 31000,35000],
['Recartilhado 3005 ', '20194269 ', 31000,35000],
['Repuxagem 1001 ', '20194330 ', 14000,18000],
['Impressão Topo ', '20194330 ', 14000,18000],
['Calf1 ', '20194330 ', 21000,27000],
['Estampagem Lado ', '20194330 ', 71000,99000],
['Recartilhado 1005 ', '20194330 ', 99000,103000],
['Recartilhado 3001 ', '20194398 ', 29000,30000],
['Calf2 ', '20194398 ', 64000,66000],
['Recartilhado 3005 ', '20194398 ', 66000,67000],
['Repuxagem 2001 ', '20194400 ', 31000,33000],
['Recartilhado 2005 ', '20194400 ', 31000,33000],
['Recartilhado 3001 ', '20194389 ', 0,7000],
['Serigrafia de Corpo ', '20194389 ', 10000,68000],
['Recartilhado 3005 ', '20194389 ', 68000,75000],
['Repuxagem 1001 ', '20190245 ', 18000,29000],
['Impressão Topo ', '20190245 ', 18000,29000],
['Calf2 ', '20190245 ', 45000,64000],
['Recartilhado 1005 ', '20190245 ', 64000,75000],
['Recartilhado 3001 ', '20190246 ', 15000,26000],
['Calf2 ', '20190246 ', 26000,45000],
['Recartilhado 3005 ', '20190246 ', 45000,56000],
['Repuxagem 1001 ', '20194391 ', 33000,36000],
['Impressão Topo ', '20194391 ', 33000,36000],
['Calf1 ', '20194391 ', 61000,65000],
['Recartilhado 2005 ', '20194391 ', 65000,68000],
['Repuxagem 2001 ', '20194426 ', 27000,31000],
['Calf1 ', '20194426 ', 55000,61000],
['Recartilhado 3005 ', '20194426 ', 61000,65000],
['Repuxagem 2001 ', '20194431 ', 12000,16000],
['Serigrafia de Corpo ', '20194431 ', 68000,103000],
['Recartilhado 3005 ', '20194431 ', 103000,107000],
['Repuxagem 2001 ', '20194432 ', 0,1000],
['Serigrafia de Corpo ', '20194432 ', 1000,10000],
['Recartilhado 1005 ', '20194432 ', 10000,11000],
['Recartilhado 3001 ', '20194271 ', 26000,29000],
['Calf1 ', '20194271 ', 45000,49000],
['Serigrafia de Corpo ', '20194271 ', 103000,121000],
['Recartilhado 3005 ', '20194271 ', 121000,124000],
['Repuxagem 2001 ', '20194271 ', 16000,27000],
['Calf1 ', '20194271 ', 27000,45000],
['Recartilhado 2005 ', '20194271 ', 45000,56000]]);




    

    chart.draw(dataTable);
  }
<html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3.1" style="height: 1200px; width:4000px;"></div>
</html>

Upvotes: 3

Views: 718

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

the timeline expects date values, not number values.
as such, there are no options you can change to correct the problem.
but we can manually change the values of the svg elements,
on the chart's 'ready' event. 

google.visualization.events.addListener(chart, 'ready', function () {
...

when the 'ready' event fires,
we find all the labels on the chart. 

var labels = container.getElementsByTagName('text');

but we only need the labels on the x-axis.
in the timeline chart, by default, the x-axis labels are the only ones with black color (#000000)

so we use the fill attribute, to ensure the label is on the x-axis. 

  // find x-axis labels by fill attribute
  if (label.getAttribute('fill') === '#000000') {
  ...

we then calculate how each label is incremented (by 2, 10, etc.),
test to see if the next label is less than the last,
and if so, change the label... 

var incrementBy;
var valueCurrent;
var valueLast;
var labelIndex = 0;
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
  // find x-axis labels by fill attribute
  if (label.getAttribute('fill') === '#000000') {
    valueCurrent = parseInt(label.textContent);

    if (labelIndex === 1) {
      incrementBy = valueCurrent - valueLast;
    }

    if (labelIndex > 0) {
      if (valueCurrent < valueLast) {
        valueCurrent = valueLast + incrementBy;
        label.textContent = valueCurrent;
      }
    }

    valueLast = valueCurrent;
    labelIndex++;
  }
});

see following working snippet... 

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var container = document.getElementById('example3.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Máquina' });
  dataTable.addColumn({ type: 'string', id: 'NºEncomenda' });
  dataTable.addColumn({ type: 'number', id: 'Inicio' });
  dataTable.addColumn({ type: 'number', id: 'Fim' });
  dataTable.addRows([
    ['Repuxagem 1001 ', '20194053 ', 0,4000],
    ['Estampagem Topo ', '20194053 ', 4000,33000],
    ['Estampagem Lado ', '20194053 ', 4000,33000],
    ['Recartilhado 1005 ', '20194053 ', 33000,37000],
    ['Recartilhado 3001 ', '20194054 ', 7000,9000],
    ['Calf 2 ', '20194054 ', 17000,21000],
    ['Recartilhado 3005 ', '20194054 ', 21000,23000],
    ['Repuxagem 1001 ', '20194063 ', 7000,11000],
    ['Calf2 ', '20194063 ', 11000,17000],
    ['Recartilhado 3005 ', '20194063 ', 17000,21000],
    ['Repuxagem 1001 ', '20194206 ', 11000,14000],
    ['Impressão Topo ', '20194206 ', 11000,14000],
    ['Calf1 ', '20194206 ', 15000,20000],
    ['Recartilhado 1005 ', '20194206 ', 20000,23000],
    ['Repuxagem 2001 ', '20194315 ', 9000,12000],
    ['Recartilhado 2005 ', '20194315 ', 9000,13000],
    ['Repuxagem 2001 ', '20194316 ', 8000,9000],
    ['Calf1 ', '20194316 ', 20000,21000],
    ['Recartilhado 2005 ', '20194316 ', 21000,22000],
    ['Recartilhado 3001 ', '20194351 ', 9000,11000],
    ['Recartilhado 3005 ', '20194351 ', 9000,11000],
    ['Repuxagem 1001 ', '20194361 ', 29000,33000],
    ['Calf1 ', '20194361 ', 49000,55000],
    ['Recartilhado 1005 ', '20194361 ', 55000,59000],
    ['Recartilhado 3001 ', '20194435 ', 30000,31000],
    ['Recartilhado 3005 ', '20194435 ', 30000,31000],
    ['Repuxagem 2001 ', '20194172 ', 1000,5000],
    ['Calf2 ', '20194172 ', 5000,11000],
    ['Recartilhado 3005 ', '20194172 ', 11000,15000],
    ['265 ', '20194172 ', 15000,43000],
    ['Recartilhado 1005 ', '20194172 ', 43000,47000],
    ['Repuxagem 2001 ', '20194223 ', 5000,8000],
    ['Calf1 ', '20194223 ', 11000,15000],
    ['Recartilhado 2005 ', '20194223 ', 15000,18000],
    ['322 ', '20194223 ', 37000,60000],
    ['Recartilhado 1005 ', '20194223 ', 60000,63000],
    ['Repuxagem 1001 ', '20194224 ', 4000,7000],
    ['Calf1 ', '20194224 ', 7000,11000],
    ['Recartilhado 1005 ', '20194224 ', 11000,14000],
    ['322 ', '20194224 ', 14000,37000],
    ['Recartilhado 1005 ', '20194224 ', 37000,40000],
    ['Recartilhado 3001 ', '20194257 ', 11000,15000],
    ['Estampagem Topo ', '20194257 ', 33000,71000],
    ['Estampagem Lado ', '20194257 ', 33000,71000],
    ['Recartilhado 2005 ', '20194257 ', 71000,75000],
    ['Repuxagem 2001 ', '20194392 ', 33000,39000],
    ['Recartilhado 2005 ', '20194392 ', 33000,39000],
    ['Recartilhado 3001 ', '20194269 ', 31000,35000],
    ['Recartilhado 3005 ', '20194269 ', 31000,35000],
    ['Repuxagem 1001 ', '20194330 ', 14000,18000],
    ['Impressão Topo ', '20194330 ', 14000,18000],
    ['Calf1 ', '20194330 ', 21000,27000],
    ['Estampagem Lado ', '20194330 ', 71000,99000],
    ['Recartilhado 1005 ', '20194330 ', 99000,103000],
    ['Recartilhado 3001 ', '20194398 ', 29000,30000],
    ['Calf2 ', '20194398 ', 64000,66000],
    ['Recartilhado 3005 ', '20194398 ', 66000,67000],
    ['Repuxagem 2001 ', '20194400 ', 31000,33000],
    ['Recartilhado 2005 ', '20194400 ', 31000,33000],
    ['Recartilhado 3001 ', '20194389 ', 0,7000],
    ['Serigrafia de Corpo ', '20194389 ', 10000,68000],
    ['Recartilhado 3005 ', '20194389 ', 68000,75000],
    ['Repuxagem 1001 ', '20190245 ', 18000,29000],
    ['Impressão Topo ', '20190245 ', 18000,29000],
    ['Calf2 ', '20190245 ', 45000,64000],
    ['Recartilhado 1005 ', '20190245 ', 64000,75000],
    ['Recartilhado 3001 ', '20190246 ', 15000,26000],
    ['Calf2 ', '20190246 ', 26000,45000],
    ['Recartilhado 3005 ', '20190246 ', 45000,56000],
    ['Repuxagem 1001 ', '20194391 ', 33000,36000],
    ['Impressão Topo ', '20194391 ', 33000,36000],
    ['Calf1 ', '20194391 ', 61000,65000],
    ['Recartilhado 2005 ', '20194391 ', 65000,68000],
    ['Repuxagem 2001 ', '20194426 ', 27000,31000],
    ['Calf1 ', '20194426 ', 55000,61000],
    ['Recartilhado 3005 ', '20194426 ', 61000,65000],
    ['Repuxagem 2001 ', '20194431 ', 12000,16000],
    ['Serigrafia de Corpo ', '20194431 ', 68000,103000],
    ['Recartilhado 3005 ', '20194431 ', 103000,107000],
    ['Repuxagem 2001 ', '20194432 ', 0,1000],
    ['Serigrafia de Corpo ', '20194432 ', 1000,10000],
    ['Recartilhado 1005 ', '20194432 ', 10000,11000],
    ['Recartilhado 3001 ', '20194271 ', 26000,29000],
    ['Calf1 ', '20194271 ', 45000,49000],
    ['Serigrafia de Corpo ', '20194271 ', 103000,121000],
    ['Recartilhado 3005 ', '20194271 ', 121000,124000],
    ['Repuxagem 2001 ', '20194271 ', 16000,27000],
    ['Calf1 ', '20194271 ', 27000,45000],
    ['Recartilhado 2005 ', '20194271 ', 45000,56000]
  ]);

  // re-label x-axis
  google.visualization.events.addListener(chart, 'ready', function () {
    var incrementBy;
    var valueCurrent;
    var valueLast;
    var labelIndex = 0;
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      // find x-axis labels by fill attribute
      if (label.getAttribute('fill') === '#000000') {
        valueCurrent = parseInt(label.textContent);

        if (labelIndex === 1) {
          incrementBy = valueCurrent - valueLast;
        }

        if (labelIndex > 0) {
          if (valueCurrent < valueLast) {
            valueCurrent = valueLast + incrementBy;
            label.textContent = valueCurrent;
          }
        }

        valueLast = valueCurrent;
        labelIndex++;
      }
    });
  });

  chart.draw(dataTable);
});
<html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3.1" style="height: 1200px; width:4000px;"></div>
</html>

Upvotes: 1

Related Questions