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

Re: [ydn-javascript] how to format data shown in Pie Chart

Expand Messages
  • 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 1 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.