d3 Chart header small text goes here...

Line Chart

<!-- required files -->
<link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />
<script src="../assets/plugins/d3/d3.min.js"></script>
<script src="../assets/plugins/nvd3/build/nv.d3.min.js"></script>

<div id="nv-line-chart" class="h-250px"></div>

<script>
  nv.addGraph(function() {
    var sin = [], cos = [];
    for (var i = 0; i < 100; i++) {
      sin.push({x: i, y:  Math.sin(i/10) });
      cos.push({x: i, y: .5 * Math.cos(i/10)});
    }
    var lineChartData = [
      { values: sin, key: 'Sine Wave', color: COLOR_GREEN }, 
      { values: cos, key: 'Cosine Wave', color: COLOR_BLUE }
    ];

    var lineChart = nv.models.lineChart().options({
      transitionDuration: 300,
      useInteractiveGuideline: true
    });

    lineChart.xAxis.axisLabel('Time (s)').tickFormat(d3.format(',.1f'));
    lineChart.yAxis.axisLabel('Voltage (v)').tickFormat(function(d) {
      if (d == null) {
        return 'N/A';
      }
      return d3.format(',.2f')(d);
    });

    d3.select('#nv-line-chart').append('svg').datum(lineChartData).call(lineChart);
    nv.utils.windowResize(lineChart.update);

    return lineChart;
  });
</script>

Bar Chart

<!-- required files -->
<link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />
<script src="../assets/plugins/d3/d3.min.js"></script>
<script src="../assets/plugins/nvd3/build/nv.d3.min.js"></script>

<div id="nv-bar-chart" class="h-250px"></div>

<script>
  var barChartData = [{
    key: 'Cumulative Return',
    values: [
      { 'label' : 'A', 'value' : 29, 'color' : COLOR_RED }, 
      { 'label' : 'B', 'value' : 15, 'color' : COLOR_ORANGE }, 
      { 'label' : 'C', 'value' : 32, 'color' : COLOR_GREEN }, 
      { 'label' : 'D', 'value' : 196, 'color' : COLOR_AQUA },  
      { 'label' : 'E', 'value' : 44, 'color' : COLOR_BLUE },  
      { 'label' : 'F', 'value' : 98, 'color' : COLOR_PURPLE },  
      { 'label' : 'G', 'value' : 13, 'color' : COLOR_GREY },  
      { 'label' : 'H', 'value' : 5, 'color' : COLOR_BLACK }
    ]
  }];

  nv.addGraph(function() {
    var barChart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showValues(true)
      .duration(250);

    barChart.yAxis.axisLabel("Total Sales");
    barChart.xAxis.axisLabel('Product');

    d3.select('#nv-bar-chart').append('svg').datum(barChartData).call(barChart);
    nv.utils.windowResize(barChart.update);

    return barChart;
  });
</script>

Stacked Area Chart

<!-- required files -->
<link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />
<script src="../assets/plugins/d3/d3.min.js"></script>
<script src="../assets/plugins/nvd3/build/nv.d3.min.js"></script>

<div id="nv-stacked-area-chart" class="h-250px"></div>

