Question

I want to create a graph where values in x axis are strings instead of integers. Currently what I have looks something like this :

  10  |
   8  |
   4  |
   0  |__________
         1   3   5

and I want to make it like this :

  10  |
   8  |
   4  |
   0  |____________________________
         January   February   March

I am using NVD3 charts. Any help would be appreciated.

I will be passing data but currently I put it manually.

function profiles() {
    var profiles = [];

    profiles.push({x:1,y:5});
    profiles.push({x:2,y:3});
    profiles.push({x:3,y:9});
    profiles.push({x:4,y:6});
    profiles.push({x:5,y:6});
    profiles.push({x:6,y:8});
    profiles.push({x:7,y:4});
    profiles.push({x:8,y:7});
    profiles.push({x:9,y:5});
    profiles.push({x:10,y:8});
    profiles.push({x:11,y:6});
    profiles.push({x:12,y:12});


    return [{
      values: profiles,
      key: "Profiles",
      color: "#ff7f0e"
    }];
}

Instead of x:1 I want x:January for example.

Was it helpful?

Solution

I would base my anser by directing you to this page http://nvd3.org/ghpages/discreteBar.html . This appears to allow you to create labels and values in the array you pass in. If the number is coming from somewhere else you could create an array of month names and then access them using the value of the month - 1 (january is 0 as an array is zero based) so...

var months=["January","February","March","April","May","June","July","August","September","October","November","December"];

then

profiles.push({"label": months[0] , "value":5 }); // jan
profiles.push({"label": months[1] , "value":3 }); // feb
etc...

I think this should point you in the correct direction and get the charts to display strings.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top