grantmstevens / amcharts-angular

Angular directive for amCharts library

amCharts-Angular

Angular.js directive for amCharts

1. Install from bower

    bower install amcharts-angular --save

2. Create Angular application

Add script references

// AmCharts Library references
<script type="text/javascript" src="lib/amcharts/dist/amcharts/amcharts.js"></script>
<script type="text/javascript" src="lib/amcharts/dist/amcharts/serial.js"></script>
// amChartsDirective
<script type="text/javascript" src="lib/amcharts-angular/dist/amChartsDirective.js"></script>

Inject angular module dependency

angular.module('MyModule', ['amChartsDirective'])

JSFiddle Example here

Promise based JSFiddle Example here

Quick sample code

<am-chart id="myFirstChart" options="amChartOptions" height="100%" width="100%"></am-chart>

$scope.amChartOptions = {
        data: [{
            year: 2005,
            income: 23.5,
            expenses: 18.1
        }, {
            year: 2006,
            income: 26.2,
            expenses: 22.8
        }, {
            year: 2007,
            income: 30.1,
            expenses: 23.9
        }, {
            year: 2008,
            income: 29.5,
            expenses: 25.1
        }, {
            year: 2009,
            income: 24.6,
            expenses: 25
        }],
        type: "serial",
        
        categoryField: "year",
        rotate: true,
        pathToImages: 'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/',
        legend: {
            enabled: true
        },
        chartScrollbar: {
            enabled: true,
        },
        categoryAxis: {
            gridPosition: "start",
            parseDates: false
        },
        valueAxes: [{
            position: "top",
            title: "Million USD"
        }],
        graphs: [{
            type: "column",
            title: "Income",
            valueField: "income",
            fillAlphas: 1,
        }]
    }

Promise based chart rendering

// this function returns our chart data as a promise
    $scope.dataFromPromise = function(){
    	var deferred = $q.defer();

        var data = [{
            year: 2005,
            income: 23.5,
            expenses: 18.1
        }, {
            year: 2006,
            income: 26.2,
            expenses: 22.8
        }, {
            year: 2007,
            income: 30.1,
            expenses: 23.9
        }, {
            year: 2008,
            income: 29.5,
            expenses: 25.1
        }, {
            year: 2009,
            income: 24.6,
            expenses: 25
        }];

        deferred.resolve(data)
        return deferred.promise;
    };

    // We can optionally pass a promise to the options attribute on the AmChartsDirective
    // to delay the chart rendering until the promise resolves
    $scope.amChartOptions = $timeout(function(){
    	return {
            // we can also use a promise for the data property to delay the rendering of
            // the chart till we actually have data
            data: $scope.dataFromPromise(),
            type: "serial",
            theme: 'black',
            categoryField: "year",
            rotate: true,
            pathToImages: 'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/',
            legend: {
                enabled: true
            },
            chartScrollbar: {
                enabled: true,
            },
            categoryAxis: {
                gridPosition: "start",
                parseDates: false
            },
            valueAxes: [{
                position: "top",
                title: "Million USD"
            }],
            graphs: [{
                type: "column",
                title: "Income",
                valueField: "income",
                fillAlphas: 1,
            }]
    	}
    }, 1000)

If you do not specify a category field or a value field, the directive will assume the category field is at index [0] and the value field is at index [1]. Using the example above, 'year' would be the category field, and 'income' would be the value field.

For a list of exposed configuration options, please look at the amCharts API documentation.

amcharts-angular's Issues

graph gauge

It does not work for the graphic o.type === gauge:

// instantiate new chart object
if (o.type === 'xy') {
chart = o.theme ? new AmCharts.AmXYChart(AmCharts.themes[o.theme]) : new AmCharts.AmXYChart();
} else if (o.type === 'pie') {
chart = o.theme ? new AmCharts.AmPieChart(AmCharts.themes[o.theme]) : new AmCharts.AmPieChart();
} else if (o.type === 'funnel') {
chart = o.theme ? new AmCharts.AmFunnelChart(AmCharts.themes[o.theme]) : new AmCharts.AmFunnelChart();
} else if (o.type === 'radar') {
chart = o.theme ? new AmCharts.AmRadarChart(AmCharts.themes[o.theme]) : new AmCharts.AmRadarChart();
} else {
chart = o.theme ? new AmCharts.AmSerialChart(AmCharts.themes[o.theme]) : new AmCharts.AmSerialChart();
}