<script>
  var stackedAreaChartData = [{
    'key' : 'Financials',
    'color' : COLOR_RED,
    'values' : [ [ 1138683600000 , 13.356778764352] , [ 1141102800000 , 13.611196863271] , [ 1143781200000 , 6.895903006119] , [ 1146369600000 , 6.9939633271352] , [ 1149048000000 , 6.7241510257675] , [ 1151640000000 , 5.5611293669516] , [ 1154318400000 , 5.6086488714041] , [ 1156996800000 , 5.4962849907033] , [ 1159588800000 , 6.9193153169279] , [ 1162270800000 , 7.0016334389777] , [ 1164862800000 , 6.7865422443273] , [ 1167541200000 , 9.0006454225383] , [ 1170219600000 , 9.2233916171431] , [ 1172638800000 , 8.8929316009479] , [ 1175313600000 , 10.345937520404] , [ 1177905600000 , 10.075914677026] , [ 1180584000000 , 10.089006188111] , [ 1183176000000 , 10.598330295008] , [ 1185854400000 , 9.968954653301] , [ 1188532800000 , 9.7740580198146] , [ 1191124800000 , 10.558483060626] , [ 1193803200000 , 9.9314651823603] , [ 1196398800000 , 9.3997715873769] , [ 1199077200000 , 8.4086493387262] , [ 1201755600000 , 8.9698309085926] , [ 1204261200000 , 8.2778357995396] , [ 1206936000000 , 8.8585045600123] , [ 1209528000000 , 8.7013756413322] , [ 1212206400000 , 7.7933605469443] , [ 1214798400000 , 7.0236183483064] , [ 1217476800000 , 6.9873088186829] , [ 1220155200000 , 6.8031713070097] , [ 1222747200000 , 6.6869531315723] , [ 1225425600000 , 6.138256993963] , [ 1228021200000 , 5.6434994016354] , [ 1230699600000 , 5.495220262512] , [ 1233378000000 , 4.6885326869846] , [ 1235797200000 , 4.4524349883438] , [ 1238472000000 , 5.6766520778185] , [ 1241064000000 , 5.7675774480752] , [ 1243742400000 , 5.7882863168337] , [ 1246334400000 , 7.2666010034924] , [ 1249012800000 , 7.519182132226] , [ 1251691200000 , 7.849651451445] , [ 1254283200000 , 10.383992037985] , [ 1256961600000 , 9.0653691861818] , [ 1259557200000 , 9.6705248324159] , [ 1262235600000 , 10.856380561349] , [ 1264914000000 , 11.27452370892] , [ 1267333200000 , 11.754156529088] , [ 1270008000000 , 8.2870811422456] , [ 1272600000000 , 8.0210264360699] , [ 1275278400000 , 7.5375074474865] , [ 1277870400000 , 8.3419527338039] , [ 1280548800000 , 9.4197471818443] , [ 1283227200000 , 8.7321733185797] , [ 1285819200000 , 9.6627062648126] , [ 1288497600000 , 10.187962234549] , [ 1291093200000 , 9.8144201733476] , [ 1293771600000 , 10.275723361713] , [ 1296450000000 , 16.796066079353] , [ 1298869200000 , 17.543254984075] , [ 1301544000000 , 16.673660675084] , [ 1304136000000 , 17.963944353609] , [ 1306814400000 , 16.637740867211] , [ 1309406400000 , 15.84857094609] , [ 1312084800000 , 14.767303362182] , [ 1314763200000 , 24.778452182432] , [ 1317355200000 , 18.370353229999] , [ 1320033600000 , 15.2531374291] , [ 1322629200000 , 14.989600840649] , [ 1325307600000 , 16.052539160125] , [ 1327986000000 , 16.424390322793] , [ 1330491600000 , 17.884020741105] , [ 1333166400000 , 7.1424929577921] , [ 1335758400000 , 7.8076213051482] , [ 1338436800000 , 7.2462684949232]]
  }, {
    'key' : 'Health Care',
    'color' : COLOR_ORANGE,
    'values' : [ [ 1138683600000 , 14.212410956029] , [ 1141102800000 , 13.973193618249] , [ 1143781200000 , 15.218233920665] , [ 1146369600000 , 14.38210972745] , [ 1149048000000 , 13.894310878491] , [ 1151640000000 , 15.593086090032] , [ 1154318400000 , 16.244839695188] , [ 1156996800000 , 16.017088850646] , [ 1159588800000 , 14.183951830055] , [ 1162270800000 , 14.148523245697] , [ 1164862800000 , 13.424326059972] , [ 1167541200000 , 12.974450435753] , [ 1170219600000 , 13.23247041802] , [ 1172638800000 , 13.318762655574] , [ 1175313600000 , 15.961407746104] , [ 1177905600000 , 16.287714639805] , [ 1180584000000 , 16.246590583889] , [ 1183176000000 , 17.564505594809] , [ 1185854400000 , 17.872725373165] , [ 1188532800000 , 18.018998508757] , [ 1191124800000 , 15.584518016603] , [ 1193803200000 , 15.480850647181] , [ 1196398800000 , 15.699120036984] , [ 1199077200000 , 19.184281817226] , [ 1201755600000 , 19.691226605207] , [ 1204261200000 , 18.982314051295] , [ 1206936000000 , 18.707820309008] , [ 1209528000000 , 17.459630929761] , [ 1212206400000 , 16.500616076782] , [ 1214798400000 , 18.086324003979] , [ 1217476800000 , 18.929464156258] , [ 1220155200000 , 18.233728682084] , [ 1222747200000 , 16.315776297325] , [ 1225425600000 , 14.63289219025] , [ 1228021200000 , 14.667835024478] , [ 1230699600000 , 13.946993947308] , [ 1233378000000 , 14.394304684397] , [ 1235797200000 , 13.724462792967] , [ 1238472000000 , 10.930879035806] , [ 1241064000000 , 9.8339915513708] , [ 1243742400000 , 10.053858541872] , [ 1246334400000 , 11.786998438287] , [ 1249012800000 , 11.780994901769] , [ 1251691200000 , 11.305889670276] , [ 1254283200000 , 10.918452290083] , [ 1256961600000 , 9.6811395055706] , [ 1259557200000 , 10.971529744038] , [ 1262235600000 , 13.330210480209] , [ 1264914000000 , 14.592637568961] , [ 1267333200000 , 14.605329141157] , [ 1270008000000 , 13.936853794037] , [ 1272600000000 , 12.189480759072] , [ 1275278400000 , 11.676151385046] , [ 1277870400000 , 13.058852800017] , [ 1280548800000 , 13.62891543203] , [ 1283227200000 , 13.811107569918] , [ 1285819200000 , 13.786494560787] , [ 1288497600000 , 14.04516285753] , [ 1291093200000 , 13.697412447288] , [ 1293771600000 , 13.677681376221] , [ 1296450000000 , 19.961511864531] , [ 1298869200000 , 21.049198298158] , [ 1301544000000 , 22.687631094008] , [ 1304136000000 , 25.469010617433] , [ 1306814400000 , 24.883799437121] , [ 1309406400000 , 24.203843814248] , [ 1312084800000 , 22.138760964038] , [ 1314763200000 , 16.034636966228] , [ 1317355200000 , 15.394958944556] , [ 1320033600000 , 12.625642461969] , [ 1322629200000 , 12.973735699739] , [ 1325307600000 , 15.786018336149] , [ 1327986000000 , 15.227368020134] , [ 1330491600000 , 15.899752650734] , [ 1333166400000 , 18.994731295388] , [ 1335758400000 , 18.450055817702] , [ 1338436800000 , 17.863719889669]]
  }, {
    'key' : 'Information Technology',
    'color' : COLOR_BLACK,
    'values' : [ [ 1138683600000 , 13.242301508051] , [ 1141102800000 , 12.863536342042] , [ 1143781200000 , 21.034044171629] , [ 1146369600000 , 21.419084618803] , [ 1149048000000 , 21.142678863691] , [ 1151640000000 , 26.568489677529] , [ 1154318400000 , 24.839144939905] , [ 1156996800000 , 25.456187462167] , [ 1159588800000 , 26.350164502826] , [ 1162270800000 , 26.47833320519] , [ 1164862800000 , 26.425979547847] , [ 1167541200000 , 28.191461582256] , [ 1170219600000 , 28.930307448808] , [ 1172638800000 , 29.521413891117] , [ 1175313600000 , 28.188285966466] , [ 1177905600000 , 27.704619625832] , [ 1180584000000 , 27.490862424829] , [ 1183176000000 , 28.770679721286] , [ 1185854400000 , 29.060480671449] , [ 1188532800000 , 28.240998844973] , [ 1191124800000 , 33.004893194127] , [ 1193803200000 , 34.075180359928] , [ 1196398800000 , 32.548560664833] , [ 1199077200000 , 30.629727432728] , [ 1201755600000 , 28.642858788159] , [ 1204261200000 , 27.973575227842] , [ 1206936000000 , 27.393351882726] , [ 1209528000000 , 28.476095288523] , [ 1212206400000 , 29.29667866426] , [ 1214798400000 , 29.222333802896] , [ 1217476800000 , 28.092966093843] , [ 1220155200000 , 28.107159262922] , [ 1222747200000 , 25.482974832098] , [ 1225425600000 , 21.208115993834] , [ 1228021200000 , 20.295043095268] , [ 1230699600000 , 15.925754618401] , [ 1233378000000 , 17.162864628346] , [ 1235797200000 , 17.084345773174] , [ 1238472000000 , 22.246007102281] , [ 1241064000000 , 24.530543998509] , [ 1243742400000 , 25.084184918242] , [ 1246334400000 , 16.606166527358] , [ 1249012800000 , 17.239620011628] , [ 1251691200000 , 17.336739127379] , [ 1254283200000 , 25.478492475753] , [ 1256961600000 , 23.017152085245] , [ 1259557200000 , 25.617745423683] , [ 1262235600000 , 24.061133998642] , [ 1264914000000 , 23.223933318644] , [ 1267333200000 , 24.425887263937] , [ 1270008000000 , 35.501471156693] , [ 1272600000000 , 33.775013878676] , [ 1275278400000 , 30.417993630285] , [ 1277870400000 , 30.023598978467] , [ 1280548800000 , 33.327519522436] , [ 1283227200000 , 31.963388450371] , [ 1285819200000 , 30.498967232092] , [ 1288497600000 , 32.403696817912] , [ 1291093200000 , 31.47736071922] , [ 1293771600000 , 31.53259666241] , [ 1296450000000 , 41.760282761548] , [ 1298869200000 , 45.605771243237] , [ 1301544000000 , 39.986557966215] , [ 1304136000000 , 43.846330510051] , [ 1306814400000 , 39.857316881857] , [ 1309406400000 , 37.675127768208] , [ 1312084800000 , 35.775077970313] , [ 1314763200000 , 48.631009702577] , [ 1317355200000 , 42.830831754505] , [ 1320033600000 , 35.611502589362] , [ 1322629200000 , 35.320136981738] , [ 1325307600000 , 31.564136901516] , [ 1327986000000 , 32.074407502433] , [ 1330491600000 , 35.053013769976] , [ 1333166400000 , 26.434568573937] , [ 1335758400000 , 25.305617871002] , [ 1338436800000 , 24.520919418236]]
  }];

  nv.addGraph(function() {
    var stackedAreaChart = nv.models.stackedAreaChart()
      .useInteractiveGuideline(true)
      .x(function(d) { return d[0] })
      .y(function(d) { return d[1] })
      .controlLabels({stacked: 'Stacked'})
      .showControls(false)
      .duration(300);

    stackedAreaChart.xAxis.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
    stackedAreaChart.yAxis.tickFormat(d3.format(',.4f'));

    d3.select('#nv-stacked-area-chart')
      .append('svg')
      .datum(stackedAreaChartData)
      .transition().duration(1000)
      .call(stackedAreaChart)
      .each('start', function() {
      setTimeout(function() {
        d3.selectAll('#nv-stacked-area-chart *').each(function() {
          if(this.__transition__)
            this.__transition__.duration = 1;
        })
      }, 0)
    });

    nv.utils.windowResize(stackedAreaChart.update);
    return stackedAreaChart;
  });
