Google Visualization Chart horizontal bar with target (vertical line - charts

Question

I would like to set up a small and light chart using Google Visualizion chart.
The idea would be to have an horizontal bar chart (this I know how to do) BUT combined with a vertical line showing if a target is exceeded or not.
The target can be different for each data.
In addition I would like to include an indicator (red/green) easily identifying who is under target and who is above (+ optinally a label just after the green/red dot).
Any idea how to proceed?

Answer 1

actually, you can just use a BarChart,
and change the series type for the last two columns...
series: {
1: {
type: 'line'
},
2: {
type: 'scatter'
}
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', id: 'x'});
dataTable.addColumn({type: 'number', id: 'bar'});
dataTable.addColumn({type: 'string', role: 'annotation'});
dataTable.addColumn({type: 'number', id: 'line'});
dataTable.addColumn({type: 'number', id: 'scatter'});
dataTable.addColumn({type: 'string', role: 'style'});
dataTable.addRows([
['', 300, '300', 300, 800, '#4caf50'],
['', 600, '600', 600, 800, '#f44336'],
['', 200, '200', 200, 800, '#4caf50'],
['', 150, '150', 150, 800, '#f44336'],
]);
var options = {
annotations: {
alwaysOutside: true,
textStyle: {
color: '#000000'
}
},
colors: ['#9e9e9e', '#2196f3'],
legend: 'none',
hAxis: {
gridlines: {
count: 0
},
textPosition: 'none'
},
series: {
1: {
lineWidth: 4,
type: 'line'
},
2: {
type: 'scatter'
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
EDIT
to add custom labels next to the scatter points,
you can use chart method --> getChartLayoutInterface()
which has a method for --> getBoundingBox(id)
this can be used to find the position of a chart element.
where id is the string id of the point, in this format --> point#series#row -- point#0#0
on the chart's 'ready' event, we can position custom labels next to the points.
google.visualization.events.addListener(chart, 'ready', function (sender) {
var padding = 16;
var chartLayout = chart.getChartLayoutInterface();
var containerBounds = chart.getContainer().getBoundingClientRect();
for (var row = 0; row < dataTable.getNumberOfRows(); row++) {
var pointBounds = chartLayout.getBoundingBox('point#2#' + row);
var dataLabel = document.createElement('span');
dataLabel.className = 'data-label';
dataLabel.innerHTML = 'Label ' + row;
dataLabel.style.top = (containerBounds.top + pointBounds.top - (pointBounds.height / 2)) + 'px';
dataLabel.style.left = (containerBounds.left + pointBounds.left + pointBounds.width + padding) + 'px';
chart.getContainer().appendChild(dataLabel);
}
});
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', id: 'x'});
dataTable.addColumn({type: 'number', id: 'bar'});
dataTable.addColumn({type: 'string', role: 'annotation'});
dataTable.addColumn({type: 'number', id: 'line'});
dataTable.addColumn({type: 'number', id: 'scatter'});
dataTable.addColumn({type: 'string', role: 'style'});
dataTable.addRows([
['', 300, '300', 300, 800, '#4caf50'],
['', 600, '600', 600, 800, '#f44336'],
['', 200, '200', 200, 800, '#4caf50'],
['', 150, '150', 150, 800, '#f44336'],
]);
var options = {
annotations: {
alwaysOutside: true,
textStyle: {
color: '#000000'
}
},
colors: ['#9e9e9e', '#2196f3'],
legend: 'none',
hAxis: {
gridlines: {
count: 0
},
textPosition: 'none'
},
series: {
1: {
lineWidth: 4,
type: 'line'
},
2: {
type: 'scatter'
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart'));
google.visualization.events.addListener(chart, 'ready', function (sender) {
var padding = 16;
var chartLayout = chart.getChartLayoutInterface();
var containerBounds = chart.getContainer().getBoundingClientRect();
for (var row = 0; row < dataTable.getNumberOfRows(); row++) {
var pointBounds = chartLayout.getBoundingBox('point#2#' + row);
var dataLabel = document.createElement('span');
dataLabel.className = 'data-label';
dataLabel.innerHTML = 'Label ' + row;
dataLabel.style.top = (containerBounds.top + pointBounds.top - (pointBounds.height / 2)) + 'px';
dataLabel.style.left = (containerBounds.left + pointBounds.left + pointBounds.width + padding) + 'px';
chart.getContainer().appendChild(dataLabel);
}
});
chart.draw(dataTable, options);
});
.data-label {
position: absolute;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>