diff --git a/README.md b/README.md
index 006e5c8..85fe505 100644
--- a/README.md
+++ b/README.md
@@ -41,12 +41,11 @@ Add the chart module as a dependency to your application module:
Apply the directive to your div elements as an element, attribute, class, or comment:
-
-
-
-
+
+
+
-Your data to pass to `$.jqplot` will be the evaluated value of the `ui-chart` attribute, while the options to pass to `$.jqplot` will be the evaluated value of the `chart-options` attribute - the evaluations are done in scope.
+Your data to pass to `$.jqplot` will be the evaluated value of the `ui-chart` attribute, while the options to pass to `$.jqplot` will be the evaluated value of the `chart-options` attribute - the evaluations are done in scope. It is necessary to specify `id` attribute because it will be used by `$.jqplot`. It is possible to pass a function to `chart-click` attribute that will be called after click event on any node in the plot
# Options
diff --git a/src/chart.js b/src/chart.js
index 2840081..96fd9c0 100644
--- a/src/chart.js
+++ b/src/chart.js
@@ -7,11 +7,16 @@ angular.module('ui.chart', [])
link: function (scope, elem, attrs) {
var renderChart = function () {
var data = scope.$eval(attrs.uiChart);
- elem.html('');
+
if (!angular.isArray(data)) {
return;
}
+ var id = elem.attr('id');
+ if (angular.isUndefined(id)) {
+ throw 'Invalid ui.graph id attribute';
+ }
+
var opts = {};
if (!angular.isUndefined(attrs.chartOptions)) {
opts = scope.$eval(attrs.chartOptions);
@@ -20,7 +25,18 @@ angular.module('ui.chart', [])
}
}
- elem.jqplot(data, opts);
+ $(elem).unbind("jqplotDataClick");
+ $.jqplot(id, data, opts).destroy();
+ $(elem).html('');
+ $.jqplot(id, data, opts);
+
+ var click_callback = scope.$eval(attrs.chartClick);
+ if (angular.isFunction(click_callback)) {
+ return $(elem).bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
+ return click_callback(ev, seriesIndex, pointIndex, data);
+ });
+ }
+
};
scope.$watch(attrs.uiChart, function () {