search

GoogleWebComponents / google-chart

Google Charts API web components
https://www.webcomponents.org/element/@google-web-components/google-chart/elements/google-chart
Apache License 2.0
358 stars 130 forks source link

Color bug in TimeLine #220

Closed benoitscherrer closed 5 years ago

benoitscherrer commented 6 years ago

I was trying to apply specified colors in a Timeline but kept having wrong colors for my elements. This was driving me crazy. Finally realized why/when it happens: If two bars share the same bar label, then only the color of the first bar is used while the color in options.color is not consumed, leading to a color shift for all other bars.

Is this a feature or a bug :/ ?

Here the simple example to test this out:

This one is ok, the item 'h' at 23h58m26 is red, as expected

<html>
  <head>
    <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-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'Date' })
        dataTable.addColumn({ type: 'string', id: 'Text' })
        dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true} })
        dataTable.addColumn({ type: 'date', id: 'Start' })
        dataTable.addColumn({ type: 'date', id: 'End' })
        dataTable.addRows([
        ["2017/12/12", "a", "#7bc20a", new Date(2018,3,1,6,31,09), new Date(2018,3,1, 6, 44, 27)],
        ["2017/12/12", "b", "#a5c20a ", new Date(2018,3,1,7,49,37), new Date(2018,3,1,8,25,11)],
        ["2017/12/12", "c", "#b4c20a", new Date(2018,3,1,8,56,29), new Date(2018,3,1,9,37,29)],
        ["2017/12/12", "d", "#a9c20a", new Date(2018,3,1,10,4,39), new Date(2018,3,1,10,46,21)],
        ["2017/12/12", "e", "#9ec20a", new Date(2018,3,1,11,2,21), new Date(2018,3,1,11,43,0)],
        ["2017/12/12", "f", "#bdc20a", new Date(2018,3,1,12,3,41), new Date(2018,3,1,12,37,15)],
        ["2017/12/12", "g", "#9cc20a", new Date(2018,3,1,13,15,30), new Date(2018,3,1,13,45,7)],
        ["2017/12/12", "h", "#ff000a", new Date(2018,3,1,13,58,26), new Date(2018,3,1,14,9,9)],
        ["2017/12/12", "i", "#99c20a", new Date(2018,3,1,14,22,10), new Date(2018,3,1,15,4,28)],
        ["2017/12/12", "j", "#9fc20a", new Date(2018,3,1,15,35,50), new Date(2018,3,1,16,20,23)],
        ["2017/12/12", "k", "#c2ab0a", new Date(2018,3,1,17,33,44), new Date(2018,3,1,18,9,37)],
        ["2017/12/12", "l", "#c2a50a", new Date(2018,3,1,18,54,56), new Date(2018,3,1,20,51,17)],
        ["2017/12/12", "m", "#c2970a", new Date(2018,3,1,22,28,01), new Date(2018,3,1,23,39,25)],
        ["2017/12/12", "n", "#c2670a", new Date(2018,3,1,23,50,44), new Date(2018,3,1,23,59,59)]
        ])

        var options = {
          colors:  ["#7bc20a", "#a5c20a", "#b4c20a", "#a9c20a", "#9ec20a", "#bdc20a", "#9cc20a", "#ff000a", "#99c20a", "#9fc20a", "#c2ab0a", "#c2a50a", "#c2970a", "#c2670a"],
        };
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="timeline-tooltip" style="height: 180px;"></div>
  </body>
</html>

With the other example below, i only changed the bar labels, having now three bars with label "SAME" . And the red item is now the item 'j' :/ This is quite confusing

