Forums

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

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

Dragomir Enachi

  • Username: Loter
  • Joined: Thu Jul 12, 2012 5:02 am
  • Posts: 3
  • Offline
  • Profile

YUI 3 chart question

Post Posted: Thu Jul 12, 2012 5:04 am
+0-
YUI 3 chart question:

I'm trying to change the chart line thickness... is it possible with YUI3 ? Already tried everything. Please help!!!

Marco Asbreuk

YUI Contributor

  • Username: itsasbreuk
  • Joined: Mon Nov 16, 2009 5:14 am
  • Posts: 459
  • Location: Netherlands
  • Twitter: itsasbreuk
  • GitHub: ItsAsbreuk
  • Gists: ItsAsbreuk
  • IRC: Marco Asbreuk
  • Offline
  • Profile
Tags:

Re: YUI 3 chart question

Post Posted: Fri Jul 13, 2012 8:09 am
+0-
Hey Dragomir,

I've not used Charts yet, but according the API, this should work:
Code:
var myserie = mychart.getSeries("whateverYourSerie");
myserie.set('styles.weight', 1); // default to 6


Kind Regards,
Marco.

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: YUI 3 chart question

Post Posted: Mon Jul 16, 2012 9:14 am
+0-
You will need to use styles.line.weight.
Code:
    myseries.set("styles.line.weight", 1);


Also, you can set the styles when instantiating the chart using the seriesCollection attribute. Below is an example.
Code:
var myDataValues = [
    {category:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
    {category:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100},
    {category:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500},
    {category:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800},
    {category:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
    {category:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200}
],
mychart = new Y.Chart({
          dataProvider:myDataValues,
          render:"#mychart",
          seriesCollection: [
         {
             xKey: "category",
             yKey: "miscellaneous",
             styles: {
            line: {
                weight: 1
            }
             }
         },
         {
             xKey: "category",
             yKey: "expenses",
             styles: {
            line: {
                weight: 1
            }
             }
         },
         {
             xKey: "category",
             yKey: "revenue",
             styles: {
            line: {
                weight: 1
            }
             }
         }
          ]
      });
 


Thanks,
Tripp

Dragomir Enachi

  • Username: Loter
  • Joined: Thu Jul 12, 2012 5:02 am
  • Posts: 3
  • Offline
  • Profile

Re: YUI 3 chart question

Post Posted: Tue Jul 17, 2012 10:29 pm
+0-
Don't get it how to fit it in my code..

I have the following:

// Create a new YUI instance and populate it with the required modules.
YUI().use('charts', function (Y) {
var myDataValues = [{Data:"01/06", Value:326.39},{Data:"08/06", Value:326.39},{Data:"15/06", Value:326.39},{Data:"22/06", Value:326.39},{Data:"29/06", Value:326.39},{Data:"06/07", Value:326.39}];
var styleDef = {
graph:{
background:{
fill:{
color:"#EEEEEE"
}
}
},
series:{
Value: {
marker: {
fill: {
color: "#dddddd",
},
border: {
color: "#cccccc",

},
over: {
fill: {
color: "#bbbbbb"
},
border: {
color: "#aaaaaa"
}
}
},
line: {
color: "#cccccc",

}
}
},
};
// Instantiate and render the chart
var mychart_cnpf = new Y.Chart({
dataProvider: myDataValues,
render: "#chart_cnpf",
categoryKey:"Data",
styles : styleDef,
categoryValue:"Value"
});
var leftAxis = mychart_cnpf.getAxisByKey("values");
leftAxis.set("minimum", 76);
leftAxis.set("maximum", 576);
});

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: YUI 3 chart question

Post Posted: Wed Jul 18, 2012 2:47 pm
+0-
You just need to add the weight property to you style definitions line object. Below is an updated style definition:
Code:
var styleDef = {
    graph:{
        background:{
            fill:{
                color:"#EEEEEE"
            }
        }
    },
    series:{
        Value: {
            marker: {
                fill: {
                    color: "#dddddd"
                },
                border: {
                    color: "#cccccc"
                },
                over: {
                    fill: {
                        color: "#bbbbbb"
                    },
                    border: {
                        color: "#aaaaaa"
                    }
                }
            },
            line: {
                color: "#cccccc",
                weight: 1
            }
        }
    }
};


Thanks,
Tripp

Dragomir Enachi

  • Username: Loter
  • Joined: Thu Jul 12, 2012 5:02 am
  • Posts: 3
  • Offline
  • Profile

Re: YUI 3 chart question

Post Posted: Wed Jul 18, 2012 10:47 pm
+0-
Thank you so much!!!
Strange that it was not working before cause I tried all the possibilities :)
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