CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
Navyseal
Navyseal

Reputation: 901

Formatting nvd3 line chart axis

I am trying to fix a simple line chart done using nvd3 (D3) library but somehow cant seem to be able to fix the code.

Here is the fiddle: http://jsfiddle.net/sourabhtewari/o24ffe99/

The data looks like this

  var reportData = [{
    "key": "ActualElapsedTime",
    "color": "#d62728",
    "values": [{
      "x": "2016-03-21T00:00:00",
      "y": 100.00
    }, {
      "x": "2016-03-22T00:00:00",
      "y": 99.00
    }]
  }];

Over all code is like 

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .margin({
      left: 100
    }) //Adjust chart margins to give the x-axis some breathing room.
    .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
    .transitionDuration(350) //how fast do you want the lines to transition?
    .showLegend(true) //Show the legend, allowing users to turn on/off line series.
    .showYAxis(true) //Show the y-axis
    .showXAxis(true) //Show the x-axis
  ;

  chart.xAxis //Chart x-axis settings
    .axisLabel('Date')
    .tickFormat(function(d) {
      return d3.time.format('%x')(new Date(d))
    });

  chart.yAxis //Chart y-axis settings
    .axisLabel('Consistancy')
    .tickFormat(d3.format('.02f'));

  var reportData = [{
    "key": "ActualElapsedTime",
    "color": "#d62728",
    "values": [{
      "x": "2016-03-21T00:00:00",
      "y": 100.00
    }, {
      "x": "2016-03-22T00:00:00",
      "y": 99.00
    }]
  }];
  /* Done setting the chart up? Time to render it!*/

  d3.select('#chart svg') //Select the <svg> element you want to render the chart in.   
    .datum(reportData) //Populate the <svg> element with chart data...
    .call(chart); //Finally, render the chart!

  //Update the chart when window resizes.
  nv.utils.windowResize(function() {
    chart.update()
  });
  return chart;
});

Looks like this

I am unable to plot the chart properly. I dont have enough experience with d3. If someone could help me fix this. I would be grateful.

Upvotes: 2

Views: 897

Answers (2)

murli2308
murli2308

Reputation: 2994

Read Time formating of d3js

you are missing parseDate function

var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse

parseDate functions accept a string and convert strings to Date object.

so your data should look like below.

var reportData = [{
    "key": "ActualElapsedTime",
    "color": "#d62728",
    "values": [{
      "x": parseDate("2016-03-21T00:00:00"),
      "y": 100.00
    }, {
      "x": parseDate("2016-03-22T00:00:00"),
      "y": 99.00
    }]
}];

Upvotes: 1

Lukasz Wiktor
Lukasz Wiktor

Reputation: 20412

Use Date objects instead of strings in your reportData:

  var reportData = [{
    "key": "ActualElapsedTime",
    "color": "#d62728",
    "values": [{
      "x": new Date("2016-03-21T00:00:00"),
      "y": 100.00
    }, {
      "x": new Date("2016-03-22T00:00:00"),
      "y": 99.00
    }]
  }];

Additionally you can set tickValues based on your data:

var tickValues = reportData[0].values.map(function(p) { return p.x});
chart.xAxis.tickValues(tickValues);

Working example: http://jsfiddle.net/LukaszWiktor/rcL0uot9/

Result:

enter image description here

Upvotes: 1

Related Questions