<html>
  <head>
    <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-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'Date' })
        dataTable.addColumn({ type: 'string', id: 'Text' })
        dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true} })
        dataTable.addColumn({ type: 'date', id: 'Start' })
        dataTable.addColumn({ type: 'date', id: 'End' })
        dataTable.addRows([
        ["2017/12/12", "SAME", "#7bc20a", new Date(2018,3,1,6,31,09), new Date(2018,3,1, 6, 44, 27)],
        ["2017/12/12", "SAME", "#a5c20a ", new Date(2018,3,1,7,49,37), new Date(2018,3,1,8,25,11)],
        ["2017/12/12", "c", "#b4c20a", new Date(2018,3,1,8,56,29), new Date(2018,3,1,9,37,29)],
        ["2017/12/12", "d", "#a9c20a", new Date(2018,3,1,10,4,39), new Date(2018,3,1,10,46,21)],
        ["2017/12/12", "e", "#9ec20a", new Date(2018,3,1,11,2,21), new Date(2018,3,1,11,43,0)],
        ["2017/12/12", "f", "#bdc20a", new Date(2018,3,1,12,3,41), new Date(2018,3,1,12,37,15)],
        ["2017/12/12", "g", "#9cc20a", new Date(2018,3,1,13,15,30), new Date(2018,3,1,13,45,7)],
        ["2017/12/12", "SAME", "#ff000a", new Date(2018,3,1,13,58,26), new Date(2018,3,1,14,9,9)],
        ["2017/12/12", "i", "#99c20a", new Date(2018,3,1,14,22,10), new Date(2018,3,1,15,4,28)],
        ["2017/12/12", "j", "#9fc20a", new Date(2018,3,1,15,35,50), new Date(2018,3,1,16,20,23)],
        ["2017/12/12", "k", "#c2ab0a", new Date(2018,3,1,17,33,44), new Date(2018,3,1,18,9,37)],
        ["2017/12/12", "l", "#c2a50a", new Date(2018,3,1,18,54,56), new Date(2018,3,1,20,51,17)],
        ["2017/12/12", "m", "#c2970a", new Date(2018,3,1,22,28,01), new Date(2018,3,1,23,39,25)],
        ["2017/12/12", "n", "#c2670a", new Date(2018,3,1,23,50,44), new Date(2018,3,1,23,59,59)]
        ])

        var options = {
          colors:  ["#7bc20a", "#a5c20a", "#b4c20a", "#a9c20a", "#9ec20a", "#bdc20a", "#9cc20a", "#ff000a", "#99c20a", "#9fc20a", "#c2ab0a", "#c2a50a", "#c2970a", "#c2670a"],
        };
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="timeline-tooltip" style="height: 180px;"></div>
  </body>
</html>

When removing the labels (as well as tooltip, to simplify)...

<html>
  <head>
    <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-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'Date' })
        dataTable.addColumn({ type: 'date', id: 'Start' })
        dataTable.addColumn({ type: 'date', id: 'End' })
        dataTable.addRows([
        ["2017/12/12", new Date(2018,3,1,6,31,09), new Date(2018,3,1, 6, 44, 27)],
        ["2017/12/12", new Date(2018,3,1,7,49,37), new Date(2018,3,1,8,25,11)],
        ["2017/12/12", new Date(2018,3,1,8,56,29), new Date(2018,3,1,9,37,29)],
        ["2017/12/12", new Date(2018,3,1,10,4,39), new Date(2018,3,1,10,46,21)],
        ["2017/12/12", new Date(2018,3,1,11,2,21), new Date(2018,3,1,11,43,0)],
        ["2017/12/12", new Date(2018,3,1,12,3,41), new Date(2018,3,1,12,37,15)],
        ["2017/12/12", new Date(2018,3,1,13,15,30), new Date(2018,3,1,13,45,7)],
        ["2017/12/12", new Date(2018,3,1,13,58,26), new Date(2018,3,1,14,9,9)],
        ["2017/12/12", new Date(2018,3,1,14,22,10), new Date(2018,3,1,15,4,28)],
        ["2017/12/12", new Date(2018,3,1,15,35,50), new Date(2018,3,1,16,20,23)],
        ["2017/12/12", new Date(2018,3,1,17,33,44), new Date(2018,3,1,18,9,37)],
        ["2017/12/12", new Date(2018,3,1,18,54,56), new Date(2018,3,1,20,51,17)],
        ["2017/12/12", new Date(2018,3,1,22,28,01), new Date(2018,3,1,23,39,25)],
        ["2017/12/12", new Date(2018,3,1,23,50,44), new Date(2018,3,1,23,59,59)]
        ])

        var options = {
          colors:  ["#7bc20a", "#a5c20a", "#b4c20a", "#a9c20a", "#9ec20a", "#bdc20a", "#9cc20a", "#ff000a", "#99c20a", "#9fc20a", "#c2ab0a", "#c2a50a", "#c2970a", "#c2670a"],
        };
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="timeline-tooltip" style="height: 180px;"></div>
  </body>
</html>

And since all the bar labels are the same, then all the bars have the color of the first item.

I guess the only way for me is probably to have an increasing number in the bar label (so that it s never the same) and use options.timeline.showBarLabels=false to avoid showing that number

But is this coupling between bar label and color normal? Does it make sense? Or am I missing something?

wesalvaro commented 5 years ago

My guess is it's a feature, but you'll have to ask the library authors to be sure. This project is only to maintain the Polymer wrapper for the element. Try posting an issue over here and see what they say!