Forums

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

Page 1 of 1   [ 6 posts ]
New Topic | Post Reply | Print view

Robbie Allen

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

Labels on the x-axis for a Column Chart

Post 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
  • YUI Developer
  • Offline
  • Profile
Tags:

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

Post 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
  • Offline
  • Profile

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

Post 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
  • YUI Developer
  • Offline
  • Profile
Tags:

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

Post 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
  • Offline
  • Profile

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

Post 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
  • YUI Developer
  • Offline
  • Profile

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

Post 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
Display posts from previous:  Sort by  
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

Recent Forums Posts

Recent YUI Blog Posts

Online Users

No Users Online

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group