Google Timeline Chart - Change no-duration events to circles

1
votes

We are currently making good use of the Google Charting library, specifically the Timeline chart visualization.

One of the charts we're graphing have time-ranges and it works well for our purposes.

However, we have another chart that tracks events which have no duration. These events end up producing bars that are very thin in width (as expected):

Chart with thin bars

These thin bars are not ideal, and I'm wondering if anyone knows of any way to replace them with circles? We have hover events on the bars and it's difficult to get the mouse over such a small area.

Ideally, it would look like this:

Chart with Dots

Also, it would be great if we didn't lose the hover functionality by changing the shapes to circles.

1
javascriptphphtmlchartsgoogle-visualization
you could probably manually change the svg, once the chart's 'ready' event fires, but if you're planning to use the getImageURI method to create an image of the chart, the changes would not show thru... - WhiteHat

1 Answers

0
votes

My quick and dirty solution for this was to simply add a CSS property that forced all 'ticks' in a specific timeline to be square shaped. This met our requirements without having to delve deep into the svg.

#event-timeline g:nth-of-type(4) rect, #event-timeline g:nth-of-type(6) rect {
    width: 23px;
    height: 23px;
}

example result