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 () {