2

I would like my users to be able to click anywhere on my gauge and then respond to the event.

Currently I am using the following plot options but it only makes the gauge needle clickable.

Any ideas on how to configure this to use the whole gauge area? I have updated my code to make use of the method suggested below, but the click event is not being attached as expected.

I am using the directive as found here https://github.com/rootux/angular-highcharts-directive

angular.module('chartsExample.directives',[])

.directive('gauge', function () {
    return {
        restrict: 'E',
        template: '<div></div>',
        transclude: true,
        replace: true,

        link: function (scope, element, attrs) {
            var chartsDefaults = {
                chart: {
                    renderTo: element[0],
                    type: "gauge",
                    height: attrs.height || null,
                    width: attrs.width || null,
                    cursor: 'pointer',
                    events:{
                        click:function(){
                            alert('click');
                        }
                    }
                }
            };

            //Update when charts data changes
            scope.$watch(function() { return attrs.value; }, function(value) {
                if(!attrs.value) return;
                // We need deep copy in order to NOT override original chart object.
                // This allows us to override chart data member and still the keep
                // our original renderTo will be the same
                var deepCopy = true;
                var newSettings = {};
                $.extend(deepCopy, newSettings, chartsDefaults, JSON.parse(attrs.value));
                var chart = new Highcharts.Chart(newSettings);
            });
        }
    }

});
Dirk Kok
  • 23
  • 1
  • 4

1 Answers1

1

You can use click event on chart:

http://api.highcharts.com/highcharts#chart.events.click

http://jsfiddle.net/Z3huw/

Sebastian Bochan
  • 37,348
  • 3
  • 49
  • 75
  • Thanks this has given me a better approach for the Gauge, but does not work in my case. I think it has something todo with the fact that I am creating the chart using an AngularJS directive. I have updated my question to reflect the complete picture. – Dirk Kok May 28 '13 at 13:09
  • Your original click event on chart did the trick. I had some issues in my directive. The working result can be seen here. http://jsfiddle.net/Paladin_za/9Z2nd/ – Dirk Kok May 29 '13 at 07:04