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

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

Page 1 of 1

[ 5 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

dusjj

Username: dusjj
Joined: Wed May 30, 2012 12:23 am
Posts: 7

Tags:

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

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: 440
GitHub: tripp
Gists: tripp

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

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

Tags:

yui3 marker chart width

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

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: 440
GitHub: tripp
Gists: tripp

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

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

Tags:

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

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

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