Loading ...
Sorry, an error occurred while loading the content.

charts and minor units

Expand Messages
  • larhire
    Hello I ve actually managed to do quite a lot with yui charts, it is one of the most impressive tools in the yui package. I m now working on styling, and I am
    Message 1 of 6 , Oct 31, 2008
    • 0 Attachment
      Hello

      I've actually managed to do quite a lot with yui charts, it is one of
      the most impressive tools in the yui package. I'm now working on
      styling, and I am stumbling upon something though, maybe someone can
      help me.

      I have a chart like the one in the following picture:

      http://img247.imageshack.us/my.php?image=minorsj9.png

      The first problem is that the minor time units are not visible on the
      chart. The code I used is the following:

      var timeAxis = new YAHOO.widget.TimeAxis();
      timeAxis.labelFunction = dateFormatter;
      timeAxis.snapToUnits = true;
      timeAxis.majorTimeUnit = "hours";
      timeAxis.majorUnit = 1;
      timeAxis.minorTimeUnit = "minutes";
      timeAxis.minorUnit = 10;
      timeAxis.minimum = new Date(minimumDate.getTime() - 60 * 1000);
      timeAxis.maximum = new Date(maximumDate.getTime() + 60 * 1000 );

      So I should be getting minor units every 10 minutes on the chart -
      however, they are not displayed on the chart at all (I need the actual
      minute value at the bottom of the chart).

      The second problem would be with the minor units on the 0Y axis, they
      only show up as a very small line (at roughly x500, x from 0 to 5 in
      the picture) - it would be nice if there would be a dotted line of
      some sort showing up on the chart (would be easier to follow the minor
      units). I've looked into the js files but there does not seem to be a
      way to style the minor/major units so I'm just wondering if it is
      possible to do so.

      The code for the 0X axis is the following:

      var currencyAxis = new YAHOO.widget.NumericAxis();
      currencyAxis.stackingEnabled = true;
      currencyAxis.maximum = maxVal * 1.1;
      currencyAxis.majorUnit = parseInt (maxVal / 10);
      currencyAxis.minorUnit = parseInt (maxVal / 20);
      currencyAxis.labelFunction = numberFormatter;

      The third issue would be one of styling - I'd like the values on the
      0X axis to be "tilted" diagonally (about 45 degrees), so more would
      fit on the same chart. In the picture above, they are fully
      horizontal. Can this be done in the current API?

      Thanks!
      Laura
    • larhire
      I ve digged though the .as files in the distribution and have found some answers. For the first thing - I ve decided agains using minor grid units for now, but
      Message 2 of 6 , Oct 31, 2008
      • 0 Attachment
        I've digged though the .as files in the distribution and have found
        some answers.

        For the first thing - I've decided agains using minor grid units for
        now, but I added the tick marks for major grid units on the 0x axis
        like so:
        xAxis: {
        majorTicks: {display: "always"}
        }


        For the second problem (minor grid lines not showing up), I've styled
        the chart like so:

        yAxis: {
        minorGridLines: {
        color: 0xeeeeee,
        size: 1
        }
        }

        Still looking into tilting the 0x text.

        Thanks,
        Laura

        --- In ydn-javascript@yahoogroups.com, "larhire" <larhire@...> wrote:
        >
        > Hello
        >
        > I've actually managed to do quite a lot with yui charts, it is one of
        > the most impressive tools in the yui package. I'm now working on
        > styling, and I am stumbling upon something though, maybe someone can
        > help me.
        >
        > I have a chart like the one in the following picture:
        >
        > http://img247.imageshack.us/my.php?image=minorsj9.png
        >
        > The first problem is that the minor time units are not visible on the
        > chart. The code I used is the following:
        >
        > var timeAxis = new YAHOO.widget.TimeAxis();
        > timeAxis.labelFunction = dateFormatter;
        > timeAxis.snapToUnits = true;
        > timeAxis.majorTimeUnit = "hours";
        > timeAxis.majorUnit = 1;
        > timeAxis.minorTimeUnit = "minutes";
        > timeAxis.minorUnit = 10;
        > timeAxis.minimum = new Date(minimumDate.getTime() - 60 * 1000);
        > timeAxis.maximum = new Date(maximumDate.getTime() + 60 * 1000 );
        >
        > So I should be getting minor units every 10 minutes on the chart -
        > however, they are not displayed on the chart at all (I need the actual
        > minute value at the bottom of the chart).
        >
        > The second problem would be with the minor units on the 0Y axis, they
        > only show up as a very small line (at roughly x500, x from 0 to 5 in
        > the picture) - it would be nice if there would be a dotted line of
        > some sort showing up on the chart (would be easier to follow the minor
        > units). I've looked into the js files but there does not seem to be a
        > way to style the minor/major units so I'm just wondering if it is
        > possible to do so.
        >
        > The code for the 0X axis is the following:
        >
        > var currencyAxis = new YAHOO.widget.NumericAxis();
        > currencyAxis.stackingEnabled = true;
        > currencyAxis.maximum = maxVal * 1.1;
        > currencyAxis.majorUnit = parseInt (maxVal / 10);
        > currencyAxis.minorUnit = parseInt (maxVal / 20);
        > currencyAxis.labelFunction = numberFormatter;
        >
        > The third issue would be one of styling - I'd like the values on the
        > 0X axis to be "tilted" diagonally (about 45 degrees), so more would
        > fit on the same chart. In the picture above, they are fully
        > horizontal. Can this be done in the current API?
        >
        > Thanks!
        > Laura
        >
      • tripp.bridges
        Hi Laura, You are not able to rotate the text in YUI Charts. This is due to the fact that flash can only rotate embedded fonts. As for the gridlines and ticks,
        Message 3 of 6 , Oct 31, 2008
        • 0 Attachment
          Hi Laura,
          You are not able to rotate the text in YUI Charts. This is due to the
          fact that flash can only rotate embedded fonts. As for the gridlines
          and ticks, you should find all the documentation you need here:
          http://developer.yahoo.com/yui/charts/#basicstyles
          (although, It sounds like you already have those issues sorted)

          Thanks,
          Tripp

          --- In ydn-javascript@yahoogroups.com, "larhire" <larhire@...> wrote:
          >
          > I've digged though the .as files in the distribution and have found
          > some answers.
          >
          > For the first thing - I've decided agains using minor grid units for
          > now, but I added the tick marks for major grid units on the 0x axis
          > like so:
          > xAxis: {
          > majorTicks: {display: "always"}
          > }
          >
          >
          > For the second problem (minor grid lines not showing up), I've styled
          > the chart like so:
          >
          > yAxis: {
          > minorGridLines: {
          > color: 0xeeeeee,
          > size: 1
          > }
          > }
          >
          > Still looking into tilting the 0x text.
          >
          > Thanks,
          > Laura
          >
          > --- In ydn-javascript@yahoogroups.com, "larhire" <larhire@> wrote:
          > >
          > > Hello
          > >
          > > I've actually managed to do quite a lot with yui charts, it is one of
          > > the most impressive tools in the yui package. I'm now working on
          > > styling, and I am stumbling upon something though, maybe someone can
          > > help me.
          > >
          > > I have a chart like the one in the following picture:
          > >
          > > http://img247.imageshack.us/my.php?image=minorsj9.png
          > >
          > > The first problem is that the minor time units are not visible on the
          > > chart. The code I used is the following:
          > >
          > > var timeAxis = new YAHOO.widget.TimeAxis();
          > > timeAxis.labelFunction = dateFormatter;
          > > timeAxis.snapToUnits = true;
          > > timeAxis.majorTimeUnit = "hours";
          > > timeAxis.majorUnit = 1;
          > > timeAxis.minorTimeUnit = "minutes";
          > > timeAxis.minorUnit = 10;
          > > timeAxis.minimum = new Date(minimumDate.getTime() - 60 * 1000);
          > > timeAxis.maximum = new Date(maximumDate.getTime() + 60 * 1000 );
          > >
          > > So I should be getting minor units every 10 minutes on the chart -
          > > however, they are not displayed on the chart at all (I need the actual
          > > minute value at the bottom of the chart).
          > >
          > > The second problem would be with the minor units on the 0Y axis, they
          > > only show up as a very small line (at roughly x500, x from 0 to 5 in
          > > the picture) - it would be nice if there would be a dotted line of
          > > some sort showing up on the chart (would be easier to follow the minor
          > > units). I've looked into the js files but there does not seem to be a
          > > way to style the minor/major units so I'm just wondering if it is
          > > possible to do so.
          > >
          > > The code for the 0X axis is the following:
          > >
          > > var currencyAxis = new YAHOO.widget.NumericAxis();
          > > currencyAxis.stackingEnabled = true;
          > > currencyAxis.maximum = maxVal * 1.1;
          > > currencyAxis.majorUnit = parseInt (maxVal / 10);
          > > currencyAxis.minorUnit = parseInt (maxVal / 20);
          > > currencyAxis.labelFunction = numberFormatter;
          > >
          > > The third issue would be one of styling - I'd like the values on the
          > > 0X axis to be "tilted" diagonally (about 45 degrees), so more would
          > > fit on the same chart. In the picture above, they are fully
          > > horizontal. Can this be done in the current API?
          > >
          > > Thanks!
          > > Laura
          > >
          >
        • Laura Arhire
          Hi Tripp, Thanks for the reply. As I was looking through charts source code I saw there is code there to make chart labels rotate (heavily commented with the
          Message 4 of 6 , Nov 2, 2008
          • 0 Attachment
            Hi Tripp,

            Thanks for the reply. As I was looking through charts source code I saw there is code there to make chart labels rotate (heavily commented with the embed fonts option). Am I correct in guessing this functionality will be added in a future release of yui ?

            Thanks again,
            Laura

            On Fri, Oct 31, 2008 at 6:43 PM, tripp.bridges <trippb@...> wrote:

            Hi Laura,
            You are not able to rotate the text in YUI Charts. This is due to the
            fact that flash can only rotate embedded fonts. As for the gridlines
            and ticks, you should find all the documentation you need here:
            http://developer.yahoo.com/yui/charts/#basicstyles
            (although, It sounds like you already have those issues sorted)

            Thanks,
            Tripp



            --- In ydn-javascript@yahoogroups.com, "larhire" <larhire@...> wrote:
            >
            > I've digged though the .as files in the distribution and have found
            > some answers.
            >
            > For the first thing - I've decided agains using minor grid units for
            > now, but I added the tick marks for major grid units on the 0x axis
            > like so:
            > xAxis: {
            > majorTicks: {display: "always"}
            > }
            >
            >
            > For the second problem (minor grid lines not showing up), I've styled
            > the chart like so:
            >
            > yAxis: {
            > minorGridLines: {
            > color: 0xeeeeee,
            > size: 1
            > }
            > }
            >
            > Still looking into tilting the 0x text.
            >
            > Thanks,
            > Laura
            >
            > --- In ydn-javascript@yahoogroups.com, "larhire" <larhire@> wrote:
            > >
            > > Hello
            > >
            > > I've actually managed to do quite a lot with yui charts, it is one of
            > > the most impressive tools in the yui package. I'm now working on
            > > styling, and I am stumbling upon something though, maybe someone can
            > > help me.
            > >
            > > I have a chart like the one in the following picture:
            > >
            > > http://img247.imageshack.us/my.php?image=minorsj9.png
            > >
            > > The first problem is that the minor time units are not visible on the
            > > chart. The code I used is the following:
            > >
            > > var timeAxis = new YAHOO.widget.TimeAxis();
            > > timeAxis.labelFunction = dateFormatter;
            > > timeAxis.snapToUnits = true;
            > > timeAxis.majorTimeUnit = "hours";
            > > timeAxis.majorUnit = 1;
            > > timeAxis.minorTimeUnit = "minutes";
            > > timeAxis.minorUnit = 10;
            > > timeAxis.minimum = new Date(minimumDate.getTime() - 60 * 1000);
            > > timeAxis.maximum = new Date(maximumDate.getTime() + 60 * 1000 );
            > >
            > > So I should be getting minor units every 10 minutes on the chart -
            > > however, they are not displayed on the chart at all (I need the actual
            > > minute value at the bottom of the chart).
            > >
            > > The second problem would be with the minor units on the 0Y axis, they
            > > only show up as a very small line (at roughly x500, x from 0 to 5 in
            > > the picture) - it would be nice if there would be a dotted line of
            > > some sort showing up on the chart (would be easier to follow the minor
            > > units). I've looked into the js files but there does not seem to be a
            > > way to style the minor/major units so I'm just wondering if it is
            > > possible to do so.
            > >
            > > The code for the 0X axis is the following:
            > >
            > > var currencyAxis = new YAHOO.widget.NumericAxis();
            > > currencyAxis.stackingEnabled = true;
            > > currencyAxis.maximum = maxVal * 1.1;
            > > currencyAxis.majorUnit = parseInt (maxVal / 10);
            > > currencyAxis.minorUnit = parseInt (maxVal / 20);
            > > currencyAxis.labelFunction = numberFormatter;
            > >
            > > The third issue would be one of styling - I'd like the values on the
            > > 0X axis to be "tilted" diagonally (about 45 degrees), so more would
            > > fit on the same chart. In the picture above, they are fully
            > > horizontal. Can this be done in the current API?
            > >
            > > Thanks!
            > > Laura
            > >
            >


          • tripp.bridges
            Hi Laura The YUI Charts SWF uses the same source files as the ASTRA Charts component for flash developers. http://developer.yahoo.com/flash/astra-flash/charts/
            Message 5 of 6 , Nov 2, 2008
            • 0 Attachment
              Hi Laura
              The YUI Charts SWF uses the same source files as the ASTRA Charts
              component for flash developers.
              http://developer.yahoo.com/flash/astra-flash/charts/ Since ASTRA
              components are used in applications compiled by the developer, the
              developer has the option of embedding a font in their application and
              using this functionality. In short, this code exists for the ASTRA
              component and not its YUI counterpart.

              I will, however, log this as a feature request for the YUI Chart
              component as flash player 10 supports more robust handling of device
              fonts. This would have to be in a future release and it would only
              work for end-users who have flash player 10.

              Thanks,
              Tripp
              --- In ydn-javascript@yahoogroups.com, "Laura Arhire" <larhire@...> wrote:
              >
              > Hi Tripp,
              >
              > Thanks for the reply. As I was looking through charts source code I saw
              > there is code there to make chart labels rotate (heavily commented
              with the
              > embed fonts option). Am I correct in guessing this functionality will be
              > added in a future release of yui ?
              >
              > Thanks again,
              > Laura
              >
              > On Fri, Oct 31, 2008 at 6:43 PM, tripp.bridges <trippb@...> wrote:
              >
              > > Hi Laura,
              > > You are not able to rotate the text in YUI Charts. This is due to the
              > > fact that flash can only rotate embedded fonts. As for the gridlines
              > > and ticks, you should find all the documentation you need here:
              > > http://developer.yahoo.com/yui/charts/#basicstyles
              > > (although, It sounds like you already have those issues sorted)
              > >
              > > Thanks,
              > > Tripp
              > >
              > >
              > > --- In ydn-javascript@yahoogroups.com
              <ydn-javascript%40yahoogroups.com>,
              > > "larhire" <larhire@> wrote:
              > > >
              > > > I've digged though the .as files in the distribution and have found
              > > > some answers.
              > > >
              > > > For the first thing - I've decided agains using minor grid units for
              > > > now, but I added the tick marks for major grid units on the 0x axis
              > > > like so:
              > > > xAxis: {
              > > > majorTicks: {display: "always"}
              > > > }
              > > >
              > > >
              > > > For the second problem (minor grid lines not showing up), I've
              styled
              > > > the chart like so:
              > > >
              > > > yAxis: {
              > > > minorGridLines: {
              > > > color: 0xeeeeee,
              > > > size: 1
              > > > }
              > > > }
              > > >
              > > > Still looking into tilting the 0x text.
              > > >
              > > > Thanks,
              > > > Laura
              > > >
              > > > --- In ydn-javascript@yahoogroups.com
              <ydn-javascript%40yahoogroups.com>,
              > > "larhire" <larhire@> wrote:
              > > > >
              > > > > Hello
              > > > >
              > > > > I've actually managed to do quite a lot with yui charts, it is
              one of
              > > > > the most impressive tools in the yui package. I'm now working on
              > > > > styling, and I am stumbling upon something though, maybe
              someone can
              > > > > help me.
              > > > >
              > > > > I have a chart like the one in the following picture:
              > > > >
              > > > > http://img247.imageshack.us/my.php?image=minorsj9.png
              > > > >
              > > > > The first problem is that the minor time units are not visible
              on the
              > > > > chart. The code I used is the following:
              > > > >
              > > > > var timeAxis = new YAHOO.widget.TimeAxis();
              > > > > timeAxis.labelFunction = dateFormatter;
              > > > > timeAxis.snapToUnits = true;
              > > > > timeAxis.majorTimeUnit = "hours";
              > > > > timeAxis.majorUnit = 1;
              > > > > timeAxis.minorTimeUnit = "minutes";
              > > > > timeAxis.minorUnit = 10;
              > > > > timeAxis.minimum = new Date(minimumDate.getTime() - 60 * 1000);
              > > > > timeAxis.maximum = new Date(maximumDate.getTime() + 60 * 1000 );
              > > > >
              > > > > So I should be getting minor units every 10 minutes on the chart -
              > > > > however, they are not displayed on the chart at all (I need
              the actual
              > > > > minute value at the bottom of the chart).
              > > > >
              > > > > The second problem would be with the minor units on the 0Y
              axis, they
              > > > > only show up as a very small line (at roughly x500, x from 0
              to 5 in
              > > > > the picture) - it would be nice if there would be a dotted line of
              > > > > some sort showing up on the chart (would be easier to follow
              the minor
              > > > > units). I've looked into the js files but there does not seem
              to be a
              > > > > way to style the minor/major units so I'm just wondering if it is
              > > > > possible to do so.
              > > > >
              > > > > The code for the 0X axis is the following:
              > > > >
              > > > > var currencyAxis = new YAHOO.widget.NumericAxis();
              > > > > currencyAxis.stackingEnabled = true;
              > > > > currencyAxis.maximum = maxVal * 1.1;
              > > > > currencyAxis.majorUnit = parseInt (maxVal / 10);
              > > > > currencyAxis.minorUnit = parseInt (maxVal / 20);
              > > > > currencyAxis.labelFunction = numberFormatter;
              > > > >
              > > > > The third issue would be one of styling - I'd like the values
              on the
              > > > > 0X axis to be "tilted" diagonally (about 45 degrees), so more
              would
              > > > > fit on the same chart. In the picture above, they are fully
              > > > > horizontal. Can this be done in the current API?
              > > > >
              > > > > Thanks!
              > > > > Laura
              > > > >
              > > >
              > >
              > >
              > >
              >
            • Laura Arhire
              Hi Tripp, I understand now, this is good to know. It would bring a nice flavor to the charts if it will make it into a release. Thanks again for the great work
              Message 6 of 6 , Nov 2, 2008
              • 0 Attachment
                Hi Tripp,

                I understand now, this is good to know. It would bring a nice flavor to the charts if it will make it into a release.

                Thanks again for the great work with the charts (and the really swift replies!), it is truly great stuff! It has saved me a ton of work - and they have a very nice feel to them. Great job!

                Laura

                On Sun, Nov 2, 2008 at 7:59 PM, tripp.bridges <trippb@...> wrote:

                Hi Laura
                The YUI Charts SWF uses the same source files as the ASTRA Charts
                component for flash developers.
                http://developer.yahoo.com/flash/astra-flash/charts/ Since ASTRA
                components are used in applications compiled by the developer, the
                developer has the option of embedding a font in their application and
                using this functionality. In short, this code exists for the ASTRA
                component and not its YUI counterpart.

                I will, however, log this as a feature request for the YUI Chart
                component as flash player 10 supports more robust handling of device
                fonts. This would have to be in a future release and it would only
                work for end-users who have flash player 10.

                Thanks,
                Tripp

                --- In ydn-javascript@yahoogroups.com, "Laura Arhire" <larhire@...> wrote:
                >
                > Hi Tripp,
                >
                > Thanks for the reply. As I was looking through charts source code I saw
                > there is code there to make chart labels rotate (heavily commented
                with the
                > embed fonts option). Am I correct in guessing this functionality will be
                > added in a future release of yui ?
                >
                > Thanks again,
                > Laura
                >
                > On Fri, Oct 31, 2008 at 6:43 PM, tripp.bridges <trippb@...> wrote:
                >
                > > Hi Laura,
                > > You are not able to rotate the text in YUI Charts. This is due to the
                > > fact that flash can only rotate embedded fonts. As for the gridlines
                > > and ticks, you should find all the documentation you need here:
                > > http://developer.yahoo.com/yui/charts/#basicstyles
                > > (although, It sounds like you already have those issues sorted)
                > >
                > > Thanks,
                > > Tripp
                > >
                > >
                > > --- In ydn-javascript@yahoogroups.com
                <ydn-javascript%40yahoogroups.com>,

                > > "larhire" <larhire@> wrote:
                > > >
                > > > I've digged though the .as files in the distribution and have found
                > > > some answers.
                > > >
                > > > For the first thing - I've decided agains using minor grid units for
                > > > now, but I added the tick marks for major grid units on the 0x axis
                > > > like so:
                > > > xAxis: {
                > > > majorTicks: {display: "always"}
                > > > }
                > > >
                > > >
                > > > For the second problem (minor grid lines not showing up), I've
                styled
                > > > the chart like so:
                > > >
                > > > yAxis: {
                > > > minorGridLines: {
                > > > color: 0xeeeeee,
                > > > size: 1
                > > > }
                > > > }
                > > >
                > > > Still looking into tilting the 0x text.
                > > >
                > > > Thanks,
                > > > Laura
                > > >
                > > > --- In ydn-javascript@yahoogroups.com
                <ydn-javascript%40yahoogroups.com>,

                > > "larhire" <larhire@> wrote:
                > > > >
                > > > > Hello
                > > > >
                > > > > I've actually managed to do quite a lot with yui charts, it is
                one of
                > > > > the most impressive tools in the yui package. I'm now working on
                > > > > styling, and I am stumbling upon something though, maybe
                someone can
                > > > > help me.
                > > > >
                > > > > I have a chart like the one in the following picture:
                > > > >
                > > > > http://img247.imageshack.us/my.php?image=minorsj9.png
                > > > >
                > > > > The first problem is that the minor time units are not visible
                on the
                > > > > chart. The code I used is the following:
                > > > >
                > > > > var timeAxis = new YAHOO.widget.TimeAxis();
                > > > > timeAxis.labelFunction = dateFormatter;
                > > > > timeAxis.snapToUnits = true;
                > > > > timeAxis.majorTimeUnit = "hours";
                > > > > timeAxis.majorUnit = 1;
                > > > > timeAxis.minorTimeUnit = "minutes";
                > > > > timeAxis.minorUnit = 10;
                > > > > timeAxis.minimum = new Date(minimumDate.getTime() - 60 * 1000);
                > > > > timeAxis.maximum = new Date(maximumDate.getTime() + 60 * 1000 );
                > > > >
                > > > > So I should be getting minor units every 10 minutes on the chart -
                > > > > however, they are not displayed on the chart at all (I need
                the actual
                > > > > minute value at the bottom of the chart).
                > > > >
                > > > > The second problem would be with the minor units on the 0Y
                axis, they
                > > > > only show up as a very small line (at roughly x500, x from 0
                to 5 in
                > > > > the picture) - it would be nice if there would be a dotted line of
                > > > > some sort showing up on the chart (would be easier to follow
                the minor
                > > > > units). I've looked into the js files but there does not seem
                to be a
                > > > > way to style the minor/major units so I'm just wondering if it is
                > > > > possible to do so.
                > > > >
                > > > > The code for the 0X axis is the following:
                > > > >
                > > > > var currencyAxis = new YAHOO.widget.NumericAxis();
                > > > > currencyAxis.stackingEnabled = true;
                > > > > currencyAxis.maximum = maxVal * 1.1;
                > > > > currencyAxis.majorUnit = parseInt (maxVal / 10);
                > > > > currencyAxis.minorUnit = parseInt (maxVal / 20);
                > > > > currencyAxis.labelFunction = numberFormatter;
                > > > >
                > > > > The third issue would be one of styling - I'd like the values
                on the
                > > > > 0X axis to be "tilted" diagonally (about 45 degrees), so more
                would
                > > > > fit on the same chart. In the picture above, they are fully
                > > > > horizontal. Can this be done in the current API?
                > > > >
                > > > > Thanks!
                > > > > Laura
                > > > >
                > > >
                > >
                > >
                > >
                >


              Your message has been successfully submitted and would be delivered to recipients shortly.