CODEWITHSUNDEEP
jquerychartsgoogle-visualization
tina
tina

Reputation: 243

Google Chart Timeline: change bars shape and color selection

EDIT: this is the updated code, setFillStroke() change the color of the stroke:

        var observer = new MutationObserver(setBorderRadius);
        var observer2 = new MutationObserver(setFillStroke);
        google.visualization.events.addListener(chart, 'ready', function () {
          setBorderRadius();
          setFillStroke();
          observer.observe(container, {
            childList: true,
            subtree: true
          });
          observer2.observe(container, {
              childList: true,
              subtree: true
            });
        });

        function setBorderRadius() {
          Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
            if (parseFloat(rect.getAttribute('x')) > 0) {
              rect.setAttribute('rx', 10);
              rect.setAttribute('ry', 10);
            };
          });
        };

        function setFillStroke() {
            Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
                if (rect.getAttribute('stroke') == '#000000') {
                  rect.setAttribute('stroke', '#ffffff');
                };
              });
        };

With the same method I wrote a code for make round point the elements that have the same date of start and end (like new Date(2013, 01,01), new Date(2013, 01,01)):

function biggerPoints() {
            Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
                if (rect.getAttribute('width') == '3') {
                  rect.setAttribute('width', '20');
                  rect.setAttribute('height', '20');
                  rect.setAttribute('rx', 20);
                  rect.setAttribute('ry', 20);
                };
              });
            };

I would like to round the edge of the rect that Google Chart Timeline create, and to change the stoke attribute color when an element is selected. Since I can't find any option to do it I tryed with jQuery, but it's not working:

$('rect').attr('rx', '20');
$('rect').attr('ry', '20');
$('rect').attr('stoke', '#202020'); //just for test I'm trying to add the stroke attribute to all, but nothing appened

Is this even possible?

Upvotes: 1

Views: 1776

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

modify the chart elements when the 'ready' event fires

however, the chart will revert back to the original style on any interactivity

use a MutationObserver to re-apply the custom style

see the following working snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['timeline']
});

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: 'President' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
    [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
    [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]
  ]);

  var observer = new MutationObserver(setBorderRadius);
  google.visualization.events.addListener(chart, 'ready', function () {
    setBorderRadius();
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  function setBorderRadius() {
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
      if (parseFloat(rect.getAttribute('x')) > 0) {
        rect.setAttribute('rx', 20);
        rect.setAttribute('ry', 20);
      }
    });
  }

  chart.draw(dataTable);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

Upvotes: 3

Related Questions