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

RE: [ydn-javascript] LinesCharts - Series color and markers

Expand Messages
  • Josh Tynjala
    Karl, you need to set the style as part of the series definition: var seriesDef = [ { displayName: Rent , yField: rent , style: { color: 0xff0000, size: 20 }
    Message 1 of 9 , Jan 2, 2008
    • 0 Attachment

      Karl, you need to set the style as part of the series definition:

       

      var seriesDef = 
      [
          {
              displayName: "Rent",
              yField: "rent",
              style:
              {
                  color: 0xff0000,
                  size: 20
              }
          },
          {
              displayName: "Utilities",
              yField: "utilities",
              style:
              {
                  color: 0x0000ff,
                  size: 30
              }
          }
      ];

       

      I’ll be pushing an updated YUI Charts page to YDN soon. It will include more detailed information about styling series.

       

      Josh Tynjala

      Yahoo! Flash Platform

       


      From: ydn-javascript@yahoogroups.com [mailto: ydn-javascript@yahoogroups.com ] On Behalf Of kdaws_karl
      Sent: Wednesday, January 02, 2008 9:45 AM
      To: ydn-javascript@yahoogroups.com
      Subject: [ydn-javascript] LinesCharts - Series color and markers

       

      Hi,

      Can't for the life of me, even after looking at all the API docs etc.
      work out how to change the series colors and marker sizes - tried all
      different ways of setting the style etc. but it has no effect, any
      help is much appreciated.

      Thanks,

      Karl

    • kdaws_karl
      ... Hi, Thanks for the reply, but that s one of the methods that I tried and it appears to have no effect at all. In my test I ve told it the color should be
      Message 2 of 9 , Jan 2, 2008
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "Josh Tynjala" <jtynjala@...>
        wrote:
        >
        > Karl, you need to set the style as part of the series definition:
        >
        > var seriesDef =
        > [
        > {
        > displayName: "Rent",
        > yField: "rent",
        > style:
        > {
        > color: 0xff0000,
        > size: 20
        > }
        > },
        > {
        > displayName: "Utilities",
        > yField: "utilities",
        > style:
        > {
        > color: 0x0000ff,
        > size: 30
        > }
        > }
        > ];

        Hi,

        Thanks for the reply, but that's one of the methods that I tried and
        it appears to have no effect at all. In my test I've told it the color
        should be 0x00ff00 so I'd notice if it had changed anything, but it
        hasn't :(

        Thanks,

        Karl
      • Josh Tynjala
        And you re passing in the series definition with the series attribute on the chart? Example: var mychart = new YAHOO.widget.ColumnChart( chart , salesData,
        Message 3 of 9 , Jan 2, 2008
        • 0 Attachment

          And you’re passing in the series definition with the “series” attribute on the chart?

           

          Example:

           

                  var mychart = new YAHOO.widget.ColumnChart( "chart", salesData,
                  {
                         series: seriesDef, // <- series definition
                         xField: "month"
                  });

           

           

          You should see in the skinning example that setting the color works.

           

          http://developer.yahoo.com/yui/examples/charts/charts-skins.html

           

          The example code at the bottom of that page doesn’t include the colors (I’ll be sure to update it), but if you look at the page source, you can see the series definition I used for that particular example:

           

                  var seriesDef =
                  [
                         {
                                 yField: "pork",
                                 displayName: "Sales of Pork",
                                 style:
                                 {
                                         image: "assets/tube.png",
                                         mode: "no-repeat",
                                         color: 0x2e434d,
                                         size: 40
                                 }
                         },
                         {
                                 yField: "beef",
                                 displayName: "Sales of Beef",
                                 style:
                                 {
                                         image: "assets/tube.png",
                                         mode: "no-repeat",
                                         color: 0xc2d81e,
                                         size: 40
                                 }
                         }
                  ];

           

          Josh Tynjala

          Yahoo! Flash Platform


          From: ydn-javascript@yahoogroups.com [mailto: ydn-javascript@yahoogroups.com ] On Behalf Of kdaws_karl
          Sent: Wednesday, January 02, 2008 10:30 AM
          To: ydn-javascript@yahoogroups.com
          Subject: [ydn-javascript] Re: LinesCharts - Series color and markers

           

          --- In ydn-javascript@ yahoogroups. com, "Josh Tynjala" <jtynjala@.. .>
          wrote:

          >
          > Karl, you need to set the style as part of the series definition:
          >
          > var seriesDef =
          > [
          > {
          > displayName: "Rent",
          > yField: "rent",
          > style:
          > {
          > color: 0xff0000,
          > size: 20
          > }
          > },
          > {
          > displayName: "Utilities",
          > yField: "utilities",
          > style:
          > {
          > color: 0x0000ff,
          > size: 30
          > }
          > }
          > ];

          Hi,

          Thanks for the reply, but that's one of the methods that I tried and
          it appears to have no effect at all. In my test I've told it the color
          should be 0x00ff00 so I'd notice if it had changed anything, but it
          hasn't :(

          Thanks,

          Karl

        • kdaws_karl
          Yep, both my series are drawing, just in the default colours, I ve probably got a really obvious typo somewhere, but I can t spot it:
          Message 4 of 9 , Jan 2, 2008
          • 0 Attachment
            Yep, both my series are drawing, just in the default colours, I've
            probably got a really obvious typo somewhere, but I can't spot it:
            http://karlaustin.com/test/chart.html

            Thanks
          • Josh Tynjala
            Karl, I added an empty style object to the second series, and it started working for me. Definitely a bug. var yData = [ { displayName: Bits In , yField:
            Message 5 of 9 , Jan 2, 2008
            • 0 Attachment

              Karl, I added an empty style object to the second series, and it started working for me. Definitely a bug.

               

                    var yData =

                    [

                      {

                          displayName: "Bits In",

                          yField: "bin",

                          style:

                          {

                            size: 20,

                            color: 0x00ff00

                          }

                      },

                      {

                          displayName: "Bits Out",

                          yField: "out",

                          style: {}

                      }

                    ];

               

              Josh Tynjala

              Yahoo! Flash Platform

               


              From: ydn-javascript@yahoogroups.com [mailto: ydn-javascript@yahoogroups.com ] On Behalf Of kdaws_karl
              Sent: Wednesday, January 02, 2008 11:38 AM
              To: ydn-javascript@yahoogroups.com
              Subject: [ydn-javascript] Re: LinesCharts - Series color and markers

               

              Yep, both my series are drawing, just in the default colours, I've
              probably got a really obvious typo somewhere, but I can't spot it:
              http://karlaustin. com/test/ chart.html

              Thanks

            • kdaws_karl
              ... and the worst thing? I want to style the other series anyway. Cheers very much for your help. Look forward to future improvements on the charts, would be
              Message 6 of 9 , Jan 2, 2008
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, "Josh Tynjala" <jtynjala@...>
                wrote:
                >
                > Karl, I added an empty style object to the second series, and it started
                > working for me. Definitely a bug.

                and the worst thing? I want to style the other series anyway. Cheers
                very much for your help. Look forward to future improvements on the
                charts, would be nice to be able to combine lines with bars, or to
                have the option of shading the area under the line.
              • Josh Tynjala
                You can build a combination chart with one series displaying lines and another with bars right now: See this example for implementation details:
                Message 7 of 9 , Jan 2, 2008
                • 0 Attachment

                  You can build a combination chart with one series displaying lines and another with bars right now:

                   

                  See this example for implementation details:

                   

                  http://developer.yahoo.com/yui/examples/charts/charts-datatable.html

                   

                  I will file a feature request for shading under a line (also known as an area chart).

                   

                  Josh Tynjala

                  Yahoo! Flash Platform

                   


                  From: ydn-javascript@yahoogroups.com [mailto: ydn-javascript@yahoogroups.com ] On Behalf Of kdaws_karl
                  Sent: Wednesday, January 02, 2008 12:23 PM
                  To: ydn-javascript@yahoogroups.com
                  Subject: [ydn-javascript] Re: LinesCharts - Series color and markers

                   

                  --- In ydn-javascript@ yahoogroups. com, "Josh Tynjala" <jtynjala@.. .>
                  wrote:

                  >
                  > Karl, I added an empty style object to the second series, and it started
                  > working for me. Definitely a bug.

                  and the worst thing? I want to style the other series anyway. Cheers
                  very much for your help. Look forward to future improvements on the
                  charts, would be nice to be able to combine lines with bars, or to
                  have the option of shading the area under the line.

                • kdaws_karl
                  ... Thanks, will take a look at that. What would also be really handy, is to be able to draw arbitrary lines on the plot, straight across i.e. @2000 on the Y,
                  Message 8 of 9 , Jan 3, 2008
                  • 0 Attachment
                    --- In ydn-javascript@yahoogroups.com, "Josh Tynjala" <jtynjala@...>
                    wrote:
                    >
                    > You can build a combination chart with one series displaying lines and
                    > another with bars right now:
                    >
                    > See this example for implementation details:
                    >
                    > http://developer.yahoo.com/yui/examples/charts/charts-datatable.html
                    >
                    > I will file a feature request for shading under a line (also known as an
                    > area chart).
                    >
                    > Josh Tynjala
                    >
                    > Yahoo! Flash Platform

                    Thanks, will take a look at that. What would also be really handy, is
                    to be able to draw arbitrary lines on the plot, straight across i.e.
                    @2000 on the Y, draw a Red line, across the width, @1500 draw a yellow
                    line all the way. At the moment as far as I can see, I'd have to add
                    another item to the series, for each X value - which seems rather
                    wasteful of resources, especially as I'm going to be plotting a
                    minimum of 288 points and have 2 real series and 4 fixed lines.

                    Thanks,

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