Angular.js directives for d3.js and nvd3.js
View the Project on GitHub cmaurer/angularjs-nvd3-directives
Include angularjs-nvd3-directives.js in your HTML file.
<script src="dist/angularjs-nvd3-directives.js"></script>
Include other dependencies for nvd3.js and d3.js.
<script src="../build/components/d3/d3.js"></script>
<script src="../build/components/nvd3/nv.d3.js"></script>
<link rel="stylesheet" href="path/to/nv.d3.css"/>
In the Angular App, include nvd3ChartDirectives as a dependency.
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
Create an Angular.js Controller, and assign json data to a scope variable.
1 function ExampleCtrl($scope){
2 $scope.exampleData = [
3 {
4 "key": "Series 1",
5 "values": [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] , [ 1059624000000 , 11.341210982529] , [ 1062302400000 , 14.734820409020] , [ 1064894400000 , 12.387148007542] , [ 1067576400000 , 18.436471461827] , [ 1070168400000 , 19.830742266977] , [ 1072846800000 , 22.643205829887] , [ 1075525200000 , 26.743156781239] , [ 1078030800000 , 29.597478802228] , [ 1080709200000 , 30.831697585341] , [ 1083297600000 , 28.054068024708] , [ 1085976000000 , 29.294079423832] , [ 1088568000000 , 30.269264061274] , [ 1091246400000 , 24.934526898906] , [ 1093924800000 , 24.265982759406] , [ 1096516800000 , 27.217794897473] , [ 1099195200000 , 30.802601992077] , [ 1101790800000 , 36.331003758254] , [ 1104469200000 , 43.142498700060] , [ 1107147600000 , 40.558263931958] , [ 1109566800000 , 42.543622385800] , [ 1112245200000 , 41.683584710331] , [ 1114833600000 , 36.375367302328] , [ 1117512000000 , 40.719688980730] , [ 1120104000000 , 43.897963036919] , [ 1122782400000 , 49.797033975368] , [ 1125460800000 , 47.085993935989] , [ 1128052800000 , 46.601972859745] , [ 1130734800000 , 41.567784572762] , [ 1133326800000 , 47.296923737245] , [ 1136005200000 , 47.642969612080] , [ 1138683600000 , 50.781515820954] , [ 1141102800000 , 52.600229204305] , [ 1143781200000 , 55.599684490628] , [ 1146369600000 , 57.920388436633] , [ 1149048000000 , 53.503593218971] , [ 1151640000000 , 53.522973979964] , [ 1154318400000 , 49.846822298548] , [ 1156996800000 , 54.721341614650] , [ 1159588800000 , 58.186236223191] , [ 1162270800000 , 63.908065540997] , [ 1164862800000 , 69.767285129367] , [ 1167541200000 , 72.534013373592] , [ 1170219600000 , 77.991819436573] , [ 1172638800000 , 78.143584404990] , [ 1175313600000 , 83.702398665233] , [ 1177905600000 , 91.140859312418] , [ 1180584000000 , 98.590960607028] , [ 1183176000000 , 96.245634754228] , [ 1185854400000 , 92.326364432615] , [ 1188532800000 , 97.068765332230] , [ 1191124800000 , 105.81025556260] , [ 1193803200000 , 114.38348777791] , [ 1196398800000 , 103.59604949810] , [ 1199077200000 , 101.72488429307] , [ 1201755600000 , 89.840147735028] , [ 1204261200000 , 86.963597532664] , [ 1206936000000 , 84.075505208491] , [ 1209528000000 , 93.170105645831] , [ 1212206400000 , 103.62838083121] , [ 1214798400000 , 87.458241365091] , [ 1217476800000 , 85.808374141319] , [ 1220155200000 , 93.158054469193] , [ 1222747200000 , 65.973252382360] , [ 1225425600000 , 44.580686638224] , [ 1228021200000 , 36.418977140128] , [ 1230699600000 , 38.727678144761] , [ 1233378000000 , 36.692674173387] , [ 1235797200000 , 30.033022809480] , [ 1238472000000 , 36.707532162718] , [ 1241064000000 , 52.191457688389] , [ 1243742400000 , 56.357883979735] , [ 1246334400000 , 57.629002180305] , [ 1249012800000 , 66.650985790166] , [ 1251691200000 , 70.839243432186] , [ 1254283200000 , 78.731998491499] , [ 1256961600000 , 72.375528540349] , [ 1259557200000 , 81.738387881630] , [ 1262235600000 , 87.539792394232] , [ 1264914000000 , 84.320762662273] , [ 1267333200000 , 90.621278391889] , [ 1270008000000 , 102.47144881651] , [ 1272600000000 , 102.79320353429] , [ 1275278400000 , 90.529736050479] , [ 1277870400000 , 76.580859994531] , [ 1280548800000 , 86.548979376972] , [ 1283227200000 , 81.879653334089] , [ 1285819200000 , 101.72550015956] , [ 1288497600000 , 107.97964852260] , [ 1291093200000 , 106.16240630785] , [ 1293771600000 , 114.84268599533] , [ 1296450000000 , 121.60793322282] , [ 1298869200000 , 133.41437346605] , [ 1301544000000 , 125.46646042904] , [ 1304136000000 , 129.76784954301] , [ 1306814400000 , 128.15798861044] , [ 1309406400000 , 121.92388706072] , [ 1312084800000 , 116.70036100870] , [ 1314763200000 , 88.367701837033] , [ 1317355200000 , 59.159665765725] , [ 1320033600000 , 79.793568139753] , [ 1322629200000 , 75.903834028417] , [ 1325307600000 , 72.704218209157] , [ 1327986000000 , 84.936990804097] , [ 1330491600000 , 93.388148670744]]
6 },
7 {
8 "key": "Series 2",
9 "values": [ [ 1025409600000 , 0] , [ 1028088000000 , 0] , [ 1030766400000 , 0] , [ 1033358400000 , 0] , [ 1036040400000 , 0] , [ 1038632400000 , 0] , [ 1041310800000 , 0] , [ 1043989200000 , 0] , [ 1046408400000 , 0] , [ 1049086800000 , 0] , [ 1051675200000 , 0] , [ 1054353600000 , 0] , [ 1056945600000 , 0] , [ 1059624000000 , 0] , [ 1062302400000 , 0] , [ 1064894400000 , 0] , [ 1067576400000 , 0] , [ 1070168400000 , 0] , [ 1072846800000 , 0] , [ 1075525200000 , -0.049184266875945] , [ 1078030800000 , -0.10757569491991] , [ 1080709200000 , -0.075601531307242] , [ 1083297600000 , -0.061245277988149] , [ 1085976000000 , -0.068227316401169] , [ 1088568000000 , -0.11242758058502] , [ 1091246400000 , -0.074848439408270] , [ 1093924800000 , -0.11465623676497] , [ 1096516800000 , -0.24370633342416] , [ 1099195200000 , -0.21523268478893] , [ 1101790800000 , -0.37859370911822] , [ 1104469200000 , -0.41932884345151] , [ 1107147600000 , -0.45393735984802] , [ 1109566800000 , -0.50868179522598] , [ 1112245200000 , -0.48164396881207] , [ 1114833600000 , -0.41605962887194] , [ 1117512000000 , -0.48490348490240] , [ 1120104000000 , -0.55071036101311] , [ 1122782400000 , -0.67489170505394] , [ 1125460800000 , -0.74978070939342] , [ 1128052800000 , -0.86395050745343] , [ 1130734800000 , -0.78524898506764] , [ 1133326800000 , -0.99800440950854] , [ 1136005200000 , -1.1177951153878] , [ 1138683600000 , -1.4119975432964] , [ 1141102800000 , -1.2409959736465] , [ 1143781200000 , -1.3088936375431] , [ 1146369600000 , -1.5495785469683] , [ 1149048000000 , -1.1563414981293] , [ 1151640000000 , -0.87192471725994] , [ 1154318400000 , -0.84073995183442] , [ 1156996800000 , -0.88761892867370] , [ 1159588800000 , -0.81748513917485] , [ 1162270800000 , -1.2874081041274] , [ 1164862800000 , -1.9234702981339] , [ 1167541200000 , -1.8377768147648] , [ 1170219600000 , -2.7107654031830] , [ 1172638800000 , -2.6493268125418] , [ 1175313600000 , -3.0814553134551] , [ 1177905600000 , -3.8509837783574] , [ 1180584000000 , -5.2919167850718] , [ 1183176000000 , -5.2297750650773] , [ 1185854400000 , -3.9335668501451] , [ 1188532800000 , -2.3695525190114] , [ 1191124800000 , -2.3084243151854] , [ 1193803200000 , -3.0753680726738] , [ 1196398800000 , -2.2346609938962] , [ 1199077200000 , -3.0598810361615] , [ 1201755600000 , -1.8410154270386] , [ 1204261200000 , -1.6479442038620] , [ 1206936000000 , -1.9293858622780] , [ 1209528000000 , -3.0769590460943] , [ 1212206400000 , -4.2423933501421] , [ 1214798400000 , -2.6951491617768] , [ 1217476800000 , -2.8981825939957] , [ 1220155200000 , -2.9662727940324] , [ 1222747200000 , 0.21556750497498] , [ 1225425600000 , 2.6784995167088] , [ 1228021200000 , 4.1296711248958] , [ 1230699600000 , 3.7311068218734] , [ 1233378000000 , 4.7695330866954] , [ 1235797200000 , 5.1919133040990] , [ 1238472000000 , 4.1025856045660] , [ 1241064000000 , 2.8498939666225] , [ 1243742400000 , 2.8106017222851] , [ 1246334400000 , 2.8456526669963] , [ 1249012800000 , 0.65563070754298] , [ 1251691200000 , -0.30022343874633] , [ 1254283200000 , -1.1600358228964] , [ 1256961600000 , -0.26674408835052] , [ 1259557200000 , -1.4693389757812] , [ 1262235600000 , -2.7855421590594] , [ 1264914000000 , -1.2668244065703] , [ 1267333200000 , -2.5537804115548] , [ 1270008000000 , -4.9144552474502] , [ 1272600000000 , -6.0484408234831] , [ 1275278400000 , -3.3834349033750] , [ 1277870400000 , -0.46752826932523] , [ 1280548800000 , -1.8030186027963] , [ 1283227200000 , -0.99623230097881] , [ 1285819200000 , -3.3475370235594] , [ 1288497600000 , -3.8187026520342] , [ 1291093200000 , -4.2354146250353] , [ 1293771600000 , -5.6795404292885] , [ 1296450000000 , -6.2928665328172] , [ 1298869200000 , -6.8549277434419] , [ 1301544000000 , -6.9925308360918] , [ 1304136000000 , -8.3216548655839] , [ 1306814400000 , -7.7682867271435] , [ 1309406400000 , -6.9244213301058] , [ 1312084800000 , -5.7407624451404] , [ 1314763200000 , -2.1813149077927] , [ 1317355200000 , 2.9407596325999] , [ 1320033600000 , -1.1130607112134] , [ 1322629200000 , -2.0274822307752] , [ 1325307600000 , -1.8372559072154] , [ 1327986000000 , -4.0732815531148] , [ 1330491600000 , -6.4417038470291]]
10 },
11 {
12 "key": "Series 3",
13 "values": [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] , [ 1059624000000 , 11.341210982529] , [ 1062302400000 , 14.734820409020] , [ 1064894400000 , 12.387148007542] , [ 1067576400000 , 18.436471461827] , [ 1070168400000 , 19.830742266977] , [ 1072846800000 , 22.643205829887] , [ 1075525200000 , 26.693972514363] , [ 1078030800000 , 29.489903107308] , [ 1080709200000 , 30.756096054034] , [ 1083297600000 , 27.992822746720] , [ 1085976000000 , 29.225852107431] , [ 1088568000000 , 30.156836480689] , [ 1091246400000 , 24.859678459498] , [ 1093924800000 , 24.151326522641] , [ 1096516800000 , 26.974088564049] , [ 1099195200000 , 30.587369307288] , [ 1101790800000 , 35.952410049136] , [ 1104469200000 , 42.723169856608] , [ 1107147600000 , 40.104326572110] , [ 1109566800000 , 42.034940590574] , [ 1112245200000 , 41.201940741519] , [ 1114833600000 , 35.959307673456] , [ 1117512000000 , 40.234785495828] , [ 1120104000000 , 43.347252675906] , [ 1122782400000 , 49.122142270314] , [ 1125460800000 , 46.336213226596] , [ 1128052800000 , 45.738022352292] , [ 1130734800000 , 40.782535587694] , [ 1133326800000 , 46.298919327736] , [ 1136005200000 , 46.525174496692] , [ 1138683600000 , 49.369518277658] , [ 1141102800000 , 51.359233230659] , [ 1143781200000 , 54.290790853085] , [ 1146369600000 , 56.370809889665] , [ 1149048000000 , 52.347251720842] , [ 1151640000000 , 52.651049262704] , [ 1154318400000 , 49.006082346714] , [ 1156996800000 , 53.833722685976] , [ 1159588800000 , 57.368751084016] , [ 1162270800000 , 62.620657436870] , [ 1164862800000 , 67.843814831233] , [ 1167541200000 , 70.696236558827] , [ 1170219600000 , 75.281054033390] , [ 1172638800000 , 75.494257592448] , [ 1175313600000 , 80.620943351778] , [ 1177905600000 , 87.289875534061] , [ 1180584000000 , 93.299043821956] , [ 1183176000000 , 91.015859689151] , [ 1185854400000 , 88.392797582470] , [ 1188532800000 , 94.699212813219] , [ 1191124800000 , 103.50183124741] , [ 1193803200000 , 111.30811970524] , [ 1196398800000 , 101.36138850420] , [ 1199077200000 , 98.665003256909] , [ 1201755600000 , 87.999132307989] , [ 1204261200000 , 85.315653328802] , [ 1206936000000 , 82.146119346213] , [ 1209528000000 , 90.093146599737] , [ 1212206400000 , 99.385987481068] , [ 1214798400000 , 84.763092203314] , [ 1217476800000 , 82.910191547323] , [ 1220155200000 , 90.191781675161] , [ 1222747200000 , 66.188819887335] , [ 1225425600000 , 47.259186154933] , [ 1228021200000 , 40.548648265024] , [ 1230699600000 , 42.458784966634] , [ 1233378000000 , 41.462207260082] , [ 1235797200000 , 35.224936113579] , [ 1238472000000 , 40.810117767284] , [ 1241064000000 , 55.041351655012] , [ 1243742400000 , 59.168485702020] , [ 1246334400000 , 60.474654847301] , [ 1249012800000 , 67.306616497709] , [ 1251691200000 , 70.539019993440] , [ 1254283200000 , 77.571962668603] , [ 1256961600000 , 72.108784451998] , [ 1259557200000 , 80.269048905849] , [ 1262235600000 , 84.754250235173] , [ 1264914000000 , 83.053938255703] , [ 1267333200000 , 88.067497980334] , [ 1270008000000 , 97.556993569060] , [ 1272600000000 , 96.744762710807] , [ 1275278400000 , 87.146301147104] , [ 1277870400000 , 76.113331725206] , [ 1280548800000 , 84.745960774176] , [ 1283227200000 , 80.883421033110] , [ 1285819200000 , 98.377963136001] , [ 1288497600000 , 104.16094587057] , [ 1291093200000 , 101.92699168281] , [ 1293771600000 , 109.16314556604] , [ 1296450000000 , 115.31506669000] , [ 1298869200000 , 126.55944572261] , [ 1301544000000 , 118.47392959295] , [ 1304136000000 , 121.44619467743] , [ 1306814400000 , 120.38970188330] , [ 1309406400000 , 114.99946573061] , [ 1312084800000 , 110.95959856356] , [ 1314763200000 , 86.186386929240] , [ 1317355200000 , 62.100425398325] , [ 1320033600000 , 78.680507428540] , [ 1322629200000 , 73.876351797642] , [ 1325307600000 , 70.866962301942] , [ 1327986000000 , 80.863709250982] , [ 1330491600000 , 86.946444823715]]
14 },
15 {
16 "key": "Series 4",
17 "values": [ [ 1025409600000 , -7.0674410638835] , [ 1028088000000 , -14.663359292964] , [ 1030766400000 , -14.104393060540] , [ 1033358400000 , -23.114477037218] , [ 1036040400000 , -16.774256687841] , [ 1038632400000 , -11.902028464000] , [ 1041310800000 , -16.883038668422] , [ 1043989200000 , -19.104223676831] , [ 1046408400000 , -20.420523282736] , [ 1049086800000 , -19.660555051587] , [ 1051675200000 , -13.106911231646] , [ 1054353600000 , -8.2448460302143] , [ 1056945600000 , -7.0313058730976] , [ 1059624000000 , -5.1485118700389] , [ 1062302400000 , -3.0011028761469] , [ 1064894400000 , -4.1367265281467] , [ 1067576400000 , 1.5425209565025] , [ 1070168400000 , 2.7673533607299] , [ 1072846800000 , 7.7077114755360] , [ 1075525200000 , 9.7565015112434] , [ 1078030800000 , 11.396888609473] , [ 1080709200000 , 10.013964745578] , [ 1083297600000 , 8.0558890950562] , [ 1085976000000 , 9.6081966657458] , [ 1088568000000 , 11.918590426432] , [ 1091246400000 , 7.9945345523982] , [ 1093924800000 , 8.3201276776796] , [ 1096516800000 , 9.8283954846342] , [ 1099195200000 , 11.527125859650] , [ 1101790800000 , 16.413657596527] , [ 1104469200000 , 20.393798297928] , [ 1107147600000 , 17.456308413907] , [ 1109566800000 , 20.087778400999] , [ 1112245200000 , 17.988336990817] , [ 1114833600000 , 15.378490151331] , [ 1117512000000 , 19.474322935730] , [ 1120104000000 , 20.013851070354] , [ 1122782400000 , 24.749943726975] , [ 1125460800000 , 23.558710274826] , [ 1128052800000 , 24.558915040889] , [ 1130734800000 , 22.355860488034] , [ 1133326800000 , 27.138026265756] , [ 1136005200000 , 27.202220808591] , [ 1138683600000 , 31.219437344964] , [ 1141102800000 , 31.392355525125] , [ 1143781200000 , 33.373099232542] , [ 1146369600000 , 35.095277582309] , [ 1149048000000 , 30.923356507615] , [ 1151640000000 , 31.083717332561] , [ 1154318400000 , 31.290690671561] , [ 1156996800000 , 34.247769216679] , [ 1159588800000 , 37.411073177620] , [ 1162270800000 , 42.079177096411] , [ 1164862800000 , 44.978191659648] , [ 1167541200000 , 46.713271025310] , [ 1170219600000 , 49.203892437699] , [ 1172638800000 , 46.684723471826] , [ 1175313600000 , 48.385458973500] , [ 1177905600000 , 54.660197840305] , [ 1180584000000 , 60.311838415602] , [ 1183176000000 , 57.583282204682] , [ 1185854400000 , 52.425398898751] , [ 1188532800000 , 54.663538086985] , [ 1191124800000 , 60.181844325224] , [ 1193803200000 , 62.877219773621] , [ 1196398800000 , 55.760611512951] , [ 1199077200000 , 54.735280367784] , [ 1201755600000 , 45.495912959474] , [ 1204261200000 , 40.934919015876] , [ 1206936000000 , 40.303777633187] , [ 1209528000000 , 47.403740368773] , [ 1212206400000 , 49.951960898839] , [ 1214798400000 , 37.534590035098] , [ 1217476800000 , 36.405758293321] , [ 1220155200000 , 38.545373001858] , [ 1222747200000 , 26.106358664455] , [ 1225425600000 , 4.2658006768744] , [ 1228021200000 , -3.5517839867557] , [ 1230699600000 , -2.0878920761513] , [ 1233378000000 , -10.408879093829] , [ 1235797200000 , -19.924242196038] , [ 1238472000000 , -12.906491912782] , [ 1241064000000 , -3.9774866468346] , [ 1243742400000 , 1.0319171601402] , [ 1246334400000 , 1.3109350357718] , [ 1249012800000 , 9.1668309061935] , [ 1251691200000 , 13.121178985954] , [ 1254283200000 , 17.578680237511] , [ 1256961600000 , 14.971294355085] , [ 1259557200000 , 21.551327027338] , [ 1262235600000 , 24.592328423819] , [ 1264914000000 , 20.158087829555] , [ 1267333200000 , 24.135661929185] , [ 1270008000000 , 31.815205405903] , [ 1272600000000 , 34.389524768466] , [ 1275278400000 , 23.785555857522] , [ 1277870400000 , 17.082756649072] , [ 1280548800000 , 25.248007727100] , [ 1283227200000 , 19.415179069165] , [ 1285819200000 , 30.413636349327] , [ 1288497600000 , 35.357952964550] , [ 1291093200000 , 35.886413535859] , [ 1293771600000 , 45.003601951959] , [ 1296450000000 , 48.274893564020] , [ 1298869200000 , 53.562864914648] , [ 1301544000000 , 54.108274337412] , [ 1304136000000 , 58.618190111927] , [ 1306814400000 , 56.806793965598] , [ 1309406400000 , 54.135477252994] , [ 1312084800000 , 50.735258942442] , [ 1314763200000 , 42.208170945813] , [ 1317355200000 , 31.617916826724] , [ 1320033600000 , 46.492005006737] , [ 1322629200000 , 46.203116922145] , [ 1325307600000 , 47.541427643137] , [ 1327986000000 , 54.518998440993] , [ 1330491600000 , 61.099720234693]]
18 }
19 ];
20 }
Include the chart directive in HTML. The data html attribute should point to the scope variable (exampleData). Other directive attributes should be the same as the public attributes associated with each chart.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="exampleId"
showXAxis="true"
showYAxis="true"
width="550"
height="350">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Identifier for the chart. Utilized heavily by d3.js and nvd3.js when creating and updating charts. If there is more than one chart on a page, every chart should have a unique id. Datatype: String
Controls the display width of the chart. Datatype: Number
Controls the display height of the chart. Datatype: Number
Controls the external margin of the chart.
Datatype: Object, Number: {left:0,top:0,bottom:0,right:0}
Controls the colors of the chart elements.
Datatype: Function
The function is the same as the d3.js color functions. Refer to d3.js Colors for d3.js color-specific documentation.
To use a configuration function, create a function on the $scope (i.e. $scope.colorFunction). The function can be named anything, as long as it does not conflict with an existing function name. To ‘connect’ the $scope function with the chart.color() function, add a color=”” attribute to the directive, with the value of the attribute being the name of the $scope function (i.e. scope=”colorFunction()”).
$scope.colorFunction = function() {
return function(d, i) {
return '#E01B5D'
};
}
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="colorExample"
showXAxis="true"
showYAxis="true"
width="550"
height="300"
color="colorFunction()">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Enables (true) or Disables (false) rendering of the Chart Legend.
Datatype: boolean - (true/false)
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="showLegendExample"
showXAxis="true"
showYAxis="true"
width="550"
height="300"
showLegend="true">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Enables (true) or Disables (false) rendering chart-specific controls.
Datatype: boolean - (true/false)
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="showControlsExample"
showXAxis="true"
showYAxis="true"
width="550"
height="300"
showControls="true">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Defines the message displayed when data is not available.
Datatype: String
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="noDataData"
id="noDataExample"
showXAxis="true"
showYAxis="true"
width="550"
height="300"
noData="No Data For You!">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Function that allows nvd3.js and d3.js to access x values from the ‘data’.
Datatype: Function
$scope.xFunction = function(){
return function(d){
return d[0];
};
}
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="xExample"
showXAxis="true"
showYAxis="true"
width="550"
height="300"
x="xFunction()">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
## Y Function that allows nvd3 and d3 to access y values from the ‘data’.
Datatype: Function
$scope.yFunction = function(){
return function(d){
return d[1];
};
}
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="yExample"
showXAxis="true"
showYAxis="true"
width="550"
height="300"
y="yFunction()">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). The numbers tell the d3.js the values to use in the scale, rather than d3.js determining the values.
Datatype: Array of Numbers (i.e. [0, 50])
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="forcexExample"
showXAxis="true"
showYAxis="true"
width="550"
height="300"
forcex="[0]">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). The numbers tell the d3.js the values to use in the scale, rather than d3.js determining the values.
Datatype: Array of Numbers (i.e. [0, 50]
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="forceyExample"
showXAxis="true"
showYAxis="true"
width="550"
height="300"
forcey="[500]">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Enables (true) or Disables (false) interactivity for a chart. Interactivity includes tooltips, click events, etc.
Datatype: boolean - (true/false)
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interactiveExample"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interactive="true">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Enables (true) or Disables (false) rendering of the tooltips.
The Interactive attribute must be included and set to true before tooltips will be rendered.
Datatype: boolean - (true/false)
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="toolTipExample"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interactive="true"
tooltips="true">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Controls how the tooltips are displayed.
The Interactive attribute must be included and set to true before tooltips will be rendered.
The Tooltips attribute must be included and set to true before tooltips will be rendered.
Datatype: Function
The function has the following signature function(key, x, y, e, graph), and should return a String.
$scope.toolTipContentFunction = function(){
return function(key, x, y, e, graph) {
return 'Super New Tooltip' +
'<h1>' + key + '</h1>' +
'<p>' + y + ' at ' + x + '</p>'
}
}
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="toolTipContentExample"
width="550"
height="350"
interactive="true"
tooltips="true"
tooltipcontent="toolTipContentFunction()">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Enables (true) or Disables (false) masking points within x and y scale.
Datatype: boolean - (true/false)
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="clipEdgeExample"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interactive="true"
clipEdge="true">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Refer to Interpolation on the d3.js wiki.
If interpolate is specified, sets the interpolation mode to the specified string. If interpolate is not specified, returns the current interpolation mode.
Piecewise linear segments, as in a polyline.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleLinear"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="linear">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Close the linear segments to form a polygon.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleLinearClosed"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="linear-closed">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Alternate between horizontal and vertical segments, as in a step function.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleStep"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="step">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Alternate between vertical and horizontal segments, as in a step function.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleStepBefore"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="step-before">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Alternate between horizontal and vertical segments, as in a step function.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleStepAfter"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="step-after">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
A B-spline, with control point duplication on the ends.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleBasis"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="basis">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
An open B-spline; may not intersect the start or end.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleBasisOpen"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="basis-open">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
A closed B-spline, as in a loop.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleBasisClosed"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="basis-closed">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Equivalent to basis, except the tension parameter is used to straighten the spline.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleBundle"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="bundle">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
A Cardinal spline, with control point duplication on the ends.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleCardinal"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="cardinal">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
An open Cardinal spline; may not intersect the start or end, but will intersect other control points.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleCardinalOpen"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="cardinal-open">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
A closed Cardinal spline, as in a loop.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleCardinalClosed"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="cardinal-closed">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Cubic interpolation that preserves monotonicity in y.
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="interpolateExampleMonotone"
showXAxis="true"
showYAxis="true"
width="550"
height="350"
interpolate="monotone">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Shorthand for the combination of order and offset.
stack - Combination of offset: ‘zero’, and order: ‘default’
stream - Combination of offset: ‘wiggle’, and order: ‘inside-out’
stream-center - Combination of offset: ‘silhouette’, and order: ‘inside-out’
expand - Combination of offset: ‘expand’, and order: ‘default’
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="stackExample"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
style="stack">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="streamExample"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
style="stream">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="streamCenterExample"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
style="stream-center">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="expandExample"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
style="expand">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="defaultOrderExample"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
order="default">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="insideOutExample"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
order="inside-out">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
zero, wiggle, silhouette, expand
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="offsetZeroExample"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
offset="zero">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="offsetWiggleExample"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
offset="wiggle">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="offsetSilhouetteExample"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
offset="silhouette">
<svg></svg>
</nvd3-stacked-area-chart>
</div>
<div ng-controller="ExampleCtrl">
<nvd3-stacked-area-chart
data="exampleData"
id="offsetExpandExample"
width="550"
height="350"
showXAxis="true"
showYAxis="true"
offset="expand">
<svg></svg>
</nvd3-stacked-area-chart>
</div>