CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
Wasimakram Mulla
Wasimakram Mulla

Reputation: 511

Show values on Y Axis as it is with Higher and lower limits NVD3 Line Chart

I have a line chart with dummy data say

My graph is plotted perfectly but the values on Y axis are not showing in thousands. The values in the below data will be from backend and in thousands only so need a solution to print the y axis as it is.

[{"key":"City31","values":[["1990",6428.59],["1991",7079.34],["1992",4014.61],["1993",4000.77],["1994",4005.34],["1995",4182.21],["1996",4034.73],["1997",5891.87],["1998",4735.89],["1999",4039.58],["2000",4000],["2001",5030.29],["2002",4000.03],["2003",4000.43],["2004",4321.92],["2005",12575.87],["2006",4000],["2007",4027.99],["2008",4000],["2009",5087.42],["2010",6584.68],["2011",4000],["2012",4000],["2013",4000],["2014",29458.22],["2015",4068.58],["2016",4000.01],["2017",4000.12],["2018",4000],["2019",4003.91],["2020",8956.47],["2021",4000],["2022",4000],["2023",4000],["2024",4000],["2025",4264.9],["2026",4222.05],["2027",4039.94],["2028",4019.64],["2029",4000],["2030",4000.34],["2031",4279.83],["2032",4000],["2033",4006.69],["2034",4000],["2035",4000],["2036",4000],["2037",4000],["2038",4000],["2039",4000],["2040",4000],["2041",4000],["2042",4000],["2043",4627.18],["2044",4000],["2045",4000],["2046",4000],["2047",4000.11],["2048",4000],["2049",4000.04],["2050",4000.19]]},{"key":"City32","values":[["1990",6428.59],["1991",7079.34],["1992",4014.61],["1993",4000.77],["1994",4005.34],["1995",4182.21],["1996",4034.73],["1997",5891.87],["1998",4735.89],["1999",4039.58],["2000",4000],["2001",5030.29],["2002",4000.03],["2003",4000.43],["2004",4321.92],["2005",12575.87],["2006",4000],["2007",4027.99],["2008",4000],["2009",5087.42],["2010",6584.68],["2011",4000],["2012",4000],["2013",4000],["2014",29458.22],["2015",4068.58],["2016",4000.01],["2017",4000.12],["2018",4000],["2019",4003.91],["2020",8956.47],["2021",4000],["2022",4000],["2023",4000],["2024",4000],["2025",4264.9],["2026",4222.05],["2027",4039.94],["2028",4019.64],["2029",4000],["2030",4000.34],["2031",4279.83],["2032",4000],["2033",4006.69],["2034",4000],["2035",4000],["2036",4000],["2037",4000],["2038",4000],["2039",4000],["2040",4000],["2041",4000],["2042",4000],["2043",4627.18],["2044",4000],["2045",4000],["2046",4000],["2047",4000.11],["2048",4000],["2049",4000.04],["2050",4000.19]]}]

Code:

nv.addGraph(function() {
        var chart = nv.models.cumulativeLineChart()
                      .x(function(d) { return d[0] })
                      .y(function(d) { return d[1] }) //adjusting, 100% is 1.00, not 100 as it is in the data
                      .color(d3.scale.category10().range())
                      .useInteractiveGuideline(false); 
        //chart.yAxis.tickFormat(d3.format(',.0d'));
        d3.select('#chart2 svg')
            .datum(chartdata)
            .call(chart);
        nv.utils.windowResize(chart.update);
return chart;
    });

Output: enter image description here

Upvotes: 1

Views: 433

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You should be using a line chart not a cumulative chart.

var chart = nv.models.lineChart()
              .x(function(d) { return d[0] })
              .y(function(d) { console.log(d);return d[1] }) 
              .color(d3.scale.category10().range())
              .useInteractiveGuideline(true)
              ;

Working code here

Hope this helps!

Upvotes: 1

Related Questions