customizing tooltip with multiple values

Question

I'm working on angularjs google charts-stacked bar. I want to customize the tooltip data displayed on the stacked bar, want to show all the stacks information of that bar on mouseover on the stacked bar(currently it only displays the information of the current mouse over stack). Please find the demo http://plnkr.co/edit/ahg7JiBpOfIGIy0f3Mat?p=preview

For the first stack on mouse over, tooltip should display Status1:30,status2:60,status3:40 and on mouseover on second bar tooltip should display status1:9,status2:33,status3:12. Please advice. I tried using the below option, but its not working.

tooltip: {
                shared:true
            }

js code:

var app = angular.module('myApp', ["googlechart"]);
 app.controller('myController', function ($scope) {
        $scope.chart = {};
        $scope.chart.options = {
            'fontSize': '12',
            "isStacked": "true",

       };
        $scope.chart.type = "ColumnChart";
        $scope.chart.cssStyle = "height:500px; width:600px;";
        var annotations={
                role : "annotation",
                type : "string",
                p : {
                    role : "annotation"
                }
            };

        $scope.chart.data = {
            "cols": [
               { id: "status", label: "Status", type: "string" },
               { id: "statusCount", label: "status1", type: "number"},
               { id: "statusCount2", label: "status2", type: "number"},
               { id: "statusCount3", label: "status3", type: "number"},
        ]
        };

    $scope.loadDataToDrawChart = 
                function(response) {
                    $scope.responseData = response;
                        var rows = [];
                        var row = null;
                         var jsonData = [{"spID":100,"spValue":30,"spStatus":"recent","name":"jtest"},
   {"spID":100,"spValue":60,"spStatus":"old","name":"jtest"},{"spID":100,"spValue":40,"spStatus":"recent","name":"jtest"},
    {"spID":222,"spValue":9,"spStatus":"done","name":"mtest"},
{"spID":222,"spValue":33,"spStatus":"inprogress","name":"mtest"},
    {"spID":222,"spValue":12,"spStatus":"inprogress","name":"mtest"}];  
    var rows = [];
                        var row = null;
                        var id = null;
                        jsonData.forEach(function (value, key) {
                            if (id !== value.spID) {
                                id = value.spID;
                                if (row !== null) {
                                    rows.push(row);
                                }
                                row = {c: [{v: value.spID}]};
                            }
                            row.c.push({v: value.spValue});
                        });
                        rows.push(row);
                        $scope.chart.data.rows = rows;
                } 
      $scope.loadDataToDrawChart();

    $scope.$on('loadChart',function(event){
        $scope.loadDataToDrawChart();
    });
    $scope.chart.formatters = {};

    $scope.switch = function (chartType) {
        $scope.chart.type = chartType;
        AxisTransform();
    };
    AxisTransform = function () {
        tempvAxis = $scope.chart.options.vAxis;
        temphAxis = $scope.chart.options.hAxis;
        $scope.chart.options.vAxis = temphAxis;
        $scope.chart.options.hAxis = tempvAxis;
    };
   });

I have gone through the link https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#enabling_html_tooltip , but could not able to implement the way they are implementing as i'm not using google.visualization to display the charts. Suggestions would be helpful.

WhiteHat · Accepted Answer · 2017-04-26 11:31:05Z

1

try the following chart option...

focusTarget: 'category'

the tooltip will display all the category values for the given x-axis value...

answered Apr 26, 2017 at 11:31

WhiteHat

61.3k7 gold badges54 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3684675 Over a year ago

I tried keeping focusTarget in options, but its not showing all the stack values on the tooltip. Please find the demo plnkr.co/edit/LAbAQr7HeFEqACawUCCd?p=preview.

WhiteHat Over a year ago

it should not be part of tooltip and stand-alone, similar to isStacked: true --> plnkr.co/edit/sG5EfcTjjAtG9gC3cgb8?p=preview

Mhd Wael Jazmati · Accepted Answer · 2017-04-26 10:33:48Z

0

you can override a "ngChart" behavior by creating a new directive with only link function as the following app.directive("ngChart",function(){ return function (scope,elem,attr){ //and here you can customizing "ngChart" as needed} })

answered Apr 26, 2017 at 10:33

Mhd Wael Jazmati

6839 silver badges18 bronze badges

2 Comments

user3684675 Over a year ago

Please find demo plnkr.co/edit/ahg7JiBpOfIGIy0f3Mat?p=preview. As I'm not using google.visualization those functions are not supporting.

user3684675 Over a year ago

Any suggestions would be helpful.

Collectives™ on Stack Overflow

customizing tooltip with multiple values

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related