xcarpentier / angular-charts Goto Github PK

angular.module('yourApp', ['angularCharts']);

bower install angular-charts

 var config = {
  title: '', // chart title. If this is false, no title element will be created.
  tooltips: true,
  labels: false, // labels on data points
  // exposed events
  mouseover: function() {},
  mouseout: function() {},
  click: function() {},
  // legend config
  legend: {
    display: true, // can be either 'left' or 'right'.
    position: 'left',
    // you can have html in series name
    htmlEnabled: false
  },
  // override this array if you're not happy with default colors
  colors: [],
  innerRadius: 0, // Only on pie Charts
  lineLegend: 'lineEnd', // Only on line Charts
  lineCurveType: 'cardinal', // change this as per d3 guidelines to avoid smoothline
  isAnimate: true, // run animations while rendering chart
  yAxisTickFormat: 's', //refer tickFormats in d3 to edit this value
  xAxisMaxTicks: 7, // Optional: maximum number of X axis ticks to show if data points exceed this number
  yAxisTickFormat: 's', // refer tickFormats in d3 to edit this value
  waitForHeightAndWidth: false // if true, it will not throw an error when the height or width are not defined (e.g. while creating a modal form), and it will be keep watching for valid height and width values
};

var acData = {
  series: ["Sales", "Income", "Expense"],
  data: [{
    x: "Computers",
    y: [54, 0, 879],
    tooltip: "This is a tooltip"
  }]
}

var series = [
  "Sales",
  "Income",
  "Expense"
]

var dataPoint = {
  x: "Computers",
  y: [54, 0, 879],
  tooltip: "This is a tooltip"
}

click : function(d) {
  $scope.messages.push('clicked!');
},
mouseover : function(d) {
  $scope.messages.push('mouseover!');
},
mouseout : function(d) {
  $scope.messages.push('mouseout!');
}