UI.Chart

Add a jqPlot chart to your Angular application.

Code on Github Download (0.0.1)

Demo

Heavy Industry
Retail
Light Industry
Out of home
Commuting
Orientation
18%
13%
21%
24%
10%
13%

How?

  1. <section ng-app="myChartingApp" ng-controller="DemoCtrl">
  2. <div ui-chart="someData" chart-options="myChartOpts" ></div>
  3. </section>
  4.  
  5. <script>
  6. angular.module('myChartingApp', ['ui.chart'])
  7. .value('charting', {
  8. pieChartOptions: {
  9. seriesDefaults: {
  10. // Make this a pie chart.
  11. renderer: jQuery.jqplot.PieRenderer,
  12. rendererOptions: {
  13. // Put data labels on the pie slices.
  14. // By default, labels show the percentage of the slice.
  15. showDataLabels: true
  16. }
  17. },
  18. legend: { show:true, location: 'e' }
  19. }
  20. })
  21. .controller('DemoCtrl', function ($scope, charting) {
  22. $scope.someData = [[
  23. ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
  24. ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  25. ]];
  26.  
  27. $scope.myChartOpts = charting.pieChartOptions;
  28. });
  29. </script>