alex-LE / ChartAngular

Charts directives for AngularJS (using RaphaelJS)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

About

Charts directives for AngularJS (using RaphaelJS)

License:MIT License


Languages

Language:JavaScript 100.0%