</script>

Stacked Bar Chart

<!-- required files -->
<link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />
<script src="../assets/plugins/d3/d3.min.js"></script>
<script src="../assets/plugins/nvd3/build/nv.d3.min.js"></script>

<div id="nv-stacked-bar-chart" class="h-250px"></div>

<script>
  var stackedBarChartData = [{
    key: 'Stream 1',
    'color' : COLOR_RED,
    values: [
      { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 20}, { x:5, y: 57}, { x:6, y: 42}, { x:7, y: 12}, { x:8, y: 65}, { x:9, y: 34}, { x:10, y: 52}, 
      { x:11, y: 23}, { x:12, y: 12}, { x:13, y: 22}, { x:14, y: 22}, { x:15, y: 48}, { x:16, y: 54}, { x:17, y: 32}, { x:18, y: 13}, { x:19, y: 21}, { x:20, y: 12}
    ]
  },{
    key: 'Stream 2',
    'color' : COLOR_ORANGE,
    values: [
      { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 45}, { x:5, y: 67}, { x:6, y: 34}, { x:7, y: 43}, { x:8, y: 65}, { x:9, y: 32}, { x:10, y: 12}, 
      { x:11, y: 43}, { x:12, y: 45}, { x:13, y: 32}, { x:14, y: 32}, { x:15, y: 38}, { x:16, y: 64}, { x:17, y: 42}, { x:18, y: 23}, { x:19, y: 31}, { x:20, y: 22}
    ]
  },{
    key: 'Stream 2',
    'color' : COLOR_BLACK,
    values: [
      { x:1, y: 20}, { x:2, y: 25}, { x:3, y: 26}, { x:4, y: 30}, { x:5, y: 57}, { x:6, y: 52}, { x:7, y: 22}, { x:8, y: 75}, { x:9, y: 44}, { x:10, y: 62}, 
      { x:11, y: 35}, { x:12, y: 15}, { x:13, y: 25}, { x:14, y: 25}, { x:15, y: 45}, { x:16, y: 55}, { x:17, y: 35}, { x:18, y: 15}, { x:19, y: 25}, { x:20, y: 15}
    ]
  }];

  nv.addGraph({
    generate: function() {
      var stackedBarChart = nv.models.multiBarChart()
        .stacked(true)
        .showControls(false);

      var svg = d3.select('#nv-stacked-bar-chart').append('svg').datum(stackedBarChartData);
      svg.transition().duration(0).call(stackedBarChart);
      return stackedBarChart;
    }
  });
