Google Visualization row 1 does not display .ColorFormat() when using .setProperty()

Question

I have applied this styling to column 1 of a simple table.

  var formatterDateCol = new google.visualization.ColorFormat();
  formatterDateCol.addRange(null, dtHigh, 'black', 'pink');

Any date older than the first day of the current month should come out pink.

Row 1 does not display .ColorFormat() All other rows below this work fine.

.ColorFormat() works perfectly when I remove the following code which sets the column width.

data.setProperty(0, 0, 'style', 'width: 100px;');

Why is it doing this? I appreciate any feedback on what I may have done mistakenly. Thanks!!

google.charts.load('current', {
  packages: ['table']
}).then(function() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Revenues');

  var dt1 = new Date(moment().endOf('month').subtract(3, 'month'));
  var dt2 = new Date(moment().endOf('month').subtract(2, 'month'));
  var dt3 = new Date(moment().endOf('month').subtract(1, 'month'));
  var dt4 = new Date(moment().startOf('month'));
  var dt5 = new Date(moment().startOf('month').add(1, 'day'));
  var dt6 = new Date(moment().startOf('month').add(2, 'day'));

  data.addRows([
    [dt1, 10700],
    [dt2, -15400],
    [dt3, 12500],
    [dt4, -2100],
    [dt5, 22600],
    [dt6, 1100],
    [dt1, 10700],
    [dt2, -15400],
    [dt3, 12500],
    [dt4, -2100],
    [dt5, 22600],
    [dt6, 1100],
  ]);

  var groupView = google.visualization.data.group(
    data, [0], [{
      column: 1,
      aggregation: google.visualization.data.sum,
      type: 'number'
    }]);


  var dtHigh = new Date(moment().startOf('month'));

  var formatterDateCol = new google.visualization.ColorFormat();
  formatterDateCol.addRange(null, dtHigh, 'black', 'pink');

  formatterDateCol.format(data, 0);
  formatterDateCol.format(groupView, 0);

  //COMMENTING setProperty OUT RESOLVES THE PROBLEM - BUT I NEED THE COLUMN WIDTH TO BE SET

  //Column Widths - (row, column)
  data.setProperty(0, 0, 'style', 'width: 100px;');
  groupView.setProperty(0, 0, 'style', 'width: 100px;');

  var options = {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%'
  };

  var table1 = new google.visualization.Table(document.getElementById('table_div1'));
  var table2 = new google.visualization.Table(document.getElementById('table_div2'));

  table1.draw(data, options);
  table2.draw(groupView, options);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
data - Row 1 does not display with ColorFormat. Row 7 contains the same date as Row 1 and it displays the ColorFormat.
<div id="table_div1"></div>

<p>
  <hr/>
</p>
groupView - Row 1 does not display with ColorFormat.
<div id="table_div2"></div>

WhiteHat · Accepted Answer · 2018-05-04 18:22:14Z

1

ColorFormat() actually does the same thing,
it sets the style property on rows that should be highlighted.
as such, setting the width overrides the color format already applied.

if you used getProperty, you would see --> "color:black;background-color:pink;"

to fix, apply the color format, then use getProperty to retrieve the style it creates,
then combine that with the width, when using setProperty...

see following working snippet...

google.charts.load('current', {
  packages: ['table']
}).then(function() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Revenues');

  var dt1 = new Date(moment().endOf('month').subtract(3, 'month'));
  var dt2 = new Date(moment().endOf('month').subtract(2, 'month'));
  var dt3 = new Date(moment().endOf('month').subtract(1, 'month'));
  var dt4 = new Date(moment().startOf('month'));
  var dt5 = new Date(moment().startOf('month').add(1, 'day'));
  var dt6 = new Date(moment().startOf('month').add(2, 'day'));

  data.addRows([
    [dt1, 10700],
    [dt2, -15400],
    [dt3, 12500],
    [dt4, -2100],
    [dt5, 22600],
    [dt6, 1100],
    [dt1, 10700],
    [dt2, -15400],
    [dt3, 12500],
    [dt4, -2100],
    [dt5, 22600],
    [dt6, 1100],
  ]);

  var groupView = google.visualization.data.group(
    data, [0], [{
      column: 1,
      aggregation: google.visualization.data.sum,
      type: 'number'
    }]);

  var dtHigh = new Date(moment().startOf('month'));

  var formatterDateCol = new google.visualization.ColorFormat();
  formatterDateCol.addRange(null, dtHigh, 'black', 'pink');

  formatterDateCol.format(data, 0);
  formatterDateCol.format(groupView, 0);

  //COMMENTING setProperty OUT RESOLVES THE PROBLEM - BUT I NEED THE COLUMN WIDTH TO BE SET

  //Column Widths - (row, column)
  var style = data.getProperty(0, 0, 'style');
  data.setProperty(0, 0, 'style', style + 'width: 100px;');
  var style = groupView.getProperty(0, 0, 'style');
  groupView.setProperty(0, 0, 'style', style + 'width: 100px;');

  console.log(JSON.stringify(data.getProperty(0, 0, 'style')));

  var options = {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%'
  };

  var table1 = new google.visualization.Table(document.getElementById('table_div1'));
  var table2 = new google.visualization.Table(document.getElementById('table_div2'));

  table1.draw(data, options);
  table2.draw(groupView, options);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
data - Row 1 does not display with ColorFormat. Row 7 contains the same date as Row 1 and it displays the ColorFormat.
<div id="table_div1"></div>

<p>
  <hr/>
</p>
groupView - Row 1 does not display with ColorFormat.
<div id="table_div2"></div>

edited May 4, 2018 at 18:22

answered May 4, 2018 at 13:27

WhiteHat

61.3k7 gold badges54 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cmill Over a year ago

Thank you for the quick reply! As you suggested I set the width prior to the color format. Can you check your example? I think it's now lost the width in this order.

WhiteHat Over a year ago

silly me, i was thinking google wouldn't override a style that already existed, changed answer above...

cmill Over a year ago

Worked perfectly this time! I have implemented it in my project and life is good! Time for the weekend and a beer. Have a very nice weekend!

Collectives™ on Stack Overflow

Google Visualization row 1 does not display .ColorFormat() when using .setProperty()

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related