[ 9 posts ]

Donald Regan

  • Username: chartsuser
  • Joined: Sun Jan 16, 2011 8:52 am
  • Posts: 3
  • Offline
  • Profile

Charts 3 - Legend Key

Post Posted: Sun Jan 16, 2011 9:15 am
+0-
Hi

Charts 3 looks great. seems nice and fast. Just what I have been needing.

But I can't find any examples of how to load up a legend / key as can be done in Chart YUI2. (Using styledef = legend: {Display right} or something along those lines)

Can someone please tell me how to do this?

Thanks

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: Charts 3 - Legend Key

Post Posted: Mon Jan 17, 2011 12:58 pm
+0-
YUI 3 Charts does not have a built-in legend yet. There is one planned though. The ticket is below:
http://yuilibrary.com/projects/yui3/ticket/2528814

Thanks,
Tripp

Donald Regan

  • Username: chartsuser
  • Joined: Sun Jan 16, 2011 8:52 am
  • Posts: 3
  • Offline
  • Profile
Tags:

Re: Charts 3 - Legend Key

Post Posted: Wed Jan 26, 2011 9:25 am
+0-
Sounds good. Looks like you're working hard Tripp.

I'm just trying to knock together a temporary html version of a Legend. Since I have the names of all my series in an array.
e.g. namesarray = ["UK", "US", "etc"]

var mystr
mystr = namesarray[0];
for (i=1; i<namesarray.length; i++){
//get colour for each Country
***
//add it to a html string
mystr = mystr+" "+namesarray[i];
}
document.getElementById("legendarea").innerHTML="<font color=black>"+mystr+"</font>";

For *** line, I'm trying to use something like:
seriesColor = mychart.getSeries("UK").get("styles.marker.fill.color")
so that I can set my font color to whatever.

I'm using a StackAreaChart, which I cannot seem to change the color as described in the example below for Column charts. I figured if I can "set" the color, I must also able to "get" the color too. So far I've managed neither in StackedAreaChart. Please help.

example: http://developer.yahoo.com/yui/3/exampl ... pdate.html

ps its looks like the properties of styles in my StackedAreaChart are 'padding' and 'area' rather than 'marker'

Cheers

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: Charts 3 - Legend Key

Post Posted: Wed Jan 26, 2011 11:23 am
+0-
Hi,
You are able to set able to set and get styles for the area chart as well. It just has different properties. (I did find a bug in which you can only get the style colors if you have explicitly set them.)

Below is how you could specify the fill colors for an area chart at instantiation:
Code:
var mychart = new Y.Chart({styles: {
    series: {
        expenses: {
            area: {
                color:"#f00"
            }
        },
        revenue: {
            area: {
                color:"#00f"
            }
        }
    }
},stacked:true, type:"area", dataProvider:myDataValues, render:"#mychart"});


Alternatively, you can set them later like this.
Code:
mychart.getSeries("revenue").set("styles", {
    area: {
        color: "#9aa"
    }
});


Below is how you can retrieve colors:
Code:
var revenueColor = mychart.getSeries("revenue").get("styles").area.color; //returns #9aa
var expensesColor = mychart.getSeries("expenses").get("styles").area.color; //returns #f00


I have created a ticket for the previously mentioned bug.
http://yuilibrary.com/projects/yui3/ticket/2529876

Thanks,
Tripp

Jeff Craig

YUI Contributor

  • Username: foxxtrot
  • Joined: Thu Dec 04, 2008 9:20 am
  • Posts: 135
  • Location: Pullman, WA
  • Twitter: foxxtrot
  • GitHub: foxxtrot
  • Gists: foxxtrot
  • IRC: foxxtrot
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: Charts 3 - Legend Key

Post Posted: Wed Jan 26, 2011 11:58 am
+0-
Tripp,

I created a single Legend plugin for this post. The code for it is currently just in-line, but I'll wrap it up in the Gallery, if you want to take a look at my implemetation.

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: Charts 3 - Legend Key

Post Posted: Wed Jan 26, 2011 12:06 pm
+0-
Very nice! That would be a great addition to the gallery.

Jeff Craig

YUI Contributor

  • Username: foxxtrot
  • Joined: Thu Dec 04, 2008 9:20 am
  • Posts: 135
  • Location: Pullman, WA
  • Twitter: foxxtrot
  • GitHub: foxxtrot
  • Gists: foxxtrot
  • IRC: foxxtrot
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: Charts 3 - Legend Key

Post Posted: Fri Jan 28, 2011 12:37 pm
+0-
I have added, and requested approval of, gallery-charts-legend. It is available on my github account.

I'm probably going to hold off on a CDN push until I get a few things cleaned up, but it's available for anyone who wants to use it.

Varun Jindal

  • Username: varunjindal09
  • Joined: Wed May 18, 2011 5:15 am
  • Posts: 2
  • Offline
  • Profile

Re: Charts 3 - Legend Key

Post Posted: Wed May 18, 2011 6:18 am
+0-
Hi Jeff,
Can you please share a link of pie chart legend plugin. I am new here, not able to find in your account.


Thanks,
Varun

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: Charts 3 - Legend Key

Post Posted: Wed May 18, 2011 7:39 am
+0-
Jeff's legend plugin can be found here:
http://yuilibrary.com/gallery/show/charts-legend

Tripp
  [ 9 posts ]
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