Question on stacked chart

Hi,
i am somewhat lost on creating a stacked chart with the directive.
What would be the suggested dataformat for the data object for a stacked chart?

cheers
bernhard

Cannot create a Funnel chart

Hi,

How can I use this directive to create a funnel chart? I took a look at the amChartsDirective.js file and noticed that it supports the XY,Pie and Serial charts. It does not seem to support the Funnel chart.

I tried the following code but it did not work:
$scope.amOptions = {
type: "funnel",
neckHeight: "30%",
neckWidth: "40%",
titleField: "title",
valueField: "value",
data: [
{
title: "Website visits",
value: 300
},
{
title: "Downloads",
value: 123
}
]
};

Is the Funnel chart supported?

Not workign with AmCharts 3.17.x

Hi,

I am unable to get this working with amCharts 3.17.x. Is this compatible with 3.17.x. Please refer -
https://jsfiddle.net/c3uf0qjs/

Thanks

Cannot read property 'data' of undefined when ngRoute module used in application

my App module and controller is separated, i have gave the data in my controller.
here is some of my code:
/* App Module */
angular.module('myModule',['ngRoute','amChartsDirective']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/getDataset', {
templateUrl: 'views/index.html',
controller: AppCtrl
}).
otherwise({
redirectTo: '/getDataset'
});
}]);

/* Controllers */
function AppCtrl($scope,$http){
$http.get('/getDataset').success(function(respose){
console.log("i got a data respose");
$scope.options = {
type: "serial",
categoryField: "Data",
rotate: true,
pathToImages: 'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/',
legend: {
enabled: true
},
chartScrollbar: {
enabled: true,
},
categoryAxis: {
gridPosition: "start",
parseDates: false
},
valueAxes: [{
position: "top",
title: "Million USD"
}],
graphs: [{
type: "column",
title: "Income",
valueField: "income",
fillAlphas: 1,
}]
}
$scope.options.data = respose;
});
}

thanks for any help

Custom graph colors

colors: ["#900","#FCD202"]

Adding a colors array per Amcharts documentation does not change the graph colors.

http://jsfiddle.net/cytgxb8j/

Is it possible to use a theme? (light, chalk, etc)

Hi, this is a great directive! Everything works great except by the fact that it is not respecting the theme I choose... even the default light theme has weird colors like orange and green! Maybe I'm doing something wrong?

Thanks!

starting point example

There would be multiple benefits if there could be a pointer to a plunkr, jsbin, etc. to a working example of the directive.

Responsive issue

responsive is not working, could you please tell me how to make it ?

I've already used <script src="Scripts/amcharts/responsive/responsive.min.js"></script> and code as

responsive: {
enabled: true
},

but it is not working.

performance using zoom

Hi!

I'm using this directive to render chart like this one : https://www.amcharts.com/demos/line-chart-with-scroll-and-zoom/

Everything works fine, except when user uses zoom.

In this case, there is a performance issue, the zoom is very slow.

Do You know an existing workaround ?

Thanks

Can't reference data when creating charts dynamically

I'm creating charts dynamically and trying changing data depending on a button group but cant find a way to reference the charts. Do I use its id?

trying to do this:
chart.dataProvider = chartData[d];
chart.validateData();
chart.animateAgain();

Directive not working with gantt chart

