Map data for lineWithFocusChart time series

Question

I am trying to create a timeseries using the nvd3 lineWithFocusChart model. My data is an array of objects like this:

[
    {
        "key": "red",
        "values": [
            {
                "date": "2015-06-17T11:00:00.000Z",
                "value": 17
            },
            ...]
    },
    {
        "key": "green",
        "values": [
            {
                "date": "2015-06-17T11:00:00.000Z",
                "value": 20
            },
            ...]
    },
]

I just want to map date to x and value to y, which looking at other examples is typically done like this:

nv.addGraph(function() {
        var chart = nv.models.lineWithFocusChart()
            .x(function(d) { return new Date(d.daterun)})
            .y(function(d) { return d.value});
        chart.brushExtent([50,70]);
        chart.xAxis.tickFormat(d3.format(function(d) { 
          return d3.time.format('%x')(new Date(d));
        }));
        chart.x2Axis.tickFormat(d3.format(',f'));
        chart.yAxis.tickFormat(d3.format(',.2f'));
        chart.y2Axis.tickFormat(d3.format(',.2f'));
        chart.useInteractiveGuideline(true);
        d3.select('#chart svg')
            .datum(data)
            .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });

But on the .x(function(d) { return new Date(d.date)}) I am getting TypeError: d is undefined.

How can I map my data correctly for this chart model?

I dont think you can map the data from within the model until you assign data to the chart. check this code https://github.com/nvd3-community/nvd3/blob/gh-pages/examples/lineWithFocusChart.html between lines 33-51 — Alex_B, Jun 26 '15 at 12:17
@Alex_B but they map it in this similar chart https://github.com/nvd3-community/nvd3/blob/gh-pages/examples/stackedAreaChart.html on line 86, 87? Perhaps the chart models work differently? — greenafrican, Jun 26 '15 at 12:25
could you include a bit more of your code to see how you init the chart with similar to d3.select('#chart1').datum(data).call(chart) — Alex_B, Jun 26 '15 at 12:31

score 0 · Answer 1 · answered Jun 26 '15 at 12:56

I have created the following code from the parts you provided I do not receive the error that you refer to, my lines do not draw probably because I only have two points of data. See below:

<link href="libs/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="libs/nv.d3.js"></script>
<script src="libs/stream_layers.js"></script>

<body>
<div id="chart" class='with-3d-shadow with-transitions'>
<svg></svg>
</div>

<script>

nv.addGraph(function() {
    var chart = nv.models.lineWithFocusChart()
        .x(function(d) { return new Date(d.date)})
        .y(function(d) { return d.value});
    chart.brushExtent([50,70]);
    chart.xAxis.tickFormat(d3.format(function(d) {
      return d3.time.format('%x')(new Date(d.date));
    }));
    chart.x2Axis.tickFormat(d3.format(',f'));
    chart.yAxis.tickFormat(d3.format(',.2f'));
    chart.y2Axis.tickFormat(d3.format(',.2f'));
    chart.useInteractiveGuideline(true);
    d3.select('#chart svg')
        .datum(data())
        .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});

function data() {
  return [
      {
          "key": "red",
          "values": [
              {
                  "date": "2015-06-17T11:00:00.000Z",
                  "value": 17
              },
              {
                  "date": "2015-06-17T11:00:00.000Z",
                  "value": 18
              },
              ]
      },
      {
          "key": "green",
          "values": [
              {
                  "date": "2015-06-17T11:00:00.000Z",
                  "value": 20
              },
              {
                  "date": "2015-06-17T11:00:00.000Z",
                  "value": 17
              },
              ]
      }
]
}

</script>
</body>

the only thing I found which was wrong is that you're referring to your date data point as "d.daterun" and in data as "date" which should be as "d.date" in code.

Hope this helps.

If you check your console you will see the same error with this, or at least similar. Change the second dates to the 18th and you will see the lines once you click on the brush. — greenafrican, Jun 26 '15 at 13:06
I see the lines but I do not get the error in the console with the code I provided — Alex_B, Jun 26 '15 at 13:21
It looks like this chart.useInteractiveGuideline(true); is causing the issue when you hover over the chart. check out the fiddle http://jsfiddle.net/5h5ak6yn/1/ — Alex_B, Jun 26 '15 at 13:43

Map data for lineWithFocusChart time series

1 Answers1