how to insert data into nvd3 barchart

Question

I have a nvd3 chart example, however i have no idea how to enter the data into the graph and make use of it.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
    <script src="build/nv.d3.js"></script>
    <script src="lib/stream_layers.js"></script>
    <style>
        text {
            font: 12px sans-serif;
        }

        svg {
            display: block;
        }

        html, body, #test1, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="test1">
        <svg></svg>
    </div>
    <script>

        //var test_data = stream_layers(3,128,.1).map(function(data, i) {
        var test_data = stream_layers(3, 128, .1).map(function (data, i) {
            return {
                key: (i == 1) ? 'Non-stackable Stream' + i : 'Stream' + i,
                nonStackable: (i == 1),
                values: data
            };
        });
        nv.addGraph({
            generate: function () {
                var width = nv.utils.windowSize().width,
                    height = nv.utils.windowSize().height;

                var chart = nv.models.multiBarChart()
                    .width(width)
                    .height(height)
                    .stacked(true)
                ;

                chart.dispatch.on('renderEnd', function () {
                    console.log('Render Complete');
                });

                var svg = d3.select('#test1 svg').datum(test_data);
                console.log('calling chart');
                svg.transition().duration(0).call(chart);

                return chart;
            },
            callback: function (graph) {
                nv.utils.windowResize(function () {
                    var width = nv.utils.windowSize().width;
                    var height = nv.utils.windowSize().height;
                    graph.width(width).height(height);

                    d3.select('#test1 svg')
                        .attr('width', width)
                        .attr('height', height)
                        .transition().duration(0)
                        .call(graph);

                });
            }
        });

    </script>
</body>
</html>

Java(Where the data is taken from)

/* Inspired by Lee Byron's test data generator. */

function stream_layers(n, m, o) {
  if (arguments.length < 3) o = 0;
  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
      var w = (i / m - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
  return d3.range(n).map(function() {
      var a = [], i;
      for (i = 0; i < m; i++) a[i] = o + o * Math.random();
      for (i = 0; i < 5; i++) bump(a);
      return a.map(stream_index);
    });
}

/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
  return d3.range(n).map(function(i) {
    return d3.range(m).map(function(j) {
        var x = 20 * j / m - i / 3;
        return 2 * x * Math.exp(-.5 * x);
      }).map(stream_index);
    });
}
function stream_index(d, i) {
  return {x: i, y: Math.max(0, d)};
}

So as seen above the data for the example is randomly generated. If someone can give me a reference, or an example of how do i enter data into the grouped bar chart. It will really help me a lot.

What im trying to add in my data into is this http://nvd3.org/livecode/index.html#codemirrorNav The grouped bar chart example.

I really am new to this javascript coding, so all help is truly appreciated.

Have you done a console.log(test_data)? You can see how the data is passed into the chart. — shabeer90
Nope, haven't heard of that before, i'll go try. But seeing the flow it will show me how to hardcode data i want into the graph? Thanks btw, still really kinda learning from scratch — noob

user3623332 user3623332 · Accepted Answer · 2015-11-18T16:35:34

An example from the NVD3 website:

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
      .transitionDuration(350)
      .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
      .rotateLabels(0)      //Angle to rotate x-axis labels.
      .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
      .groupSpacing(0.1)    //Distance between each group of bars.
    ;

    chart.xAxis
        .tickFormat(d3.format(',f'));

    chart.yAxis
        .tickFormat(d3.format(',.1f'));

    d3.select('#chart1 svg')
        .datum(test_data)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

So, crucial here is to have element with id="chart1" and inside that element to have an empty svg element (I'm explaining the above setup, it can be different id's and directly only svg element)

The important part is that the data format must be in a specific format. So it should be a JSON object, something like this:

test_data = [
    {
      values: [{x,y},{x,y}],
      key: 'some key', 
      color: 'some color'
    },....

    {
      values: [{x,y},{x,y}],
      key: 'some key', 
      color: 'some color'
    }
];

In your case I see strange the generate and callback functions, which I see that it is a little bit mixed up.

Reference for the above example: http://nvd3.org/examples/multiBar.html

And refer to the latest documentation and examples: http://nvd3-community.github.io/nvd3/examples/documentation.html

how to insert data into nvd3 barchart

1 Answers