score:67
since charting involves heavy dom manipulation, directives are the way to go.
data can be kept in the controller
app.controller('ctrl', function($scope) {
$scope.data = [[[0, 1], [1, 5], [2, 2]]];
});
and you can create a custom html tag1 specifying the model you want to get data from
<chart ng-model='data'></chart>
which angular can compile through a directive
app.directive('chart', function() {
return {
restrict: 'e',
link: function(scope, elem, attrs) {
var data = scope[attrs.ngmodel];
$.plot(elem, data, {});
elem.show();
}
};
});
this process is similar for most plugins that modify the dom.
-*-
also, you can watch for changes in the chart's underlying data and redraw it, so this way you can grab data through the $http service from your controller and update the view automatically. this can be achieved by modifying the linking function in the directive definition object
var chart = null,
opts = { };
scope.$watch(attrs.ngmodel, function(v){
if(!chart){
chart = $.plot(elem, v , opts);
elem.show();
}else{
chart.setdata(v);
chart.setupgrid();
chart.draw();
}
});
notice the usage of flot's api within the directive to achieve what we want.
1 can be an attribute too.
score:1
to use jquery plugins with angularjs, you have to wrap them in directives, you can find some exemples of jquery plugins directives by reading the source code of angularui directives: https://github.com/angular-ui/angular-ui/tree/master/modules/directives
Source: stackoverflow.com
Related Query
- How to Integrate Flot with AngularJS?
- How to integrate highchart range slider in angularjs
- How to initiate AngularJs directive when its name is set with ng-class
- How to have multiple highcharts with different series data in vuejs without repeating code
- How to properly integrate google spreadsheets with highcharts?
- How to integrate Highmap chart with angular 5 Application?
- How to work with Highcharts in AngularJS
- Highcharts - how to have a chart with dynamic height?
- How to use highcharts with angular 5?
- How to save an image of the chart on the server with highcharts?
- How can I read an Excel File with JavaScript (without ActiveXObject)
- How to include highcharts with bower?
- how to import highcharts with webpack and babel
- How to prevent highcharts from shortening labels with ellipsis
- bootstrap data-toggle="tab" - how to make a tab active with a JS call
- How to export the whole page or html content with Highcharts not just the chart?
- How to show a column with the value Zero in Column chart in Highcharts?
- How To Use Epoch Time With Highcharts Series Data?
- How to create a new Highstock chart with new Highchart and not jquery?
- How to get rangeSelector to work with HighCharts
- Highcharts : Chart with drilldown how to obtain click event of drill up button
- How to display highchart y axis with constistant data
- How to use highcharts with princeXML?
- How to import Proj4js to use with Highmaps?
- AngularJS watch array of objects with index
- How to structure Angular with Highcharts and lots of dynamic data
- How to add mean line in a boxplot made with highcharter?
- How to handle Highcharts events from an AngularJS directive?
- How to display highcharts in ng-repeat angularjs
- How can I configure the legend with a specific height in highstock?
More Query from same tag
- epoch datetime not displaying correctly in HighStock chart
- How to flag a value in a series in highcharts, and follow it, even if the position in the series change?
- Highcharts: Column chart with empty data
- Dynamic highcharts pie chart with drilldown
- How to change "defaultOptions" lang in highCharts dynamically
- I want the three circles to overlap. (use highcharts)
- Rendering more than one chart with Highcharts using Angular js Directives
- How to change the text color in Highcharts
- Add additional data to a Highcharts series for use in formatters
- How do I select a series in a spline by clicking on the spline in between the points?
- no idea which line of code is using getPreventDefault()
- Plot highcharts using ajax
- How to plot line per category in highcharts?
- Highcharts - choosing the legend size
- How to place 2 div one next the other one
- Why does highchart add a padding for a certain bar chart?
- highcharts json multiple datetime series
- How to customize both, width of the bar & spacing between bar in Highcharts.js
- Highcharts - Add difference between y-points
- Displaying percentage in Y-axis of Highcharts column chart
- Use CSS class in DOT NET High Chart to change PlotOptionsBar
- Styling bar colors in Highcharts with a gradient issue
- Xaxis Highcharts data loading issue
- Highstock- limit grid lines for y axis
- hightcharts: change standard position of tooltip AND shadow (hover)
- Prevent from executing previous JavaScript with turbolinks and highcharts //LazyHighCharts
- How do I implement grouped categories plugin using text and images as x axis categories? In highchart?
- How to resolve the internet browser issue in High Maps?
- Highcharts x-range series: difficulty removing numerical labels on y-axis
- plotting irregular time data from CSV with highcharts