How to customize angular google chart legend information
I have a google chart (line chart), you need to customize a legend with some additional information. Please refer to this http://plnkr.co/edit/ysZwYaAQpMhHarcA2UHq?p=preview
[Plunker][1]
for more details. I want legend information like below to be tied to
So, if you see the image below, and my fiddle, I have R1, R2, R3, etc. as releases to choose from, and each version has its own score, so I want this score to appear as R1 100 like below image. Note that the data in the graph is different and the dropdown for selecting these releases is different. but both have release R1, R2. So when I select the dropdown value R1, R2 or R3, I only click that row from the graphic data in the drawgraph.
So basically, I need to show the selected R1 grade in the legend.
Please give me some insight or a link where this is done earlier. Thanks in advance.
source to share
to add a grade to the legend,
you can add a grade to the column label before drawing the chart
replace the function drawChart
like this:
function drawChart() {
var chartColors = [];
var chartColumns = [0];
var checks = document.getElementsByTagName('input');
for (var i = 0; i < $scope.selectedNewRelease.length; i++) {
var seriesColumn = getColumnIndex(x, $scope.selectedNewRelease[i].releaseId);
chartColumns.push(seriesColumn);
x.setColumnLabel(seriesColumn, x.getColumnLabel(seriesColumn) + ' ' + $scope.selectedNewRelease[i].score);
}
var view = new google.visualization.DataView(x);
view.setColumns(chartColumns);
chart.draw(view, options);
if ($scope.selectedNewRelease.length>0) {
$scope.Grtgraph=true;
}else{
$scope.Grtgraph=false;
}
}
function getColumnIndex(data, columnLabel) {
for (var i = 0; i < data.getNumberOfColumns(); i++) {
if (data.getColumnLabel(i) === columnLabel) {
return i;
}
}
}
source to share