anychart-angularjs
Advanced tools
AngularJS v1.x directives for AnyChart provide an easy way to use AnyChart JavaScript Charts with AngularJS Framework.
You can install AngularJS-plugin using npm, bower or yarn:
npm install anychart-angularjsbower install anychart-angularjsyarn add anychart-angularjsYou can download AngularJS plugin directly from the dist folder.
Here is a basic sample that shows how to add a chart:
<!DOCTYPE html>
<!-- Add the "ng-app" directive to activate MyApp module. -->
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Anychart AngularJS plugin demo</title>
<!-- Add libraries to work with. -->
<script src="angular.min.js"></script>
<script src="anychart-bundle.min.js"></script>
<script src="anychart-angularjs.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
(function() {
'use strict';
// Declare your own module and controller
// and inject anychart-angularjs module to
// start working.
angular
.module('MyApp', ['anychart-angularjs'])
.controller('MyCtrl', ['$scope', function($scope) {
// In this basic case you just need to
// provide the data set to visualize.
$scope.myData = [
["Chocolate", 5],
["Rhubarb compote", 2],
["Crêpe Suzette", 2],
["American blueberry", 2],
["Buttermilk", 1]
];
}]);
})();
</script>
</head>
<!-- Add your controller -->
<body ng-controller="MyCtrl">
<!-- Add AnyChart directives. It’s as easy as pie (chart)! -->
<div
anychart
ac-type="pie"
ac-data="myData"
ac-title="Simple Pie Demo"
ac-legend="true"
style="width: 100%; height: 100%">
</div>
</body>
</html>
AnychartService is an Angular Service. It is used to share data between scopes and to provide more opportunities for developers. To use it in your module use the standard Angular DI mechanism.
By default, AnychartService, as a shareable object, contains two fields:
AnychartService.charts - an array that contains chart instances for
dashboarding purposes.AnychartService.chart - current chart. Auto or manually created.
It is useful for any deferred actions like async data loading.angular
.module('MyApp', ['anychart-angularjs'])
.controller('MyCtrl', ['$scope', '$http', 'AnychartService', function($scope, $http, AnychartService) {
var service = AnychartService;
$http.get('sample1.json').then(function(response) {
if (service.chart) // If a chart is successfully instantiated.
service.chart.data(response.data);
});
}]);
| Directive | Code sample | Description |
|---|---|---|
| anychart | <div anychart></div> | Supports attributes specific to this directive and generates a chart from anychart module (not gantt, map or stock chart types) |
| anygantt | <div anygantt></div> | Supports attributes specific to this directive and generates a chart from anygantt module (ganttResource and ganttProject) |
| anymap | <div anymap></div> | Supports attributes specific to this directive and generates a chart from anymap module (choropleth, bubbleMap, etc.). |
| anystock | <div anystock></div> | Supports attributes specific to this directive and generates a chart from anystock module (anychart.stock). |
| anychart-stage | <div anychart-stage></div> | Generates anychart stage to deal with complex charts and any kind of custom drawing. |
anychart directive attributesThis directive is used to work with charts from anychart module.
| Attribute | View Sample | Controller Sample | Description |
|---|---|---|---|
| ac-type | <div anychart ac-type="line"></div> | - | Kind of chart to create. In a sample, anychart.line() constructor is called. |
| ac-data | <div anychart ac-data="myData"></div> | $scope.myData = [ ... ]; | Data to be put into a $scope of your controller in a field named myData. This value is a data source for a chart. Please note that for anychart directive we set the data with chart.data()-method. If chart doesn't have this method, use ac-instance directive instead (described below). |
| ac-title | <div anychart ac-title="My Custom Title"></div> | - | Sets a string value to a chart title. |
| ac-legend | <div anychart ac-legend="true"></div> | - | A string representation of a boolean flag. Enables/disables a legend. |
| ac-instance | <div anychart ac-instance="myChart"></div> | $scope.myChart = chart; | Chart instance is created in a controller manually and it is used instead of auto-created. In this case a chart can be configired using Anychart API and access to the settings is not available via these ac-attributes. To make it work, create an instance manually, configure it and put into a $scope in specified field. |
| ac-chart-draw | <div anychart ac-chart-draw="afterDrawHandler"></div> | $scope.afterDrawHandler = function(chart) { ... }; | Function called after the chart is drawn. Takes a chart itself as and argument. |
Please note: No need to set a container of a chart and call chart.draw(). The plugin does it automatically.
<div anychart ac-data="myData" ac-type="pie" ac-chart-draw="afterDrawHandler"></div>
angular
.module('MyApp', ['anychart-angularjs'])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.myData = [
["Chocolate", 5],
["Rhubarb compote", 2],
["Crêpe Suzette", 2],
["American blueberry", 2],
["Buttermilk", 1]
];
$scope.afterDrawHandler = function(chart) {
chart.title('After draw title');
}
}]);
anychart-stage directive attributesThis directive is used to draw anychart stage for custom drawing and complex charts.
| Attribute | View Sample | Controller Sample | Description |
|---|---|---|---|
| ac-instance | <div anychart-stage ac-instance="myStage"></div> | $scope.myStage = stage; | A stage instances is created in a controller manually and it is used instead of auto-created. In this case a stage is configured using Anychart API and access to the settings is not available via these ac-attributes. To make it work, create an instance manually, configure it and put into a $scope into a specified field. |
AnychartService can be used it to deal with anychart stage. Take a look at this sample:
angular
.module('MyApp', ['anychart-angularjs'])
.controller('MyCtrl', ['$scope', 'AnychartService', function($scope, AnychartService) {
var data = [
["Chocolate", 5],
["Rhubarb compote", 2],
["Crêpe Suzette", 2],
["American blueberry", 2],
["Buttermilk", 1]
];
var pie = anychart.pie(data);
pie.title("Top 5 pancake fillings");
pie.bounds(0, 0, '50%', '100%');
var line = anychart.line(data);
line.title("Top 5 pancake fillings");
line.bounds('50%', 0, '50%', '100%');
var afterDrawCallback = function(chart) {
chart.title('After Draw Title');
};
AnychartService.charts.push(
{
chart: pie,
chartDraw: afterDrawCallback
},
line
);
}]);
This is what happens in the sample above:
anychart.pie and anychart.line are created.AnychartService.charts. Note that we wrap pie-chart
into an object with one additional field:: chartDraw. chartDraw is
a function that is called after pie chart is drawn with a single argument
that is pie chart itself.anychart-stage directive processes the AnychartService.charts array.anygantt directive attributesThis directive is used to deal with charts from anygantt module (ganttResource, ganttProject).
| Attribute | View Sample | Controller Sample | Description |
|---|---|---|---|
| ac-type | <div anygantt ac-type="ganttProject"></div> | - | Kind of gantt chart to be created. In a sample, anychart.ganttProject()-constructor will be called. |
| ac-data | <div anygantt ac-data="myData"></div> | $scope.myData = tree; | Just as the corresponding directive of anychart-directive, data tree is put into a $scope in a specified field. |
| ac-title | <div anygantt ac-title="My Custom Title"></div> | - | Sets a string value to a chart title. |
| ac-instance | <div anygantt ac-instance="myChart"></div> | $scope.myChart = chart; | Works with a predefined chart instance (see anychart directive). |
| ac-chart-draw | <div anygantt ac-chart-draw="afterDrawHandler"></div> | $scope.afterDrawHandler = function(chart) { ... }; | Works the same way as described in anychart directive. |
| ac-splitter-position | <div anygantt ac-splitter-position="300"></div> | - | Sets gantt chart splitter position. |
anymap directive attributesThis directive is used to deal with charts from anymap module (choropleth, bubbleMap, etc).
| Attribute | View Sample | Controller Sample | Description |
|---|---|---|---|
| ac-type | <div anymap ac-type="map"></div> | - | See anychart directive corresponding attribute. |
| ac-data | <div anymap ac-data="myData"></div> | $scope.myData = data; | See anychart directive corresponding attribute. |
| ac-title | <div anymap ac-title="My Custom Title"></div> | - | See anychart directive corresponding attribute. |
| ac-legend | <div anymap ac-legend="true"></div> | - | See anychart directive corresponding attribute. |
| ac-instance | <div anymap ac-instance="myChart"></div> | $scope.myChart = chart; | See anychart directive corresponding attribute. |
| ac-chart-draw | <div anymap ac-chart-draw="afterDrawHandler"></div> | $scope.afterDrawHandler = function(chart) { ... }; | See anychart directive corresponding attribute. |
| ac-geo-data | <div anymap ac-geo-data="anychart.maps.australia"></div> | - | Required attribute. Differs from ac-data: ac-geo-data sets geo data source, ac-data is a data for the default map series. |
anystock directive attributesWorks only with ac-instance and ac-chart-draw attributes because of the specifics of Stock Chart setup.
See these samples to learn how things work:
anychart-stage
directive to build the interactive dashboard.AngularJS v1.x directives for AnyChart include two parts:
If you have any questions regarding licensing - please contact us. sales@anychart.com
FAQs
AngularJS v1.x directives for AnyChart
The npm package anychart-angularjs receives a total of 70 weekly downloads. As such, anychart-angularjs popularity was classified as not popular.
We found that anychart-angularjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.