Skip to content Skip to sidebar Skip to footer

How To Customize Angular Google Chart Legend Info

I have google chart (line chart), need to customize legend with some extra information. Please refer this http://plnkr.co/edit/ysZwYaAQpMhHarcA2UHq?p=preview [Plunker][1] to know

Solution 1:

to add the score to the legend,
you can add the score to the column label before drawing the chart

replace the drawChart function with the following...

    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;
        }
      }
    }

Post a Comment for "How To Customize Angular Google Chart Legend Info"