Skip to content
Charts directives for AngularJS (using RaphaelJS)
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
libs
src
.gitignore
LICENSE
README.md
bower.json

README.md

ChartAngular

Charting in AngularJS made easy :)

Dependencies

How to use

  • 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.

Bar Chart

  <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']
  };

Donut Chart

  <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}
    ]
  };

Line Chart

  <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']  
  };

Area Chart

  <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']  
  };

Features

  • Simple directives for charts

Todo/Roadmap

  • Two way bindings on chart data source.
You can’t perform that action at this time.