`Unveil the hidden edges of the Google timeline chart`

Does anyone know how to remove the chart border from a Google timeline chart using this script?

<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('example5.4');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.4" style="height: 150px;"></div>

I want to change the image in the chart from: enter image description here to: enter image description here

If you have any suggestions or solutions, I would greatly appreciate it! Thank you!

javascriptchartsgoogle-visualizationtimeline

Answer №1

There is currently no config option available to change the chart's SVG, but we can manually make modifications during the chart's 'ready' event.

In this solution, we locate the <rect> element of the chart and remove the stroke property.

google.visualization.events.addListener(chart, 'ready', function () {
  var rects = container.getElementsByTagName('rect');
  Array.prototype.forEach.call(rects, function(rect) {
    // identify the chart <rect> element
    if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
      // remove stroke from the last <rect> element
      rect.setAttribute('stroke', 'none');
      rect.setAttribute('stroke-width', '0');
    }
  });
});

Check out the working snippet below:

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

function drawChart() {
  var container = document.getElementById('example5.4');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
    [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
    [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

  var options = {
    backgroundColor: {
      //fill: 'red',
      stroke: 'red'
    },
    colors: ['#cbb69d', '#603913', '#c69c6e'],
  };

  google.visualization.events.addListener(chart, 'ready', function () {
    var rects = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(rects, function(rect) {
      // find chart <rect> element
      if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
        // remove stroke from last <rect> element
        rect.setAttribute('stroke', 'none');
        rect.setAttribute('stroke-width', '0');
      }
    });
  });

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the purpose of App.hiddenDivs in jQuery code snippet provided?

Exploring various JQuery performance tips on this insightful website Do you happen to know the significance of App.hiddenDivs ? ...

javascriptjqueryperformance

"Effortlessly attach and send multiple images via email using Dropzone in

I am encountering an issue with uploading multiple image files and sending them via email to customers. The ajax request is throwing an error call to a member function getclientoriginalname() on array when the uploadMultiple: true, option is added to dropz ...

javascriptphpajaxlaraveldropzone.js

Spinning a CSS object around an axis

Trying to add a unique touch to my image rotation with CSS. While familiar with rotating around x, y, and z axis, I want to achieve a diagonal rotation this time. Wondering if there's a way to tweak the y axis for a more slanted effect on my image? ...

javascripthtmlcss

Form containing a pair of buttons

I am attempting to design multiple forms with two buttons, each of which will submit the form to a different script. One button will use ajax for submission, while the other will simply submit the form without ajax. <?php foreach($objects as $object) : ...

javascriptjqueryforms

What could be causing my webpage to freeze every time a filter button is selected?

Tasked with developing a webpage similar to Pinterest by utilizing data from a JSON response. Each JSON object contains a service_name key, which can be manual, twitter, or instagram. I made an effort to implement three filter buttons to only display the r ...

javascriptjqueryhtmlcssjson

What is the best way to design a new class that will serve as the parent class for both of my existing classes, allowing them

I am facing a challenge with my programming classes. I have two classes, "Player" and "Enemy", each with similar methods and properties. I want them to inherit from a parent class that I'll create called "Game Object". How can I approach creating thi ...

javascriptclassecmascript-6es6-class

Obtain information using AJAX calls with jQuery Flot

Having an issue with jQuery Flot that I need help resolving. PHP output (not in JSON format): [[1, 153], [2, 513], [3, 644]] ~~ [[1, 1553], [2, 1903], [3, 2680]] Here is the jQuery call: $.ajax({ url: 'xxx.php', success: function (dat ...

javascriptjqueryajaxgetflot

Using jquery to dynamically retrieve the unique property identifier

I have a dynamically generated table with a button labeled as view images. Each time this button is clicked, I need to retrieve the image names from the database for that specific property. <?php foreach($unapproved as $unapp):?> < ...

javascriptphpjquery

Alter the style type of a Next.js element dynamically

I am currently working on dynamically changing the color of an element based on the result of a function //Sample function if ("123".includes("5")) { color = "boldOrange" } else { let color = "boldGreen" } Within my CSS, I have two clas ...

javascriptreactjstypescriptnext.js

When dynamically accessed, the property of a JSON object is considered "undefined"

I'm running into trouble trying to access properties of a JSON object in my JavaScript code using obj[varWithPropName]. Strangely, it does work when I use obj["PropName"]. Here's a simplified snippet for reference: import * as CharInfo from &ap ...

javascriptjsonobject

Using Javascript to map an array with objects from a different array and then returning the computed array

I'm struggling to solve a seemingly simple issue. I have an array that looks like this: Array 1: [ { "id": 1, "date": "2019-03-27", "time": 1, "max_tasks": 3, "reservations": [ 5, 2 ...

javascriptvue.js

Identifying mouse proximity through processing.js

I am using processing.js for coding. I am trying to dynamically adjust the size variable so that it increases as the cursor approaches the ellipse and decreases as the cursor moves away from it. I also want to set a limit for the size, preferably between 5 ...

javascripthtmlprocessingprocessing.js

performing asynchronous operations with async functions within the array.map() method in JavaScript

My goal is to loop through an array of elements, check if a theme exists for each element using the "findOne()" function, and if not, create a new theme, save it, and make some changes. If the theme already exists, I just need to apply some changes and the ...

javascriptnode.jsasync-await

What is the best way to handle waiting for a request and user input simultaneously?

Imagine a scenario where a component loads and initiates an asynchronous request. This component also includes a submit button that, when clicked by the user, triggers a function that depends on the result of the initial request. How can I ensure that this ...

javascriptvue.jsasynchronous

Retrieve the child property of an object directly without referencing the parent property

When using html2json, it returns an object with child objects. The challenge is to retrieve the value of the key "text", which can be located in different places depending on how many child objects there are. I have attempted the following code, but due t ...

javascriptnode.jsjsonobjectparent-child

Having trouble implementing a transition on a dropdown menu in React

Can anyone help me troubleshoot an issue with adding a transition to a select box that appears when clicking on an input field arrow? I have tried implementing a CSS transition property, but it doesn't seem to be working. Any suggestions on what might ...

javascripthtmlcssreactjssass

The next.js application utilizing a custom server is experiencing rendering issues

Expanding my knowledge to next.js, I might be overlooking a simple aspect. My goal is to implement custom routes, so I crafted a server.js file and adjusted the command in my package.json to node server.js. Below is the entirety of the server.js file: con ...

javascriptexpressnext.js

The function is failing to return a false value

I have encountered a problem with my code - it works fine in Chrome but not in IE or Firefox. I've tried using return false; and event.preventDefault() but they don't seem to be effective in Firefox. The issue arises when the button grabs informa ...

javascriptjqueryajax

Enhance with Laravel combined with AngularJS

I've encountered some issues with the "edit" part while working on a Laravel + AngularJS CRUD application. An internal server error is being displayed, and I'm seeking assistance to understand its cause. Error "GET localhost/crudtcc/public/ap ...

javascriptphpmysqlangularjslaravel

Tips for developing an npm package that includes a demonstration application

When creating packages, I believe it's important to include a demo app. However, I'm unsure about the best way to organize the file structure for this purpose. My goal is to have one Github repository containing both my published NPM module and ...

javascriptnpmpackage-development