"type": "gantt",
"theme": "light",
"marginRight": 70,
"period": "DD",
"dataDateFormat": "YYYY-MM-DD",
"balloonDateFormat": "JJ:NN",
"columnWidth": 0.2,
"valueAxis": {
"type": "date",
"minimum": 0,
"maximum": 365
},
"brightnessStep": 10,
"graphs": {
"fillAlphas": 1,
"balloonText": "[[task]]: [[open]] [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2016-01-01",
"startField": "start",
"endField": "end",
"durationField": "duration",
"data": [
{
"category": "New Years Eve",
"segments": [{
"start": 0,
"duration": 98,
"color": "#7E585F",
"task": "New Years Eve"
}]
}, {
"category": "Valentines Day",
"segments": [{
"start": 44,
"duration": 98,
"color": "#7B742C",
"task": "Valentines Day"
}]
}, {
"category": "Good Friday",
"segments": [{
"start": 83,
"duration": 98,
"color": "#CF794A",
"task": "Good Friday"
}]
}, {
"category": "Easters Sunday",
"segments": [{
"start": 86,
"duration": 98,
"color": "#FFE4C4",
"task": "Easters Sunday"
}]
}, {
"category": "Vesak Day",
"segments": [{
"start": 141,
"duration": 98,
"color": "#7E585F",
"task": "Vesak Day"
}]
}, {
"category": "Hari Raya Puasa",
"segments": [{
"start": 187,
"duration": 98,
"color": "#7B742C",
"task": "Hari Raya Puasa"
}]
}, {
"category": "National Day",
"segments": [{
"start": 221,
"duration": 98,
"color": "#CF794A",
"task": "National Day"
}]
}, {
"category": "Hari Raya Haji",
"segments": [{
"start": 255,
"duration": 98,
"color": "#FFE4C4",
"task": "Hari Raya Haji"
}]
}, {
"category": "Diwali",
"segments": [{
"start": 302,
"duration": 98,
"color": "#7E585F",
"task": "Diwali"
}]
}, {
"category": "Christmas Day",
"segments": [{
"start": 360,
"duration": 98,
"color": "#7B742C",
"task": "Christmas Day"
}]
}],
"chartScrollbar": {},
"chartCursor": {
"valueBalloonsEnabled": false,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"fullWidth": true
},
"export": {
"enabled": true
},
"responsive": {
"enabled": true
}

the directive is not work with pie chart

I have data like this in option
{ "type": "serial",
"categoryField": "category",
"startDuration": 0,
"columnSpacing": 0,
"columnWidth": 0.5,
"categoryAxis": {
"gridPosition": "start",
"gridColor": border,
"gridAlpha": 1,
"labelOffset": 5,
"fontSize": 11,
"axisColor": border
},
"valueAxes": [
{
"id": "ValueAxis-1",
"gridColor": border,
"gridAlpha": 1,
"fontSize": 11,
"axisColor": border,
}
],
"balloon": {
"color": "#444444",
"borderThickness": 0,
"cornerRadius": 3,
"shadowAlpha": 0,
"fillColor" : "#F1F1F1",
"fillAlpha" : 1
},
"trendLines": [],
"graphs": [
{
"fillAlphas": 1,
"lineThickness": 0,
"id": "AmGraph-1",
"title": "Positive",
"type": "column",
"valueField": "column-1",
"fillColors": green
},
{
"fillAlphas": 1,
"lineThickness": 0,
"id": "AmGraph-2",
"title": "Neutral",
"type": "column",
"valueField": "column-2",
"fillColors": yellow
}
],
"guides": [],
"allLabels": [],
"dataProvider": [
{
"category": "16:25",
"column-1": 16,
"column-2": 44
},
{
"category": "16:30",
"column-1": 32,
"column-2": 38
},
{
"category": "16:35",
"column-1": 24,
"column-2": 56
},
{
"category": "16:40",
"column-1": 28,
"column-2": 40
},
{
"category": "16:45",
"column-1": 65,
"column-2": 20
},
{
"category": "16:50",
"column-1": 13,
"column-2": 30
},
{
"category": "16:55",
"column-1": 24,
"column-2": 24
},
{
"category": "17:00",
"column-1": 16,
"column-2": 34
}
]

Config

Great would be to give us config to define globals like colors, credit position, width, height and so on - would be great.

Directive not working with gauge chart

Pie chart with legend, dark theme

When adding legend to a pie chart the theme doesn't apply to the legend text. using your fiddle (http://jsfiddle.net/w3vpc35o/226/), changing the theme to dark (for example) and adding the following:
"legend":{
"position":"right",
"marginRight":100,
"autoMargins":false
}
results in a legend text being displayed with the light theme font color but the pie-chart font in the dark theme.

Is there an easy fix for this or am I simply doing it wrong?

Thank you for an amazing angular port!

Memory usage increasing over time

You can see this on the Docs JSFiddle Example. In this case is + ou - 4K per second, but this grows a lot when you load more charts on the same page.
I'm using ngRoute and ng-view and to stop the memory leak, after change the page, I did:

angular.module('app').run([
  '$rootScope',
  function($rootScope) {
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
      if (typeof AmCharts != 'undefined') {
        if (AmCharts.charts.length) {
          AmCharts.clear();
          console.log("AmCharts.clear()");
        }
      }
    });
  }
]);

