CODEWITHSUNDEEP
javascriptjquerygraphnvd3.js
Naveen
Naveen

Reputation: 791

how to show 2 lines with different range on nvd3 graph

I am plotting a line graph using nvd3 library, it plots two lines but there is huge difference in both line values, one line (line 1) have values close to 500 and second line (line 2) have values between 0-1 because of range difference line 2 which have values in 0-1 is shown as flat line close to x-axis though its values are changing.

If I hide line 1 than i see the line 2 properly with variations, how can I show this kind of graph, here is the code and some snap shots :

nv.addGraph(function() {
      var chart = nv.models.lineChart()
                    .width(800).height(420)
                    .margin({left: 100,right: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('X-axis');

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


  d3.select('#graph-chart svg')    //Select the <svg> element you want to render the chart in.   
      .datum(data)        //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;
});

Graph with both values here beta is shown as flat line :

enter image description here

Graph only with beta :

enter image description here

Edit :

Testing data

 {
    "key": "key1",
    "values": [
        [
            1697000000,
            19024000000
        ],
        [
            1764000000,
            19764000000
        ],
        [
            1829000000,
            21496000000
        ],
        [
            2122000000,
            20559000000
        ]
    ]
},
{
    "key": "key2",
    "values": [
        [
            1697000000,
            13530000
        ],
        [
            1764000000,
            41790000
        ],
        [
            1829000000,
            29280000
        ],
        [
            2122000000,
            11050000
        ]
    ]
}

Upvotes: 0

Views: 1465

Answers (3)

Andrei Cojea
Andrei Cojea

Reputation: 675

You may want to use a multiChart type, which has two Y axis.

There seems to be no documentation on the nvd3 website

Also, if you're using AngularJS, check this out: http://krispo.github.io/angular-nvd3/#/multiChart

Upvotes: 1

Naveen
Naveen

Reputation: 791

found some thing, normalize all the data you have on y-axis using any one :

a'(i) = a(i)/mean(a)

or

a'(i) = (a(i) - mean(a))/std_dev(a)

a is data array.

Then plot the data and denormalize it back using formatter on y - axis while plotting :

a(i) = a'(i) * mean(a)    or   a(i) = a'(i) * std_dev(a) + mean(a)

chart.yAxis     //Chart y-axis settings
          .axisLabel('')
          .tickFormat(formatter);

Upvotes: 0

Eric
Eric

Reputation: 43

With nvd3 you may use a log scale for the Y axis. Useful for such kind of series.

Upvotes: 0

Related Questions