Charting in AngularJS made easy :)
- Drop the chartangular library in your project's javascripts.
- Add the dependency
angular.module('MyChartApp', ['ChartAngular'])
- Now, drop the appropriate html tag in your views and see it in action
- Options can be provided to charts via controller.
<barchart id="bar-example" data-options="chart_options"></barchart>
- Options in controller
$scope.chart_options = {
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
};
<donutchart id="donut-example" data-options="chart_options"></donutchart>
- Options in controller
$scope.chart_options = {
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
]
};
<linechart id="line-example" data-options="chart_options"></linechart>
- Options in controller
$scope.chart_options = {
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
};
<areachart id="area-example" data-options="chart_options"></areachart>
- Options in controller
$scope.chart_options = {
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
};
- Simple directives for charts
- Two way bindings on chart data source.