Map data for lineWithFocusChart time series

Question

Map data for lineWithFocusChart time series

514 Views Asked by greenafrican At 26 June 2015 at 11:59

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?

Original Q&A

There are 1 best solutions below

**Alex_B** · Answer 1 · 2015-06-26T12:56:23.393000

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.

Map data for lineWithFocusChart time series

There are 1 best solutions below

Related Questions in D3.JS

Related Questions in NVD3.JS

Trending Questions

Popular # Hahtags

Popular Questions