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

LinesCharts - Series color and markers

Expand Messages
  • kdaws_karl
    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
    Message 1 of 9 , Jan 2, 2008
    View Source
    • 0 Attachment
      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
    • 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 2 of 9 , Jan 2, 2008
      View Source
      • 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 3 of 9 , Jan 2, 2008
        View Source
        • 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 4 of 9 , Jan 2, 2008
          View Source
          • 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 5 of 9 , Jan 2, 2008
            View Source
            • 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 6 of 9 , Jan 2, 2008
              View Source
              • 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 7 of 9 , Jan 2, 2008
                View Source
                • 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 8 of 9 , Jan 2, 2008
                  View Source
                  • 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 9 of 9 , Jan 3, 2008
                    View Source
                    • 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.