Forums

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

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

Antoine

  • Username: Grinn
  • Joined: Tue May 22, 2012 7:03 am
  • Posts: 17
  • GitHub: Grinn
  • Gists: Grinn
  • Offline
  • Profile
Tags:

YUI 3.0.0 Charts : How to modify values of the value axis

Post Posted: Tue May 22, 2012 7:24 am
+0-
Hi,

I am new to YUI3 and I'm trying to build my first chart.
Here is the problem that i'm facing :


I have to build a chart that is showing a time in "hh:mm" for different dates.
In order for YUI to classify my time in "hh:mm" I converted hours and minutes, to only minutes.

The graph is fonctionnal, but on the left axis I would like to re-convert in "hh:mm" the minutes that are there, to make it look as I would like to.

Here is where I am giving the information to YUI3 :
Code:
function fnHandler(e) {
                         var myseries = [{
                                             styles: {
                                                 line: {
                                                     weight: 1
                                                 }
                                             }
                                        }];
                                  
                         mychart = new Y.Chart({dataProvider:records, render:"#systemStatisticsGraphContainer",seriesCollection: myseries, categoryKey:"date", categoryType:"time", showMarkers : 0});
                                        
                        }
 


"records" contains the times in minutes, and the dates.

Thank you

Tripp Bridges

YUI Developer

  • Username: tripp
  • Joined: Wed Jan 07, 2009 1:54 pm
  • Posts: 440
  • GitHub: tripp
  • Gists: tripp
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: YUI 3.0.0 Charts : How to modify values of the value axi

Post Posted: Tue May 22, 2012 10:45 pm
+0-
If you use a TimeAxis for your category axis, it will handle valid date objects. You can customize the display of your axis labels with the labelFormat and labelFunction attributes.
Something like this should work.
Code:
mychart = new Y.Chart({
  dataProvider:records,    
  render:"#systemStatisticsGraphContainer",
  seriesCollection: myseries,
  categoryKey:"date",
  categoryType:"time",
  axes: {
    category:{
   keys:["date"],
   position:"bottom",
   type:"time",
   labelFormat: "%I:%M"
    }
  },
  showMarkers : 0
});


Also, if you have a choice, I would recomend using the latest version of charts (3.5.1) instead of 3.3.0. If you run into any issues, post back with a link and I'll be happy to help sort.

Thanks,
Tripp

Antoine

  • Username: Grinn
  • Joined: Tue May 22, 2012 7:03 am
  • Posts: 17
  • GitHub: Grinn
  • Gists: Grinn
  • Offline
  • Profile
Tags:

Re: YUI 3.0.0 Charts : How to modify values of the value axi

Post Posted: Wed May 23, 2012 12:35 am
+0-
Thank you very much Tripp!

I probably badly express myself though.
I don't need to change the date format on the "category" axis.
I need to modify the "values" axis.

My left axis ("values" axis) is an 'int'.
This 'int' represents a length in minutes, that are raw data.
So my graph is good, but I would like my axis to display the left axis after a kind of conversion:

For exemple, a point on my graph would be : for the 09/01/2010 the 'value' '480'.
And I would like YUI to show : for the 09/01/2010 the 'value' '08 : 00' [8 hours]

So i would need to show a String on my 'value' axis.
Is that possible?

Tripp Bridges

YUI Developer

  • Username: tripp
  • Joined: Wed Jan 07, 2009 1:54 pm
  • Posts: 440
  • GitHub: tripp
  • Gists: tripp
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: YUI 3.0.0 Charts : How to modify values of the value axi

Post Posted: Wed May 23, 2012 7:00 am
+0-
In that case, you'll need to use the labelFunction attribute instead. Something like the below should work. You can add whatever algorithm you need to format your labels.
Code:
  axes: {
    values:{
        keys:[ YOUR KEYS HERE ],
        position:"left",
        type:"numeric",
        labelFunction: function(val, format)
        {
            return (val/60 + ":00");
        }
    }
  }


Thanks,
Tripp

Antoine

  • Username: Grinn
  • Joined: Tue May 22, 2012 7:03 am
  • Posts: 17
  • GitHub: Grinn
  • Gists: Grinn
  • Offline
  • Profile
Tags:

Re: YUI 3.0.0 Charts : How to modify values of the value axi

Post Posted: Thu May 24, 2012 1:01 am
+0-
Wahou! Thank you, it works great!

I am now strugeling with markers...

Here is the code I have right now :



Code:
 mychart = new Y.Chart({dataProvider:records,
                    render:"#systemStatisticsGraphContainerTwelveMonth",
                    styles: {
                        axes: {
                           date: {
                              label: {
                                 rotation: -45
                              },
                             marker: {
                                   width: 1,
                                   height: 1
                                }
                           }
                        }
                    },               
                    seriesCollection: myseries,
                    axes: {
                         values:{
                             keys:["time"],
                             position:"left",
                             type:"numeric",
                             labelFunction: function(val, format)
                             {
                                var minutes = val%60;
                                var hours = (val - minutes) /60
                                
                                 return (""+hours + ":" + minutes);
                             }
                         }
                       },
                    showMarkers : 1});    
                 } 



No errors are detected, but the marker still have their normal size.
I would like to make this size as small as possible.

Thank you

Tripp Bridges

YUI Developer

  • Username: tripp
  • Joined: Wed Jan 07, 2009 1:54 pm
  • Posts: 440
  • GitHub: tripp
  • Gists: tripp
  • YUI Developer
  • Offline
  • Profile

Re: YUI 3.0.0 Charts : How to modify values of the value axi

Post Posted: Thu May 24, 2012 7:17 am
+0-
The markers are a part of a series. You can style them through your seriesCollection.
Code:
var myseries = [{
  styles: {
    line: {
      weight: 1
    },
    marker: {
      width: 1,
      height: 1
    }
  }
}];


Thanks,
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

© 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