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

how to format data shown in Pie Chart

Expand Messages
  • aniljavali
    I know the following way to format data in bar chart //used to format x axis YAHOO.example.formatNumber = function( value ) { return
    Message 1 of 4 , Jan 14, 2009
    • 0 Attachment
      I know the following way to format data in bar chart

      //used to format x axis
      YAHOO.example.formatNumber = function( value ) {
      return YAHOO.util.Number.format(Number(value),
      {prefix: "", thousandsSeparator: ",", decimalPlaces: 2 });
      }

      //Numeric Axis for our currency
      var numericAxis = new YAHOO.widget.NumericAxis();
      numericAxis.stackingEnabled = true;
      numericAxis.labelFunction = YAHOO.example.formatNumber;

      var mychart = new YAHOO.widget.StackedBarChart( $('chart'), chartData,
      {
      series: seriesDef,
      yField: formatedData.data.HeaderNames.category,
      xAxis: numericAxis
      }

      BUT WAS WONDERING, HOW TO APPLY FORMATING TO PIE CHART DATA.

      Any help/advice is appreciated.

      thanks
    • tripp.bridges
      Hi, The data displayed on mouseover can be formatted through the dataTip function. Below is an example of how to use the data tip function with one of our
      Message 2 of 4 , Jan 14, 2009
      • 0 Attachment
        Hi,
        The data displayed on mouseover can be formatted through the dataTip
        function. Below is an example of how to use the data tip function with
        one of our existing examples on:
        http://developer.yahoo.com/yui/examples/charts/charts-legend_clean.html

        //code below
        //--- data tip function

        YAHOO.example.dataTipFunction = function( item, index, series )
        {
        var toolTipText;
        if(item.response == "Undecided")
        {
        toolTipText = item.count + " people are " + item.response + " about
        their favorite season.";
        }
        else
        {
        toolTipText = item.count + " people prefer " + item.response + "
        over the other seasons.";
        }
        return toolTipText;
        }

        //--- chart

        var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
        {
        dataTipFunction: YAHOO.example.dataTipFunction,
        dataField: "count",
        categoryField: "response",
        style:
        {
        padding: 20,
        legend:
        {
        display: "right",
        padding: 10,
        spacing: 5,
        font:
        {
        family: "Arial",
        size: 13
        }
        }
        },
        //only needed for flash player express install
        expressInstall: "assets/expressinstall.swf"
        });

        //end code

        Thanks,
        Tripp

        --- In ydn-javascript@yahoogroups.com, "aniljavali" <aniljavali@...>
        wrote:
        >
        > I know the following way to format data in bar chart
        >
        > //used to format x axis
        > YAHOO.example.formatNumber = function( value ) {
        > return YAHOO.util.Number.format(Number(value),
        > {prefix: "", thousandsSeparator: ",", decimalPlaces: 2 });
        > }
        >
        > //Numeric Axis for our currency
        > var numericAxis = new YAHOO.widget.NumericAxis();
        > numericAxis.stackingEnabled = true;
        > numericAxis.labelFunction = YAHOO.example.formatNumber;
        >
        > var mychart = new YAHOO.widget.StackedBarChart( $('chart'), chartData,
        > {
        > series: seriesDef,
        > yField: formatedData.data.HeaderNames.category,
        > xAxis: numericAxis
        > }
        >
        > BUT WAS WONDERING, HOW TO APPLY FORMATING TO PIE CHART DATA.
        >
        > Any help/advice is appreciated.
        >
        > thanks
        >
      • aniljavali
        this solves issue of formatting number, but adds another one which is I WANT TO KEEP THE PERCENTAGE VALUE (Ex. 33%) SHOWN IN DEFAULT TOOL TIP. guys any idea ?
        Message 3 of 4 , Jan 14, 2009
        • 0 Attachment
          this solves issue of formatting number, but adds another one which is

          I WANT TO KEEP THE PERCENTAGE VALUE (Ex. 33%) SHOWN IN DEFAULT TOOL
          TIP.

          guys any idea ?

          thanks

          --- In ydn-javascript@yahoogroups.com, "tripp.bridges" <trippb@...>
          wrote:
          >
          > Hi,
          > The data displayed on mouseover can be formatted through the dataTip
          > function. Below is an example of how to use the data tip function
          with
          > one of our existing examples on:
          > http://developer.yahoo.com/yui/examples/charts/charts-
          legend_clean.html
          >
          > //code below
          > //--- data tip function
          >
          > YAHOO.example.dataTipFunction = function( item, index, series )
          > {
          > var toolTipText;
          > if(item.response == "Undecided")
          > {
          > toolTipText = item.count + " people are " +
          item.response + " about
          > their favorite season.";
          > }
          > else
          > {
          > toolTipText = item.count + " people prefer " +
          item.response + "
          > over the other seasons.";
          > }
          > return toolTipText;
          > }
          >
          > //--- chart
          >
          > var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
          > {
          > dataTipFunction: YAHOO.example.dataTipFunction,
          > dataField: "count",
          > categoryField: "response",
          > style:
          > {
          > padding: 20,
          > legend:
          > {
          > display: "right",
          > padding: 10,
          > spacing: 5,
          > font:
          > {
          > family: "Arial",
          > size: 13
          > }
          > }
          > },
          > //only needed for flash player express install
          > expressInstall: "assets/expressinstall.swf"
          > });
          >
          > //end code
          >
          > Thanks,
          > Tripp
          >
          > --- In ydn-javascript@yahoogroups.com, "aniljavali" <aniljavali@>
          > wrote:
          > >
          > > I know the following way to format data in bar chart
          > >
          > > //used to format x axis
          > > YAHOO.example.formatNumber = function( value ) {
          > > return YAHOO.util.Number.format(Number(value),
          > > {prefix: "", thousandsSeparator: ",", decimalPlaces: 2 });
          > > }
          > >
          > > //Numeric Axis for our currency
          > > var numericAxis = new YAHOO.widget.NumericAxis();
          > > numericAxis.stackingEnabled = true;
          > > numericAxis.labelFunction = YAHOO.example.formatNumber;
          > >
          > > var mychart = new YAHOO.widget.StackedBarChart( $('chart'),
          chartData,
          > > {
          > > series: seriesDef,
          > > yField: formatedData.data.HeaderNames.category,
          > > xAxis: numericAxis
          > > }
          > >
          > > BUT WAS WONDERING, HOW TO APPLY FORMATING TO PIE CHART DATA.
          > >
          > > Any help/advice is appreciated.
          > >
          > > thanks
          > >
          >
        • morekaos
          I don t know if there is a specific variable in YUI Charts that accesses the %, however this is how I did it. This should give you an idea, I took out other
          Message 4 of 4 , Oct 25, 2009
          • 0 Attachment
            I don't know if there is a specific variable in YUI Charts that accesses the
            %, however this is how I did it. This should give you an idea, I took out
            other code that wasn't relevant so I am not sure if this would work if you
            cut and pasted it. In general, you add another field to your array
            information that holds a pre-calculated percentage total. You send this
            field with the relevant information used to make the pie chart to the tool
            tip formatter. After a little formatting manipulation with
            YAHOO.util.Number.format to set the number of decimal places, it's good to
            go. I would imagine that you could use this technique to send any other form
            of information that you might want in the tooltip.

            YAHOO.example.dtTipFunction = function( item, index, series ){
            var tamt = YAHOO.util.Number.format( item.count,{prefix:
            "$",thousandsSeparator: ",",decimalPlaces: 2});
            var tperc = YAHOO.util.Number.format( item.perc,{decimalPlaces: 1});
            var toolTipText = item.response + ": " + tamt + "\n" + tperc + "%";
            return toolTipText;
            }


            var show = function (cash, receivables, payables, inventory) {
            var cashperc = (cash/total)*100;
            var recperc = (receivables/total)*100;
            var payperc = (payables/total)*100;
            var invperc = (inventory/total)*100;


            var piedata = [{ "response": "Cash", "count": cash, "perc": cashperc },
            { "response": "Receivables", "count": receivables, "perc": recperc },{
            "response": "Payables", "count": payables, "perc": payperc },{ "response":
            "Inventory", "count": inventory, "perc": invperc }];
            var pieData = new YAHOO.util.DataSource(piedata);
            pieData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
            pieData.responseSchema = { fields: [ "response", "count", "perc" ] };
            var mychart = new YAHOO.widget.PieChart( "piechart",
            pieData,{dataTipFunction: YAHOO.example.dtTipFunction, dataField:
            "count",categoryField: "response",style:{padding: 20,legend:{display:
            "right",padding: 10,spacing: 5,font:{family: "Arial",size: 13}}}});

            }
            };







            aniljavali wrote:
            >
            > this solves issue of formatting number, but adds another one which is
            >
            > I WANT TO KEEP THE PERCENTAGE VALUE (Ex. 33%) SHOWN IN DEFAULT TOOL
            > TIP.
            >
            > guys any idea ?
            >
            > thanks
            >
            > --- In ydn-javascript@yahoogroups.com, "tripp.bridges" <trippb@...>
            > wrote:
            >>
            >> Hi,
            >> The data displayed on mouseover can be formatted through the dataTip
            >> function. Below is an example of how to use the data tip function
            > with
            >> one of our existing examples on:
            >> http://developer.yahoo.com/yui/examples/charts/charts-
            > legend_clean.html
            >>
            >> //code below
            >> //--- data tip function
            >>
            >> YAHOO.example.dataTipFunction = function( item, index, series )
            >> {
            >> var toolTipText;
            >> if(item.response == "Undecided")
            >> {
            >> toolTipText = item.count + " people are " +
            > item.response + " about
            >> their favorite season.";
            >> }
            >> else
            >> {
            >> toolTipText = item.count + " people prefer " +
            > item.response + "
            >> over the other seasons.";
            >> }
            >> return toolTipText;
            >> }
            >>
            >> //--- chart
            >>
            >> var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
            >> {
            >> dataTipFunction: YAHOO.example.dataTipFunction,
            >> dataField: "count",
            >> categoryField: "response",
            >> style:
            >> {
            >> padding: 20,
            >> legend:
            >> {
            >> display: "right",
            >> padding: 10,
            >> spacing: 5,
            >> font:
            >> {
            >> family: "Arial",
            >> size: 13
            >> }
            >> }
            >> },
            >> //only needed for flash player express install
            >> expressInstall: "assets/expressinstall.swf"
            >> });
            >>
            >> //end code
            >>
            >> Thanks,
            >> Tripp
            >>
            >> --- In ydn-javascript@yahoogroups.com, "aniljavali" <aniljavali@>
            >> wrote:
            >> >
            >> > I know the following way to format data in bar chart
            >> >
            >> > //used to format x axis
            >> > YAHOO.example.formatNumber = function( value ) {
            >> > return YAHOO.util.Number.format(Number(value),
            >> > {prefix: "", thousandsSeparator: ",", decimalPlaces: 2 });
            >> > }
            >> >
            >> > //Numeric Axis for our currency
            >> > var numericAxis = new YAHOO.widget.NumericAxis();
            >> > numericAxis.stackingEnabled = true;
            >> > numericAxis.labelFunction = YAHOO.example.formatNumber;
            >> >
            >> > var mychart = new YAHOO.widget.StackedBarChart( $('chart'),
            > chartData,
            >> > {
            >> > series: seriesDef,
            >> > yField: formatedData.data.HeaderNames.category,
            >> > xAxis: numericAxis
            >> > }
            >> >
            >> > BUT WAS WONDERING, HOW TO APPLY FORMATING TO PIE CHART DATA.
            >> >
            >> > Any help/advice is appreciated.
            >> >
            >> > thanks
            >> >
            >>
            >
            >
            >
            >
            >

            --
            View this message in context: http://www.nabble.com/how-to-format-data-shown-in-Pie-Chart-tp21460021p26014134.html
            Sent from the ydn-javascript mailing list archive at Nabble.com.
          Your message has been successfully submitted and would be delivered to recipients shortly.