Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.js"></script>
  
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.css"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <svg id="chart"></svg>
</body>
</html>
 
// Declare dataset
var data = [{
    key: "Group A",
    values: [{
        'label': "01-Oct-2014",
            'x': 0,
            'y': 4661.9995
    }, {
        'label': "02-Oct-2014",
            'x': 1,
            'y': 4537.8468
    }, {
        'label': "03-Oct-2014",
            'x': 2,
            'y': 4434.6459
    }, {
        'label': "04-Oct-2014",
            'x': 3,
            'y': 2549.9547
    }, {
        'label': "05-Oct-2014",
            'x': 4,
            'y': 2285.1853
    }, {
        'label': "06-Oct-2014",
            'x': 5,
            'y': 2481.8900
    }, {
        'label': "07-Oct-2014",
            'x': 6,
            'y': 4616.2260
    }, {
        'label': "08-Oct-2014",
            'x': 7,
            'y': 4527.4563
    }, {
        'label': "09-Oct-2014",
            'x': 8,
            'y': 4584.6188
    }, {
        'label': "10-Oct-2014",
            'x': 9,
            'y': 4605.3971
    }, {
        'label': "11-Oct-2014",
            'x': 10,
            'y': 2612.1516
    }, {
        'label': "12-Oct-2014",
            'x': 11,
            'y': 2363.6817
    }, {
        'label': "13-Oct-2014",
            'x': 12,
            'y': 3124.4298
    }, {
        'label': "14-Oct-2014",
            'x': 13,
            'y': 4616.2260
    }, {
        'label': "15-Oct-2014",
            'x': 14,
            'y': 4527.4563
    }, {
        'label': "16-Oct-2014",
            'x': 15,
            'y': 4584.6188
    }, {
        'label': "17-Oct-2014",
            'x': 16,
            'y': 4605.3971
    }, {
        'label': "18-Oct-2014",
            'x': 17,
            'y': 2612.1516
    }, {
        'label': "19-Oct-2014",
            'x': 18,
            'y': 2363.6817
    }, {
        'label': "20-Oct-2014",
            'x': 19,
            'y': 3124.4298
    }, {
        'label': "21-Oct-2014",
            'x': 20,
            'y': 4616.2260
    }, {
        'label': "22-Oct-2014",
            'x': 21,
            'y': 4527.4563
    }, {
        'label': "23-Oct-2014",
            'x': 22,
            'y': 4584.6188
    }, {
        'label': "24-Oct-2014",
            'x': 23,
            'y': 4605.3971
    }, {
        'label': "25-Oct-2014",
            'x': 24,
            'y': 2612.1516
    }, {
        'label': "26-Oct-2014",
            'x': 25,
            'y': 2363.6817
    }, {
        'label': "27-Oct-2014",
            'x': 26,
            'y': 3124.4298
    }, {
        'label': "28-Oct-2014",
            'x': 27,
            'y': 4616.2260
    }, {
        'label': "29-Oct-2014",
            'x': 28,
            'y': 1371.0258
    }]
}, {
    key: "Group B",
    values: [{
        'label': "01-Oct-2014",
            'x': 0,
            'y': 11347.8000
    }, {
        'label': "02-Oct-2014",
            'x': 1,
            'y': 11214.6000
    }, {
        'label': "03-Oct-2014",
            'x': 2,
            'y': 11124.0000
    }, {
        'label': "04-Oct-2014",
            'x': 3,
            'y': 7821.6000
    }, {
        'label': "05-Oct-2014",
            'x': 4,
            'y': 4815.6000
    }, {
        'label': "06-Oct-2014",
            'x': 5,
            'y': 11544.6000
    }, {
        'label': "07-Oct-2014",
            'x': 6,
            'y': 11315.1000
    }, {
        'label': "08-Oct-2014",
            'x': 7,
            'y': 11347.8000
    }, {
        'label': "09-Oct-2014",
            'x': 8,
            'y': 11214.6000
    }, {
        'label': "10-Oct-2014",
            'x': 9,
            'y': 11124.0000
    }, {
        'label': "11-Oct-2014",
            'x': 10,
            'y': 7821.6000
    }, {
        'label': "12-Oct-2014",
            'x': 11,
            'y': 4815.6000
    }, {
        'label': "13-Oct-2014",
            'x': 12,
            'y': 11544.6000
    }, {
        'label': "14-Oct-2014",
            'x': 13,
            'y': 11315.1000
    }, {
        'label': "15-Oct-2014",
            'x': 14,
            'y': 11347.8000
    }, {
        'label': "16-Oct-2014",
            'x': 15,
            'y': 11214.6000
    }, {
        'label': "17-Oct-2014",
            'x': 16,
            'y': 11124.0000
    }, {
        'label': "18-Oct-2014",
            'x': 17,
            'y': 7821.6000
    }, {
        'label': "19-Oct-2014",
            'x': 18,
            'y': 4815.6000
    }, {
        'label': "20-Oct-2014",
            'x': 19,
            'y': 11544.6000
    }, {
        'label': "21-Oct-2014",
            'x': 20,
            'y': 11315.1000
    }, {
        'label': "22-Oct-2014",
            'x': 21,
            'y': 11347.8000
    }, {
        'label': "23-Oct-2014",
            'x': 22,
            'y': 11214.6000
    }, {
        'label': "24-Oct-2014",
            'x': 23,
            'y': 11124.0000
    }, {
        'label': "25-Oct-2014",
            'x': 24,
            'y': 7821.6000
    }, {
        'label': "26-Oct-2014",
            'x': 25,
            'y': 4815.6000
    }, {
        'label': "27-Oct-2014",
            'x': 26,
            'y': 11544.6000
    }, {
        'label': "28-Oct-2014",
            'x': 27,
            'y': 11315.1000
    }, {
        'label': "29-Oct-2014",
            'x': 28,
            'y': 3512.7000
    }]
}, {
    key: "Group C",
    values: [{
        'label': "01-Oct-2014",
            'x': 0,
            'y': 6685.8005
    }, {
        'label': "02-Oct-2014",
            'x': 1,
            'y': 6676.7532
    }, {
        'label': "03-Oct-2014",
            'x': 2,
            'y': 6689.3541
    }, {
        'label': "04-Oct-2014",
            'x': 3,
            'y': 5271.6453
    }, {
        'label': "05-Oct-2014",
            'x': 4,
            'y': 2530.4147
    }, {
        'label': "06-Oct-2014",
            'x': 5,
            'y': 9062.7100
    }, {
        'label': "07-Oct-2014",
            'x': 6,
            'y': 6698.8740
    }, {
        'label': "08-Oct-2014",
            'x': 7,
            'y': 6820.3437
    }, {
        'label': "09-Oct-2014",
            'x': 8,
            'y': 6629.9812
    }, {
        'label': "10-Oct-2014",
            'x': 9,
            'y': 6518.6029
    }, {
        'label': "11-Oct-2014",
            'x': 10,
            'y': 5209.4485
    }, {
        'label': "12-Oct-2014",
            'x': 11,
            'y': 2451.9183
    }, {
        'label': "13-Oct-2014",
            'x': 12,
            'y': 8420.1702
    }, {
        'label': "14-Oct-2014",
            'x': 13,
            'y': 6698.8740
    }, {
        'label': "15-Oct-2014",
            'x': 14,
            'y': 6820.3437
    }, {
        'label': "16-Oct-2014",
            'x': 15,
            'y': 6629.9812
    }, {
        'label': "17-Oct-2014",
            'x': 16,
            'y': 6518.6029
    }, {
        'label': "18-Oct-2014",
            'x': 17,
            'y': 5209.4485
    }, {
        'label': "19-Oct-2014",
            'x': 18,
            'y': 2451.9183
    }, {
        'label': "20-Oct-2014",
            'x': 19,
            'y': 8420.1702
    }, {
        'label': "21-Oct-2014",
            'x': 20,
            'y': 6698.8740
    }, {
        'label': "22-Oct-2014",
            'x': 21,
            'y': 6820.3437
    }, {
        'label': "23-Oct-2014",
            'x': 22,
            'y': 6629.9812
    }, {
        'label': "24-Oct-2014",
            'x': 23,
            'y': 6518.6029
    }, {
        'label': "25-Oct-2014",
            'x': 24,
            'y': 5209.4485
    }, {
        'label': "26-Oct-2014",
            'x': 25,
            'y': 2451.9183
    }, {
        'label': "27-Oct-2014",
            'x': 26,
            'y': 8420.1702
    }, {
        'label': "28-Oct-2014",
            'x': 27,
            'y': 6698.8740
    }, {
        'label': "29-Oct-2014",
            'x': 28,
            'y': 2141.6742
    }]
}];
nv.addGraph(function () {
    var chart = nv.models.lineChart()       .useInteractiveGuideline(true)
        .margin({
            left: 80,
            top: 20,
            bottom: 120,
            right: 20
        });
    chart.color(["#336699", "#FF6314", "#339933", "#CC0000"]);
    // Workaround to allow string as XAxis labels
    var tickvalues = new Array(data[0].values.length);
    var tickformat = new Array(data[0].values.length);
    for (var a = 0; a < data[0].values.length; a++) {
        tickvalues[a] = data[0].values[a].x;
        tickformat[a] = data[0].values[a].label;
    }
    chart.xAxis.axisLabel("XAxisLabel")
        .tickValues(tickvalues)
        .tickFormat(function (d) {
          return tickformat[d];
          })
    ;
    chart.yAxis.axisLabel("Measurement")
        .tickFormat(d3.format(".2f"));
    // handle overlapping labels
    if (data[0].values.length > 8) chart.xAxis.rotateLabels(-45);
    d3.select("#chart")
        .datum(data)
        .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers