Sunday, August 10, 2014

Adding String values to nvd3 line chart x axis values

If you're familier with nvd3 line charts you may experienced that adding a string values as x axis values may be little bit messy.
Here is the solution.
first you need to specify the xAxis tickformat function.


chart.xAxis
.axisLabel('Date')
.tickFormat(function(d) {
 var label = scope.totalLoanAmountData[0].values[d].label;
 return label;
});
here I'm using "label" attribute to display strings in the chart x axis.
And then add your data values with label attribute as follows.

scope.totalLoanAmountData=[{
                        "key": "name of line one",
                        "values":[
                {x:1,y:2, label:"label1"},
                {x:1,y:2, label:"label2"},
                {x:1,y:2, label:"label3"},
                {x:1,y:2, label:"label4"},
                {x:1,y:5, label:"label5"},
                {x:1,y:2, label:"label6"},
                {x:1,y:7, label:"label7"},
                {x:1,y:2, label:"label8"},
                {x:1,y:8, label:"label9"}]

                           },

                      {"key": "name of line two",
                        "values": [

                {x:1,y:8, label:"label1"},
                {x:1,y:2, label:"label2"},
                {x:1,y:2, label:"label3"},
                {x:1,y:6, label:"label4"},
                {x:1,y:5, label:"label5"},
                {x:1,y:2, label:"label6"},
                {x:1,y:8, label:"label7"},
                {x:1,y:2, label:"label8"},
                {x:1,y:2, label:"label9"}]

                      }];
You can use date, name, number or whatever string you want.

1 comment: