Labels on the x-axis for a Column Chart

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 6 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Robbie Allen

Username: RobbieStats
Joined: Sat Jul 14, 2012 5:28 pm
Posts: 5

Labels on the x-axis for a Column Chart

Posted: Sun Jul 15, 2012 2:39 am

+0-

I have a single set of bars on a column chart that looks like this:
http://imgur.com/F2IG5

I want to show the name of each individual player on the x-axis under each bar instead of showing the category name (e.g. "Players"). I've tried a bunch of different ways and can't get it to work. Any ideas?

Tripp Bridges

YUI Developer

Username: tripp
Joined: Wed Jan 07, 2009 1:54 pm
Posts: 435
GitHub: tripp
Gists: tripp

Tags:

array

Re: Labels on the x-axis for a Column Chart

Posted: Mon Jul 16, 2012 9:26 am

+0-

You could try include all players as its own category in a single series. You can still get different colored bars by setting an array of colors for the markers. I am not sure of the structure of you dataProvider but something like the below code may work for you.

Code:

var dataProvider = [
  {player: "Player1", value: 444},
  {player: "Player2", value: 333},
  ...
],
mychart = new Y.Chart({
  type: "column",
  seriesCollection: [
    xKey: "player",
    yKey: "value",
    styles: [
      marker: {
   fill: {
     color: ["#fco", "#9aa", ...]
   }
      }
    ]
  ],
  render: "#mychart"
});

Thanks,
Tripp

Robbie Allen

Username: RobbieStats
Joined: Sat Jul 14, 2012 5:28 pm
Posts: 5

Re: Labels on the x-axis for a Column Chart

Posted: Tue Jul 31, 2012 4:32 pm

+0-

I got this working with 3.5.1: http://jsfiddle.net/ptvkm/

HOWEVER, I need this to run with 3.4.1 and the same code breaks: http://jsfiddle.net/VNz2W/

Any ideas?

Tripp Bridges

YUI Developer

Username: tripp
Joined: Wed Jan 07, 2009 1:54 pm
Posts: 435
GitHub: tripp
Gists: tripp

Tags:

Re: Labels on the x-axis for a Column Chart

Posted: Wed Aug 01, 2012 2:38 pm

+0-

Here's a gist to a patch I made for this bug before the 3.5 release.
https://gist.github.com/1299428

Add this code at the start of your yui code block and you should get the correct results in 3.4.1.

Code:

YUI().use('charts', function(Y) {
    //patch code goes here

    //you code goes here
});

Thanks,
Tripp

Robbie Allen

Username: RobbieStats
Joined: Sat Jul 14, 2012 5:28 pm
Posts: 5

Re: Labels on the x-axis for a Column Chart

Posted: Wed Aug 01, 2012 4:20 pm

+0-

Awesome. Thanks Tripp!

Are there any issues if I put that code in a function and call it like this:

http://jsfiddle.net/VNz2W/3/

Tripp Bridges

YUI Developer

Username: tripp
Joined: Wed Jan 07, 2009 1:54 pm
Posts: 435
GitHub: tripp
Gists: tripp

Re: Labels on the x-axis for a Column Chart

Posted: Wed Aug 01, 2012 4:55 pm

+0-

That should be fine.

Tripp

Page 1 of 1

[ 6 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum