I'm trying to create a list of people who have worked today, with their start and end times. This is no problem for people who have records, but I can't figure out how to get Google's Timeline chart to print a name of someone and then no entries on graph.
Here is the documentation, but it says nothing about blank entries:
https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#BarsOneRow
Here is a sample of my code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["timeline"]});
google.setOnLoadCallback(drawChart);
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: 'Employee' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Spiderman', new Date(2015, 04, 07, 04, 43, 49), new Date(2015, 04, 07, 06, 45, 05), ],
[ 'Iron Man', new Date(2015, 04, 07, 04, 40, 53), new Date(2015, 04, 07, 08, 45, 47), ],
[ 'Spiderman', new Date(2015, 04, 07, 09, 10, 19), new Date(2015, 04, 07, 13, 22, 02), ],
]);
var options = {
timeline: {
singleColor: '#00f',
colorByRowLabel: true,
groupByRowLabel: true,
},
backgroundColor: '#ffffff'
};
chart.draw(dataTable, options);
}
</script>
What do I need to do to add a row for Superman, even though he didn't work that day?
Use noData() method to enable "No data" label: chart. noData().
Double-click the chart you want to change. At the right, click Setup. Select the cells you want to include in your chart. Optional: To add more data to the chart, click Add another range.
arrayToDataTable()This helper function creates and populates a DataTable using a single call.
There does not seem to be some built-in way to add null entries to Google Timelines.But still you can remove the rect
element which are showing blank row by writing some extra code
Step 1 Add start date and end date with same date values for non-working employee so that blue rectangular box would have minimum width.
Step 2 Now since your rectangular box corresponding to non-working employee has minimum width. So you can add this code to disappear all rect
element with minimum width
(function(){ //anonymous self calling function to prevent variable name conficts
var el=container.getElementsByTagName("rect"); //get all the descendant rect element inside the container
var width=100000000; //set a large initial value to width
var elToRem=[]; //element would be added to this array for removal
for(var i=0;i<el.length;i++){ //looping over all the rect element of container
var cwidth=parseInt(el[i].getAttribute("width"));//getting the width of ith element
if(cwidth<width){ //if current element width is less than previous width then this is min. width and ith element should be removed
elToRem=[el[i]];
width=cwidth; //setting the width with min width
}
else if(cwidth==width){ //if current element width is equal to previous width then more that one element would be removed
elToRem.push(el[i]);
}
}
for(var i=0;i<elToRem.length;i++) // now iterate JUST the elements to remove
elToRem[i].setAttribute("fill","none"); //make invisible all the rect element which has minimum width
})();
NOTE :
Only use this code after making sure that there is some blank entry as it will always disappear
rect
element with minimum width no matter whether it represents blank entry or not
Working demo
You can use Google Chart's Options to set the style of the series rendered by adding a Role column for Style (https://developers.google.com/chart/interactive/docs/roles).
E.g.
// original column definitions...
// be sure to configure columns correctly (see comments below)
dataTable.addColumn({ type: 'string', role: 'style' });
// ...
// after adding other rows
// ...
// create a style option to set opacity to 0
let blankStyle = "opacity: 0";
// use some default date for date columns
let defaultDate = someDefaultDate;
dataTable.addRow(['Superman', blankDate, blankDate, blankStyle]);
Working demo
Things to note:
I find the Style Role Column very useful and recommend it's usage over post render DOM manipulation. It's also the superior way of controlling the series colours as other documented approaches do not work for all situations. It's often refered to as the "undocumented style role" but it is in fact documented here https://developers.google.com/chart/interactive/docs/roles .
Adding to bugwheels94 Response (Because i cannot add a comment)
You can use the undocumented style role to add a color to each bar ( http://jsfiddle.net/re4qo6gs/ ) and use a certain color to make your "dummy" bars to remove.
modifying his code.
for(var i=0;i<elToRem.length;i++){ // now iterate JUST the elements to remove
if (elToRem.getAttribute("fill") == "#YourDUMMYColor"){
elToRem[i].setAttribute("fill","none"); //make invisible all the rect element which has minimum width
elToRem[i].setAttribute("stroke","none"); // Also remove the stroke added by the style.
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With