Redraw on options change

It would be nice if there is an redraw for the chart if the options are changed.
I added it on the top of the link function.

    link: function ($scope, $el) {
      $scope.$watch('options', function(newOptions, oldOptions) {
        if (!angular.equals(newOptions, oldOptions)) {
          renderChart(newOptions);
        }
      }, true);

ValueAxis should accept Array and Object as parameters

There are more object options inside a ValueAxis, like dateFormats, durationUnits, etc.
AmCharts documentation for ValueAxis

I removed the if inside the addValuesAxis function and it's worked for me.

Chart margins clipping scrollbar handles

Recently chart.margin* was set to 0 causing default scrollbar handles to be clipped on the edges.

amCharts-Angular/dist/amChartsDirective.js

Lines 55 to 58 in e1194dc

	chart.marginTop = 0;
	chart.marginLeft = 0;
	chart.marginBottom = 0;
	chart.marginRight = 0;

Commenting these lines out fixes this.

Did a quick jsFiddle to compare http://jsfiddle.net/hd5rhuoz/1/

Tag for 1.0.4 release

I am trying to lock down a version of this repo, using bower, but couldn't resolve any tags using the lines below:

"amcharts-angular": "https://github.com/GrantMStevens/amCharts-Angular.git#v1.0.4",

Or

"amcharts-angular": "1.0.4",

I see there is a 1.0.4 release, and an associated tag, but is there something missing for it to be available in this way?

Jsfiddle not working

I'm trying to use your directive here but not working...still looking to see if I can fix this.

The jsfiddle code looks like it's broken

minor update to README

angular.module('MyModule, ['amChartsDirective'])

needs to be

angular.module('MyModule', ['amChartsDirective'])

(missing apostrophe)

Radar chart: chart.addChartCursor is not a function

I'm trying to get a RadarChart to work througth this directive, but im getting the error: chart.addChartCursor is not a function

http://jsfiddle.net/w3vpc35o/119/
Am i configuring this thing wrong? It did work without angular and amCharts 3.17.

Error after commit 25c9e5b0f3d0eb51b098a2ed55fae23dce9707f2

Error: [$compile:nonassign] Expression 'undefined' in attribute 'chart' used with directive 'amChart' is non-assignable!

to fix it:

1. revert changes
2. bring changes back + update major version

OR make chart optional:
chart: '=?'

@GrantMStevens issue came with commit 25c9e5b

How to detecting at what value mouse pointer is?

I would like implement this funconality https://www.amcharts.com/tutorials/detecting-at-what-value-mouse-pointer-is/. How to do this?

I tred to do this on this way :

categoryAxis: {
                minPeriod:'mm',
                parseDates :true,
                listeners: [{
                event: "move",
                    method: function(value) {
                        console.log(value.value);
                    }
                }]

but it doesn't work

I would be very grateful for your help

amCharts export plugin

Greetings,

I want to use the official export plugin of amCharts as shown in this codepen example: http://codepen.io/amcharts/pen/55d41c60b96b44e1a69c94feb8f8b63b

But the export menu does not show up if i use the am-chart directive. Dont know if it should work, but maybe there is a way to implement the plugin in an easy way? I already tried it myself but i missed something.

Add Amcharts gauge

Is is possible to add the Amcharts gauge module into the directive? I tried to do it myself but failed miserably

charts are not responsive

I have set the chart option
responsive: {
enabled: true
},

and included the plugin, as required here:
http://www.amcharts.com/tutorials/making-charts-responsive/

looks like the directive is setting the width and height to a fixed number.. maybe it needs an option for responsive?

Does not work in Bootstrap's tabs directive

Unsupported configuration/tag?

Hi,

I was looking at the list of exposed configuration options in AM Charts as the readme indicates however I found that dataLoader is not supported? I also checked the directives code but it doesn't seem like it is.
I need to fetch some data from REST/json and I was trying to use the "data" since dataLoader is not there but that won't work:

I tried:

angular.module('MyMod')
.controller('LnoCtrl', ['$scope', '$http', LnoCtrl]);

function LnoCtrl($scope, $http ) {

var chartData;
$http({
          method: 'GET',
          url: 'http://XXX/API/apiLink'
        }).then(function successCallback(response) {
            chartData = response.data;
            alert (chartData[0].item); //this works
        $scope.amChartOptions = {
            data: chartData ,
            type: "serial",
etc. etc.

I am getting a TypeError: Cannot read property 'data' of undefined

Any plans on including dataLoader capability? Do you mind helping with a workaround or suggesting what is wrong if not?

background and legend is not affected by theme

Hi.

I'm using amcharts 3.15.2, with amcharts-angular 1.0.4 and angularjs 1.5.7 with angular material 1.0.9.

when I set a theme or even when I don't set a theme... which defaults to light theme, the background color and legend text color is not set. i checked on google chrome console to see if there is a rule to set the background color and something else overrides it, but nothing!

for now I worked around the issue by connect each graph to the drawn event:

ChatOptionsObj = {
...
listeners: [{
"event": "drawn",
"method": caller.handleGraphsRenderEvent
}],
...
}

and setting the following functions:

     caller.handleGraphsRenderEvent = function (event) {
            caller.setChartsBgColor(event.chart.backgroundColor);
            caller.setChartsLegendColor(event.chart.color);
        }
       caller.setChartsBgColor = function(color) {
            $('div.amchart').css('background-color',color);
        }
        caller.setChartsLegendColor = function (color) {
            $('div.amChartsLegend').find('text').attr('fill',color);
        }

as you can see in the drawn event, i fetch the background color and color properties which are set properly (the event.chart.legend.color is not set properly).

thanks!

Scrollbar / Legend not working

Thanks for this, got the chart set up fine.. Having a problem displaying scrollbar / legends. Even if you enable them in the controller
"
legend: [ {
enabled: true
} ]
chartScrollbar: [ {
enabled: true
graph: 'value'
graphType: 'smoothedLine'
autoGridCount: true
scrollbarHeight: 40
} ]
"

They won't render... I'm using the CDN version of the directive.js for dev, but would that be the right place to declare these, assuming hosted directive.js in a prod environment?

Using directive in tabs

Hi

I want to use the directive in tabs. Therefore in need to call chart.invalidateSize();
How can I access the chart object?

Issue with default values that amCharts doesnt provide

For Example pie chart does not have categoryField and the directive consider it as required field and try to set a default values.

How to render real time data for update dynamically.

I want to add additional data to chart that already rendered. Like the data i received from the source updated every 10 second.
Could you please help me in this?

Thanks

Can you include a sample app?

I'm new to Angular so it would be nice if there was a working sample app instead of trying to piece things together from docs and JSFIDDLE.

How do i update a chart?

Load chart data with $http

Could you please document how to load $scope.options.data ($scope.amChartOptions) from $http?
I'm requesting the data with a $http.get and assigning the result to it but the chart doesn't get updated.

$http({url:'example', method: 'GET'}).success(function (response) {$scope.amChartOptions.data = response;});

I've seen in the directive that you have some events... Could you give me a hand?

Automatically generate element id if id has not been explicitly provided

Hello,

I'm displaying my amCharts inside ng-repeat and there is an issue with assigning element id to multiple charts within the loop.

The $index is not getting parsed by AngularJS at this point. Maybe it would make sense to add a check at the line 17 and assign random id if the id has not been explicitly provided?

Thanks a lot for a great directive :)

Zoom on chart load

Hi,

I'm looking to perform a zoom when a chart initialises.

AmCharts example:

var chart = AmCharts.makeChart("blah", { options });

chart.addListener("rendered", zoomChart);
zoomChart();

// this method is called when chart is first inited as we listen for "rendered" event
function zoomChart() {
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
    chart.zoomToIndexes(blah, blah);
}

how would I go about achieving this using this directive?

Cheers,

Dan

Delay rendering of chart

I have an issue where my graph titles come from scope variables that are propagated by a promise. I needed to delay some processing in the directive until that happened. I added a watch on options to get around this issue. I think this should work in general.. Let me know if you'd like me to submit a pull request for this or if you think of a better way to solve it.

0d6d6d5

Option to reload chart

Good directive.
Can You add option to reload chart with new data?
Or even better would be live refresh/animate data...

Replace amChartOptions with the demo amCharts provided, some options didn't work

I use the amCharts demos data to render my chart,the data provided link: https://www.amcharts.com/demos/date-based-data/# .And I also changed the include scripts to the the linked page, but the valueScrollbar property didn't work at all, the chartScrollbar property was not completely correct. I have no ideas why the issue happened, is this amChartsDirective problem? Thanks for any help !

TypeError: undefined is not a function at renderChart (http://localhost:3000/bower_components/amcharts-angular/dist/amChartsDirective.js:39:21)

TypeError: undefined is not a function
at renderChart (http://localhost:3000/bower_components/amcharts-angular/dist/amChartsDirective.js:39:21)

anyone know why it happens ? I just copy the example in README

Thanks for any help

Cannot read property 'valueField' of undefined

fiddle forked from the promise sample on the website:
http://jsfiddle.net/sagimann/ev7149vj/

the only changes are that the returned data is now an empty array, and that there are no predefined graphs. The expected result is an empty chart, the actual result is an error:

TypeError: Cannot read property 'valueField' of undefined
at addGraph (amChartsDirective.js:125)
at generateGraphProperties (amChartsDirective.js:143)
at amChartsDirective.js:189
at processQueue (angular.js:14454)
at angular.js:14470
at Scope.$eval (angular.js:15719)
at Scope.$digest (angular.js:15530)
at Scope.$apply (angular.js:15824)
at angular.js:17580
at completeOutstandingRequest (angular.js:5370)

Trying to remove the call to addGraph in amChartsDirective.js:148 does not help, because the error is then simply replaced with:

Uncaught TypeError: Cannot read property 'translate' of undefined
d.ChartCursor.d.Class.update @ amcharts.js:206
e.AmRectangularChart.e.Class.update @ serial.js:19
e.AmSerialChart.e.Class.update @ serial.js:52
d.update @ amcharts.js:12

Multiple Charts

Hi I am trying to create multiple charts on the same page.

e.g want to show 4 small charts for different currency pairs (stock charts)

I can not seem to get this to work. Any help would be truly helpful.

amChartOptions.defs not passed

The '.defs' attribute of the amChartOptions is not passed to the chart. Therefore it is not possible to add filters like shadows to the charts.
Example of how this is used without the angular wrapper:
https://www.amcharts.com/tutorials/svg-filters/

This can be fixed by passing the .defs attribute on to the chart like this:

if(o.defs) {
    chart.defs = o.defs;
}

Cannot install specific version by bower

Hello 😃

Bower uses git tag to resolve version number, not bower.json version property.

http://bower.io/docs/creating-packages/#version

version

String

Deprecated. Use git or svn tags instead. This field is ignored by Bower.

And, its format must be semver. (maybe… I don't have confidence 😓 )

http://bower.io/docs/pluggable-resolvers/#creating

Resolvers should also follow semver specification.

Why don't you make tag again ❓

Publish on npm

Is there any chance you can publish this to npm? Thanks!