Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Timelines: Bug with color Parameter #2767

Open
jskrivanek opened this issue Oct 7, 2019 · 0 comments
Open

Timelines: Bug with color Parameter #2767

jskrivanek opened this issue Oct 7, 2019 · 0 comments

Comments

@jskrivanek
Copy link

@jskrivanek jskrivanek commented Oct 7, 2019

When I try to add colors to all elements, some are ignored.

Code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
	  <title>Timeline</title>
	  
	  <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      
      function drawChart() {
        
        var container = document.getElementById('timeline');
        
        var chart = new google.visualization.Timeline(container);
        
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'Registration' });
        dataTable.addColumn({ type: 'string', id: 'Trip' });
        dataTable.addColumn({ type: 'date',   id: 'Departure' });
        dataTable.addColumn({ type: 'date',   id: 'Arrival' });
        dataTable.addRows([
          [ 'OE-FAT', '[EDDP LSZH]', new Date(2019, 9, 6, 14, 30),  new Date(2019, 9, 6, 15, 59) ],
          [ 'OE-FCB', '[LOWI LSGS]', new Date(2019, 9, 6, 10, 13),  new Date(2019, 9, 6, 11, 12) ],
          [ 'OE-FCB', '(LSGS LIMC)', new Date(2019, 9, 6, 12, 00),  new Date(2019, 9, 6, 12, 35) ],
          [ 'OE-FDT', '(LFPB EGLF)', new Date(2019, 9, 6, 11, 00),  new Date(2019, 9, 6, 12, 11) ],
          [ 'OE-FDT', '[EGLF LSGS]', new Date(2019, 9, 6, 13, 15),  new Date(2019, 9, 6, 15, 00) ],
          [ 'OE-FDT', '(LSGS LSGG)', new Date(2019, 9, 6, 16, 00),  new Date(2019, 9, 6, 16, 35) ],
          [ 'OE-FFB', '[LFMQ LFMN]', new Date(2019, 9, 6, 14, 05),  new Date(2019, 9, 6, 14, 38) ],
          [ 'OE-FHA', '[LFMN LSZH]', new Date(2019, 9, 6, 10, 28),  new Date(2019, 9, 6, 11, 54) ],
          [ 'OE-FHA', '[LSZH LEPA]', new Date(2019, 9, 6, 17, 00),  new Date(2019, 9, 6, 19, 00) ],
          [ 'OE-FHK', '[LFMQ LFMN]', new Date(2019, 9, 6, 14, 10),  new Date(2019, 9, 6, 14, 43) ],
          [ 'OE-FOE', '[LFMQ LFMN]', new Date(2019, 9, 6, 14, 35),  new Date(2019, 9, 6, 15, 08) ],
          [ 'OE-FOG', '[EGNX EHAM]', new Date(2019, 9, 6, 14, 30),  new Date(2019, 9, 6, 15, 39) ],
          [ 'OE-FPP', '[LFMQ LFMN]', new Date(2019, 9, 6, 14, 20),  new Date(2019, 9, 6, 14, 53) ],
          [ 'OE-FRM', '[LFMQ LFMN]', new Date(2019, 9, 6, 14, 00),  new Date(2019, 9, 6, 14, 33) ],
          [ 'OE-FWF', '[EDVE EHBK]', new Date(2019, 9, 6, 17, 10),  new Date(2019, 9, 6, 18, 18) ],
          [ 'OE-FWF', '[EHBK LOWL]', new Date(2019, 9, 6, 18, 45),  new Date(2019, 9, 6, 20, 12) ],
          [ 'OE-FZA', '[LFMQ LFMN]', new Date(2019, 9, 6, 14, 15),  new Date(2019, 9, 6, 14, 48) ],
          [ 'OE-FZB', '[LFMQ LFMN]', new Date(2019, 9, 6, 14, 30),  new Date(2019, 9, 6, 15, 03) ],
          [ 'OE-FZB', '(LFMN LFPB)', new Date(2019, 9, 6, 15, 35),  new Date(2019, 9, 6, 17, 21) ],
          [ 'OE-FZC', '(LSGG EGGP)', new Date(2019, 9, 6, 12, 15),  new Date(2019, 9, 6, 15, 00) ],
          [ 'OE-FZC', '[EGGP EGLF]', new Date(2019, 9, 6, 17, 00),  new Date(2019, 9, 6, 17, 51) ],
          [ 'OE-FZD', '[LIRA LOWW]', new Date(2019, 9, 6, 15, 00),  new Date(2019, 9, 6, 16, 54) ],
          [ 'OE-FZE', '[LFMQ LFMN]', new Date(2019, 9, 6, 14, 25),  new Date(2019, 9, 6, 14, 58) ]
        ]);
        
        var dateFormat = new google.visualization.DateFormat({
          pattern: 'HH:mm'
        });        
        var options = {
        
          colors: ['green', 'green', 'orange', 'orange', 'green', 'orange', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'orange', 'orange', 'green', 'green', 'green'],
          height: 800,

        };
        
        chart.draw(dataTable, options);
      }
    </script>
    
  </head>
  <body>
    
      <div id="timeline"></div>
       
  </body>
  
</html>`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.