</script>

Pie Chart

<!-- required files -->
<link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />
<script src="../assets/plugins/d3/d3.min.js"></script>
<script src="../assets/plugins/nvd3/build/nv.d3.min.js"></script>

<div id="nv-pie-chart" class="h-250px"></div>

<script>
  var pieChartData = [
    { 'label': 'One', 'value' : 29, 'color': COLOR_RED }, 
    { 'label': 'Two', 'value' : 12, 'color': COLOR_ORANGE }, 
    { 'label': 'Three', 'value' : 32, 'color': COLOR_GREEN }, 
    { 'label': 'Four', 'value' : 196, 'color': COLOR_AQUA }, 
    { 'label': 'Five', 'value' : 17, 'color': COLOR_BLUE }, 
    { 'label': 'Six', 'value' : 98, 'color': COLOR_PURPLE }, 
    { 'label': 'Seven', 'value' : 13, 'color': COLOR_GREY }, 
    { 'label': 'Eight', 'value' : 5, 'color': COLOR_BLACK }
  ];

  nv.addGraph(function() {
    var pieChart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)
      .labelThreshold(.05);

    d3.select('#nv-pie-chart').append('svg')
      .datum(pieChartData)
      .transition().duration(350)
      .call(pieChart);

    return pieChart;
  });
