An Angular directive that wraps Flotcharts.
This library is provided as a Bower component and NPM module:
bower install angular-flot
npm install angular-flot
First, make sure to add Flotchart to your project, as explained in Flotchart's ReadMe since we don't bundle Flotcharts for you.
angular-flot to the list of dependencies in your Angular.JS application:
In your controller, create two variables to hold the dataset and Flot chart options:
In your view or template, add the
flot directive, making sure to specify both the
options attributes, pointing to the scope variables defined above:
The Flot chart is created in a
div element as a child of the
flot directive. To select the DOM
element using jQuery, just do as follows (you might have to adjust the example based on the contents
of your page):
dataset: Name of a variable defined in the current $scope to be used as input dataset. See https://github.com/flot/flot/blob/master/API.md#data-format for more information.
options: Name of an object defined in the current scope used to configure the chart. See https://github.com/flot/flot/blob/master/API.md#plot-options for more information.
on-plot-click: callback function for the 'plotclick' event.
on-plot-hover: callback function for the 'plothover' event.
on-plot-selected: callback function for the 'plotselected' event.
width: Chart width, e.g.: "100%" or "350px".
height: Chart height, e.g.: "100%" or "100px".
callback: callback function with flot object.