An AngularJS directive for the amCharts library to create JavaScript/HTML5 charts for most of your needs, including serial (column, bar, line, area, step line, step without risers, smoothed line, candlestick and ohlc graphs), pie/donut, radar/polar, y/scatter/bubble, Funnel/Pyramid charts and Angular Gauges.
// 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) returndeferred.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.
