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

how to change colors or put image in PIE chart.

Expand Messages
  • Suresh Nagar
    i am new to the library and creating a pie chart, but i am unable to change colors of the slices of the pie chart or put image in them. bar chart i could do
    Message 1 of 6 , Mar 30, 2009
    • 0 Attachment
      i am new to the library and creating a pie chart, but i am unable to change colors of the slices of the pie chart or put image in them.
      bar chart i could do but pie chart is always displaying dull blue colors..
    • tripp.bridges
      Hi, You can change the pie colors using the series style colors . http://developer.yahoo.com/yui/charts/#seriesstyles A series block with a colors array would
      Message 2 of 6 , Mar 31, 2009
      • 0 Attachment
        Hi,
        You can change the pie colors using the series style "colors".
        http://developer.yahoo.com/yui/charts/#seriesstyles

        A series block with a colors array would look like this:

        series:
        [
        {
        style:
        {
        colors:[0xff0000, 0x0000ff, 0xdddddd, 0x00ccff]
        }
        }
        ]

        You can add your series as one of your configuration parameters when you instantiate your chart.

        var mychart = new YAHOO.widget.PieChart( "chart", myData,
        {
        dataField: "count",
        categoryField: "response",
        series:
        [
        {
        style:
        {
        colors:[0xff0000, 0x0000ff, 0xdddddd, 0x00ccff]
        }
        }
        ]
        });

        Regards,
        Tripp

        --- In ydn-javascript@yahoogroups.com, "Suresh Nagar" <nagar_jmu@...> wrote:
        >
        > i am new to the library and creating a pie chart, but i am unable to change colors of the slices of the pie chart or put image in them.
        > bar chart i could do but pie chart is always displaying dull blue colors..
        >
      • jrbramble
        http://www.ancestry.com/advertising/default.aspx I used the pie chart awhile back and used images in them. You can see how I did them on the above URL. It
        Message 3 of 6 , Mar 31, 2009
        • 0 Attachment
          http://www.ancestry.com/advertising/default.aspx

          I used the pie chart awhile back and used images in them. You can see how I did them on the above URL. It took me a few days to figure it out because the YUI doesn't give you an example on adding images on the pie chart.

          --- In ydn-javascript@yahoogroups.com, "Suresh Nagar" <nagar_jmu@...> wrote:
          >
          > i am new to the library and creating a pie chart, but i am unable to change colors of the slices of the pie chart or put image in them.
          > bar chart i could do but pie chart is always displaying dull blue colors..
          >
        • stepheneighmey@ymail.com
          excellent... how would this series color information be inserted into this code... var mychart = new YAHOO.widget.PieChart( chart , opinionData, { dataField:
          Message 4 of 6 , Mar 31, 2009
          • 0 Attachment
            excellent... how would this series color information be inserted into this code...

            var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
            {
            dataField: "count",
            categoryField: "label",
            style:
            {
            legend:
            {
            display: "right",
            font:
            {
            family: "Arial",
            size: 12,
            wmode: "opaque"
            }
            }
            },
            expressInstall: "assets/expressinstall.swf"
            });
          • tripp.bridges
            For images: (assuming you have your images in the same directory as your application) var mychart = new YAHOO.widget.PieChart( chart , opinionData, {
            Message 5 of 6 , Mar 31, 2009
            • 0 Attachment
              For images: (assuming you have your images in the same directory as your application)

              var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
              {
              dataField: "count",
              categoryField: "label",
              style:
              {
              legend:
              {
              display: "right",
              font:
              {
              family: "Arial",
              size: 12,
              wmode: "opaque"
              }
              }
              },
              expressInstall: "assets/expressinstall.swf",
              series:
              [
              {
              style:
              {
              mode:"stretch",
              images:["pink.gif", "blue.gif", "red.gif", "green.gif", "grey.gif"]
              }
              }
              ]

              });


              For colors:

              var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
              {
              dataField: "count",
              categoryField: "label",
              style:
              {
              legend:
              {
              display: "right",
              font:
              {
              family: "Arial",
              size: 12,
              wmode: "opaque"
              }
              }
              },
              expressInstall: "assets/expressinstall.swf",
              series:
              [
              {
              style:
              {
              colors:[0xff0000, 0x0000ff, 0xdddddd, 0x00ccff]
              }
              }
              ]

              });

              For images, there is an extra style "mode" (documented here: http://developer.yahoo.com/yui/charts/#seriesstyles) which indicates how you want the image to display.

              Thanks,
              Tripp
              --- In ydn-javascript@yahoogroups.com, "stepheneighmey@..." <stepheneighmey@...> wrote:
              >
              > excellent... how would this series color information be inserted into this code...
              >
              > var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
              > {
              > dataField: "count",
              > categoryField: "label",
              > style:
              > {
              > legend:
              > {
              > display: "right",
              > font:
              > {
              > family: "Arial",
              > size: 12,
              > wmode: "opaque"
              > }
              > }
              > },
              > expressInstall: "assets/expressinstall.swf"
              > });
              >
            • stephen eighmey
              Great information. Thank you very much. 2009/3/31 tripp.bridges
              Message 6 of 6 , Mar 31, 2009
              • 0 Attachment
                Great information.  Thank you very much.

                2009/3/31 tripp.bridges <trippb@...>

                For images: (assuming you have your images in the same directory as your application)



                var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
                {
                dataField: "count",
                categoryField: "label",
                style:
                {
                legend:
                {
                display: "right",
                font:
                {
                family: "Arial",
                size: 12,
                wmode: "opaque"
                }
                }
                },
                expressInstall: "assets/expressinstall.swf",
                series:
                [
                {
                style:
                {
                mode:"stretch",
                images:["pink.gif", "blue.gif", "red.gif", "green.gif", "grey.gif"]
                }
                }
                ]

                });

                For colors:


                var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
                {
                dataField: "count",
                categoryField: "label",
                style:
                {
                legend:
                {
                display: "right",
                font:
                {
                family: "Arial",
                size: 12,
                wmode: "opaque"
                }
                }
                },
                expressInstall: "assets/expressinstall.swf",

                series:
                [
                {
                style:
                {
                colors:[0xff0000, 0x0000ff, 0xdddddd, 0x00ccff]
                }
                }
                ]

                });

                For images, there is an extra style "mode" (documented here: http://developer.yahoo.com/yui/charts/#seriesstyles) which indicates how you want the image to display.

                Thanks,
                Tripp

                --- In ydn-javascript@yahoogroups.com, "stepheneighmey@..." <stepheneighmey@...> wrote:
                >
                > excellent... how would this series color information be inserted into this code...
                >
                > var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
                > {
                > dataField: "count",
                > categoryField: "label",
                > style:
                > {
                > legend:
                > {
                > display: "right",
                > font:
                > {
                > family: "Arial",
                > size: 12,
                > wmode: "opaque"
                > }
                > }
                > },
                > expressInstall: "assets/expressinstall.swf"
                > });
                >


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