/cfcharts-angularjs

AngularJS charts

Primary LanguageJavaScript

CFCharts AngularJS

Basic AngularJS charts.

Add cfchart.js to your application

var MyApp = angular.module('MyApp', ['cfchart']);

Add a chart in HTML

<piechart id="myChart" colors="#ff0000, #ffce00, #0062ff, #ff6700, #1fc90d" values="11, 55, 120, 32, 20" width="200" height="200"></piechart>
<barchart id="myChart" colors="#ff0000, #ffce00, #0062ff, #ff6700, #1fc90d" values="111, 255, 120, 32, 420" width="400" height="300" labels="One, Two, Three, Four, Five"></barchart>
<linechart id="myChart" values="[20, 50, 10, 60, 50, 77];[10, 30, 35, 50, 12, 70]" line-color="#ff0000, #0062ff" labels="2004, 2005, 2006, 2007, 2008, 2009" width="400" height="300"></linechart>
<radarchart id="myChart" values="[20, 40, 10, 90, 50, 60, 23, 33];[12, 60, 55, 93, 34, 21, 77, 82]" colors="#ff0000, #0062ff" labels="1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001" width="400" height="400"></radarchart>
<scatterchart id="myChart" width="400" height="300" values="[200, 230, 100, 30, 66, 190, 199];[210, 130, 120, 34, 56, 98, 198];[110, 120, 100, 33, 59, 190, 188]" colors="#FF0000, #0062FF, #FC00FF" labels="1999, 2000, 2001, 2002, 2003, 2004, 2005"></scatterchart>
<donutchart id="exampleh" values="[200, 100, 30, 55, 90, 134]" colors="#d1ef00, #606e00, #0062ff, #df9404, #734c02, #e13c02" width="200" height="200"></donutchart>