</script>

Donut Chart

<!-- required files -->
<link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />
<script src="../assets/plugins/d3/d3.min.js"></script>
<script src="../assets/plugins/nvd3/build/nv.d3.min.js"></script>

<div id="nv-donut-chart" class="h-250px"></div>

<script>
  var pieChartData = [
    { 'label': 'One', 'value' : 29, 'color': COLOR_RED }, 
    { 'label': 'Two', 'value' : 12, 'color': COLOR_ORANGE }, 
    { 'label': 'Three', 'value' : 32, 'color': COLOR_GREEN }, 
    { 'label': 'Four', 'value' : 196, 'color': COLOR_AQUA }, 
    { 'label': 'Five', 'value' : 17, 'color': COLOR_BLUE }, 
    { 'label': 'Six', 'value' : 98, 'color': COLOR_PURPLE }, 
    { 'label': 'Seven', 'value' : 13, 'color': COLOR_GREY }, 
    { 'label': 'Eight', 'value' : 5, 'color': COLOR_BLACK }
  ];

  nv.addGraph(function() {
    var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)
      .labelThreshold(.05)
      .labelType("percent")
      .donut(true) 
      .donutRatio(0.35);

    d3.select('#nv-donut-chart').append('svg')
      .datum(pieChartData)
      .transition().duration(350)
      .call(chart);

    return chart;
  });
</script>
App Settings
Header Fixed
Header Inverse
Sidebar Fixed
Sidebar Grid
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage