I'm using nvd3.js to create a line graph that displays ratings that I have calculated over time. I have more information for each individual data point (rating) and would like to have each data point on the graph link to a unique page with more information about that specific data point.

For example: I would like to be able to hover over the first data point on the graph (x: 1345457533, y: -0.0126262626263) and click on it to go to a specific page () that provides more information about that rating or data point. Each data point has a unique id and unique url that I would like to link to.

Here is the code that I am using to generate the graph:

nv.addGraph(function() {
  var chart = nv.models.lineChart();

  chart.xAxis
      .axisLabel('Time')
      .tickFormat(d3.format('r'));

  chart.yAxis
      .axisLabel('Rating')
      .tickFormat(d3.format('.2f'));

  d3.select('#chart svg')
      .datum(data())
      .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

function data() {
  var data = [ { x: 1345457533, y: -0.0126262626263 },
               { x: 1345457409, y: 0.0224089635854 },
               { x: 1345457288, y: 0.0270935960591 },
               { x: 1345457168, y: -0.0378151260504 },
               { x: 1345457046, y: -0.115789473684 } ]

  return [
    {
      values: data,
      key: "Sample1",
      color: "#232066"
    }
  ];
}

The HTML:

<div id="chart">
  <svg></svg>
</div>

And here is a working example.

I'm using nvd3.js to create a line graph that displays ratings that I have calculated over time. I have more information for each individual data point (rating) and would like to have each data point on the graph link to a unique page with more information about that specific data point.

For example: I would like to be able to hover over the first data point on the graph (x: 1345457533, y: -0.0126262626263) and click on it to go to a specific page (http://www.example./info?id=1) that provides more information about that rating or data point. Each data point has a unique id and unique url that I would like to link to.

Here is the code that I am using to generate the graph:

nv.addGraph(function() {
  var chart = nv.models.lineChart();

  chart.xAxis
      .axisLabel('Time')
      .tickFormat(d3.format('r'));

  chart.yAxis
      .axisLabel('Rating')
      .tickFormat(d3.format('.2f'));

  d3.select('#chart svg')
      .datum(data())
      .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

function data() {
  var data = [ { x: 1345457533, y: -0.0126262626263 },
               { x: 1345457409, y: 0.0224089635854 },
               { x: 1345457288, y: 0.0270935960591 },
               { x: 1345457168, y: -0.0378151260504 },
               { x: 1345457046, y: -0.115789473684 } ]

  return [
    {
      values: data,
      key: "Sample1",
      color: "#232066"
    }
  ];
}

The HTML:

<div id="chart">
  <svg></svg>
</div>

And here is a working example.

• javascript
• svg
• d3.js
• nvd3.js

Share Improve this question Follow edited Oct 24, 2012 at 12:26 Yannick Blondeau 9,63988 gold badges5353 silver badges7474 bronze badges asked Aug 23, 2012 at 20:26 Scott BartellScott Bartell 2,85033 gold badges2626 silver badges3636 bronze badges 4

• 1 The SVG spec describes how to add links to elements. Could you provide a plete example on jsfiddle please? I've tried to get your code working, but I must be missing something. – Lars Kotthoff Commented Sep 12, 2012 at 9:34
• @LarsKotthoff here's a working jsfiddle. – Scott Bartell Commented Sep 12, 2012 at 14:09
• 3 Thanks. I've had a look at it and unfortunately nvd3.js doesn't give you the kind of low-level access you'd need to achieve what you want. You can't get the point elements or popups. So you basically have 3 choices. You could modify nvd3.js to do what you want. This shouldn't be too hard. Or you could do it in plain d3.js, which will give you access to everything. This shouldn't be too hard either. Third, you could try to manually identify the elements after nvd3.js has done it's work and add what you want. Hacky and most likely difficult, not remended. – Lars Kotthoff Commented Sep 12, 2012 at 14:32
• 1 You should be able to add whatever you want using d3.js itself by firing a selector that finds elements and adds the link needed. look at d3 docs. – naugtur Commented Sep 19, 2012 at 11:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Here is an working solution http://jsfiddle/66hAj/7/

$('#chart svg').on('click', function(e){
    var elem = $(e.target),
        currentItem, currentUrl;

    if(elem.parent('.nv-point-paths').length) {
        currentItem = e.target.getAttribute('class').match(/\d+/)[0];
        currentUrl = _data[0].urls[ currentItem ];

        $('#log').text(currentUrl);
        //window.location = currentUrl
    }
})

I've used jQuery to bind a click handler on the canvas and then get the data based on the element clicked on the graph.

currentItem gives you the id of the current item that you clicked on

currentUrl gives the url related to the currently clicked item.

You can see the url change in the div below the chart as you click on each point over the graph.