CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
Raghuveer
Raghuveer

Reputation: 1493

Custom label for x axis on nvd3 graphs

I am fairly new to graphs using javascript and started using d3 and nvd3 for a project now. I am trying to plot a multi bar chart provided by nvd3 module. I am successful in plotting the data however, I am not able to customize the values for x axis for each series. I believe it is taking integer values for x to plot the graph. My question is how can I show some custom value like X, Y, Z instead of 1, 2, 3 for each graph.

Below is my code i am using

var data = [{
        "key" : "Step 1",
        "values" : [{"y" : 5,"x" : 2,},{"y" : 4,"x" : 1,}, {"y" : 4,"x" : 0,}]
    }, {
        "key" : "Step 2",
        "values" : [{"y" : 4,"x" : 0}, {"y" : 5,"x" : 2 }, {"y" : 6,"x" : 1 }]
    }, {
        "key" : "Step 3",
        "values" : [{"y" : 5,"x" : 2}, {"y" : 4,"x" : 0 }, {"y" : 5,"x" : 1 }]
    }];

    var chart;
    var tickValues = ['X','Y','Z'];
    nv.addGraph(function() {
        chart = nv.models.multiBarChart().margin({
            bottom : 100
        }).transitionDuration(300).delay(0).groupSpacing(0.5);
        chart.multibar.hideable(true);
        chart.reduceXTicks(true).staggerLabels(true);
        chart.xAxis.showMaxMin(false)
            //.tickValues(tickMarks)
            .tickFormat(function(x){
                    return tickValues[x]
                }
            );
        chart.yAxis.tickFormat(d3.format(',.1f'));
        d3.select('#chart1 svg').datum(data).call(chart);
        nv.utils.windowResize(chart.update);
                    return chart;
    });

if i plot the graph using the above code, the graph is generating properly but the Custom Values for X axis are completely out of order. I want X to be printed where value in data array hss x = 0, Y for data array x = 1 and so on. But right now its coming randomly.

I tried passing the data as 

var data = [{ "key" : "Step 1", "values" : [{"y" : 5,"x" : "Z",},{"y" : 4,"x" : "Y",}, {"y" : 4,"x" : "X",}]

So that I can plot the desired value of each axis as mention in data, but it does not work. :(

Is there a better way to keep the values in sync ? Any help is highly appreciable.

Upvotes: 2

Views: 3349

Answers (1)

sean.boyer
sean.boyer

Reputation: 1237

Where you have key: Step 1, that represents the label for the Series (used in the tooltip typically).

As for the xAxis labels, they ARE in fact displaying correctly, as the xAxis label is the x data. If you take your example and change all the x : 0 to x : "Beer", you'll see what I mean.

Here's a jsFiddle showing the change to the x : 0 data: http://jsfiddle.net/essboyer/ZKqkJ/

Upvotes: 1

Related Questions