Forums

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

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

dusjj

  • Username: dusjj
  • Joined: Wed May 30, 2012 12:23 am
  • Posts: 7
  • Offline
  • Profile
Tags:

How to set bar width in ColumnChart? in YUI3 not v2.

Post Posted: Thu May 31, 2012 6:11 pm
+0-
Anybody could give me some clue, how to control the bar width in a column chart? I hope to set bar width thinner while the browser window size change smaller.

I've found this thread about this topic from :
viewtopic.php?p=7787

But Tripp's solution is in YUI2 but not YUI3.
Could Tripp or anyone else give more clue?
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: How to set bar width in ColumnChart? in YUI3 not v2.

Post Posted: Fri Jun 01, 2012 5:55 am
+0-
You can set the width of the columns in a chart by defining a seriesCollection and setting the styles.marker.width value. Below is a link to an example showing how to define seriesCollection in a chart.
http://yuilibrary.com/yui/docs/charts/charts-objectstyles.html

The example does not set the marker width but you can do so by creating a seriesCollection like the example below:
Code:
var seriesCollection = [
    {
        xKey: "date",
        yKey: "miscellaneous",
        type: "column",
        styles: {
            marker: {
                width: 4
            }
        }
    },
    {
        xKey: "date",
        yKey: "expenses",
        type: "column",
        styles: {
            marker: {
                width: 4
            }
        }
    },
    {
        xKey: "date",
        yKey: "revenue",
        type: "column",
        styles: {
            marker: {
                width: 4
            }
        }
    }
],
mychart = new Y.Chart({type:"column", render:"#mychart", categoryKey: "date", seriesCollection: seriesCollection, dataProvider:myDataValues});


Thanks,
Tripp

dusjj

  • Username: dusjj
  • Joined: Wed May 30, 2012 12:23 am
  • Posts: 7
  • Offline
  • Profile
Tags:

Re: How to set bar width in ColumnChart? in YUI3 not v2.

Post Posted: Sat Jun 02, 2012 7:24 am
+0-
Yes Tripp, that is what I expected.
But I still have some confusion about the "marker".
After changed code to:
Code:
{
   xKey: "date",
   yKey: "expenses",
   type: "column",
   styles: {
      marker: {
         width: 4
      },
      fill: {
         color: "#ff0000"
      },
   }
},

The color setting doesn't work and it must be like below, the color setting DOES work.
Code:
{
   xKey: "date",
   yKey: "expenses",
   type: "column",
   styles: {
      marker: {
         width: 4,
         fill: {
            color: "#ff0000"
         }
      }
   }
},


And in the example , I picked codes, it seems these two series has the same effection, but the codes are different.
Could you Tripp pls tell me something about the usage of "marker" ?
Thanks.

Code:
 {
            type:"column",
            xAxis:"dateRange",
            yAxis:"financials",
            xKey:"date",
            yKey:"miscellaneous",
            xDisplayName:"Date",
            yDisplayName:"Miscellaneous",
            styles: {
                border: {
                    weight: 1,
                    color: "#58006e"
                },
                over: {
                    fill: {
                        alpha: 0.7
                    }
                }
            }
        },
        {
            type:"column",
            xAxis:"dateRange",
            yAxis:"financials",
            xKey:"date",
            yKey:"expenses",
            yDisplayName:"Expenses",
            styles: {
                marker:{
                    fill: {
                        color: "#e0ddd0"
                    },
                    border: {
                        weight: 1,
                        color: "#cbc8ba"
                    },
                    over: {
                        fill: {
                            alpha: 0.7
                        }
                    }
                }
            }
        },

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: How to set bar width in ColumnChart? in YUI3 not v2.

Post Posted: Sat Jun 02, 2012 11:21 am
+0-
This is how the marker is styled: (across series types)
Code:
styles: {
  marker: {
    fill: {
      color: "#9aa"
    },
    border: {
      color: "#999",
      width: 1
    },
    height: 5, (ignored for column charts)
    width: 5  (ignored for bar charts)
  }
}


In the case of a histogram (column/bar), this will actually work.

Code:
  styles: {
    fill: {},
    border:{},
    width:val,
    height:val
  }


The second case will work because it the marker is the only stylable element of a column/bar series. The first method allows for more consistency in defining styles for different series types. The second is less verbose. This is a bug in the example. The example should not contain both approaches without explanation.

Thanks,
Tripp

dusjj

  • Username: dusjj
  • Joined: Wed May 30, 2012 12:23 am
  • Posts: 7
  • Offline
  • Profile
Tags:

Re: How to set bar width in ColumnChart? in YUI3 not v2.

Post Posted: Sun Jun 03, 2012 5:42 pm
+0-
Thank you Tripp for your detailed explanation.

Is my comprehension right? If the codes like Code 1:
Code:
styles: {
    fill: {xxx},
    border:{xxx},
    width:val,
    height:val
  }

Then the styles will try applied to all series types.
If the codes like Code 2:
Code:
styles: {
  marker: {
    fill: {xxx},
    border: {xxx},
    height: val,
    width: val
  }
}

Then the marker styles will applied to the specific series types.
Meanwhile,
1. Code 2 has the priority to Code 1.
2. Code 2 has support some parameters that Code 1 does not support.

I've learned many thing from Tripp, thank you Tripp again.
dusjj.
Page 1 of 1   [ 5 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

© 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