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

Re: Chart refresh...

Expand Messages
  • tripp.bridges
    Ok, this looks like it is related to an existing bug with the pie chart in which an empty series definition will cause the chart to ignore styles. It has been
    Message 1 of 7 , Jul 31, 2008
      Ok, this looks like it is related to an existing bug with the pie
      chart in which an empty series definition will cause the chart to
      ignore styles. It has been fixed for our next release but you should
      be able to hack it by setting a series def with an empty style object
      before you set your dataSource.

      mychart._seriesDefs = [{style:{}}];
      mychart.set("dataSource", pieDS);

      Thanks,
      Tripp

      --- In ydn-javascript@yahoogroups.com, "santini.alberto"
      <albertosantini@...> wrote:
      >

      > Hello Tripp.
      >
      > --- In ydn-javascript@yahoogroups.com, "tripp.bridges" <trippb@>
      > wrote:
      > > If that does not work, send me a link or the source to your code so
      > > that I can inspect further.
      >
      > I added a complete test case below. It reproduces exactly what I
      > described in my post.
      > The datasource is initialized with [], then, when you push the button,
      > the legend is rendered but no the pie.
      >
      > Thanks in advance,
      > Alberto
      >
      > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > "http://www.w3.org/TR/html4/strict.dtd">
      > <html>
      > <head>
      > <meta http-equiv="content-type" content="text/html; charset=utf-8">
      > <title>Chart with Legend Example</title>
      >
      > <style type="text/css">
      > /*margin and padding on body element
      > can introduce errors in determining
      > element position and are not recommended;
      > we turn them off as a foundation for YUI
      > CSS treatments. */
      > body {
      > margin:0;
      > padding:0;
      > }
      > </style>
      >
      > <link rel="stylesheet" type="text/css"
      > href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.5.2/build/utilities/utilities.js"></scri\
      > pt>
      > <script type="text/javascript"
      > src="http://yui.yahooapis.com/2.5.2/build/json/json-min.js"></script>
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script\
      > >
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min\
      > .js"></script>
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.5.2/build/charts/charts-experimental-min\
      > .js"></script>
      >
      >
      > <!--begin custom header content for this example-->
      > <style type="text/css">
      > #chart
      > {
      > float: left;
      > width: 450px;
      > height: 300px;
      > }
      >
      > .chart_title
      > {
      > display: block;
      > font-size: 1.2em;
      > font-weight: bold;
      > margin-bottom: 0.4em;
      > }
      > </style>
      > <!--end custom header content for this example-->
      >
      > </head>
      >
      > <body class=" yui-skin-sam">
      >
      > <h1>Chart with Legend Example</h1>
      >
      > <div class="exampleIntro">
      > </div>
      >
      > <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
      >
      > <span class="chart_title">Portfolio</span>
      > <div id="chart">Unable to load Flash content. The YUI Charts Control
      > requires Flash Player 9.0.45 or higher. You can install the latest
      > version at the <a href="http://www.adobe.com/go/getflashplayer">Adobe
      > Flash Player Download Center</a>.</p></div>
      > <button id="changeData" type="button">Change Data</button>
      >
      > <script type="text/javascript">
      >
      > YAHOO.widget.Chart.SWFURL =
      > "http://yui.yahooapis.com/2.5.2/build//charts/assets/charts.swf";
      >
      > //--- data
      >
      > var pieData =
      > [
      > { asset: "F.MI", weigth: 0.175 },
      > { asset: "ENG.MI", weigth: 0.025 },
      > { asset: "TIS.MI", weigth: 0.80 }
      > ]
      >
      > var pieDS = new YAHOO.util.DataSource([]);
      > pieDS.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
      > pieDS.responseSchema = { fields: [ "asset", "weigth" ] };
      >
      > //--- chart
      >
      > var mychart = new YAHOO.widget.PieChart( "chart", pieDS,
      > {
      > dataField: "weigth",
      > categoryField: "asset",
      > 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"
      > });
      >
      > var button_changeData = new YAHOO.widget.Button("changeData");
      >
      > YAHOO.util.Event.addListener("changeData", "click", function () {
      > pieData[1].weigth = 0.075; // ENG.MI 2.5% -> 7.5%
      > pieData[2].weigth = 0.75; // TIS.MI 80% -> 75%
      > pieDS.liveData = pieData;
      > mychart.set("dataSource", pieDS);
      > }, this, true);
      >
      >
      > </script>
      > <!--END SOURCE CODE FOR EXAMPLE =============================== -->
      >
      > </body>
      > </html>
      >
    • santini.alberto
      ... It works fine. Thanks a lot, Alberto Santini
      Message 2 of 7 , Jul 31, 2008
        --- In ydn-javascript@yahoogroups.com, "tripp.bridges" <trippb@...> wrote:
        > ...
        > mychart._seriesDefs = [{style:{}}];
        > mychart.set("dataSource", pieDS);
        >

        It works fine.

        Thanks a lot,
        Alberto Santini
      • santini.alberto
        ... Hello. It seems I found another issue. The first time the pie is rendered fine, but if I push the button Change Data , the pie is rendered with a red
        Message 3 of 7 , Aug 4, 2008
          --- In ydn-javascript@yahoogroups.com, "tripp.bridges" <trippb@...> wrote:
          >
          > Ok, this looks like it is related to an existing bug with the pie
          > chart in which an empty series definition will cause the chart to
          > ignore styles. It has been fixed for our next release but you should
          > be able to hack it by setting a series def with an empty style object
          > before you set your dataSource.
          >
          > mychart._seriesDefs = [{style:{}}];
          > mychart.set("dataSource", pieDS);
          >
          > Thanks,
          > Tripp

          Hello.

          It seems I found another issue. The first time the pie is rendered
          fine, but if I push the button "Change Data", the pie is rendered with
          a red sector and it is not coherent with the data.

          Am i missing something?

          Thanks in advance,
          Alberto

          <script type="text/javascript">

          YAHOO.widget.Chart.SWFURL =
          "http://yui.yahooapis.com/2.5.2/build//charts/assets/charts.swf";

          //--- data

          var w =
          [
          { asset: "P1", weigth: 0.10000000000000002 },
          { asset: "P2", weigth: 0.304853201708779 },
          { asset: "P3", weigth: 0.03887074865824967 },
          { asset: "P4", weigth: 0.08907124456880741 },
          { asset: "P5", weigth: 0.038472078322830935 },
          { asset: "P6", weigth: 0.23249229758823953 },
          { asset: "P7", weigth: 0.09624042915309339 },
          { asset: "P8", weigth: 0.1 }
          ]
          var w2 =
          [
          { asset: "P1", weigth: 0.10000000000000002 },
          { asset: "P2", weigth: 0.304853201708779 },
          { asset: "P3", weigth: 0.03887074865824967 },
          { asset: "P4", weigth: 0.08907124456880741 }
          ]

          var pieDS = new YAHOO.util.DataSource([]);
          pieDS.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
          pieDS.responseSchema = { fields: [ "asset", "weigth" ] };

          //--- chart

          var mychart = new YAHOO.widget.PieChart( "chart", pieDS,
          {
          dataField: "weigth",
          categoryField: "asset",
          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"
          });

          var button_changeData = new YAHOO.widget.Button("changeData");

          YAHOO.util.Event.addListener("changeData", "click", function () {
          if (Math.random() <= 0.5) {
          pieDS.liveData = w;
          } else {
          pieDS.liveData = w2;
          }
          mychart._seriesDefs = [{style: {}}];
          mychart.set('dataSource', pieDS);
          }, this, true);

          </script>
        • tripp.bridges
          Hi, You are correct. The hack will not work with your scenario. Tripp
          Message 4 of 7 , Aug 4, 2008
            Hi,
            You are correct. The hack will not work with your scenario.

            Tripp
            --- In ydn-javascript@yahoogroups.com, "santini.alberto"
            <albertosantini@...> wrote:
            >
            > --- In ydn-javascript@yahoogroups.com, "tripp.bridges" <trippb@> wrote:
            > >
            > > Ok, this looks like it is related to an existing bug with the pie
            > > chart in which an empty series definition will cause the chart to
            > > ignore styles. It has been fixed for our next release but you should
            > > be able to hack it by setting a series def with an empty style object
            > > before you set your dataSource.
            > >
            > > mychart._seriesDefs = [{style:{}}];
            > > mychart.set("dataSource", pieDS);
            > >
            > > Thanks,
            > > Tripp
            >
            > Hello.
            >
            > It seems I found another issue. The first time the pie is rendered
            > fine, but if I push the button "Change Data", the pie is rendered with
            > a red sector and it is not coherent with the data.
            >
            > Am i missing something?
            >
            > Thanks in advance,
            > Alberto
            >
            > <script type="text/javascript">
            >
            > YAHOO.widget.Chart.SWFURL =
            > "http://yui.yahooapis.com/2.5.2/build//charts/assets/charts.swf";
            >
            > //--- data
            >
            > var w =
            > [
            > { asset: "P1", weigth: 0.10000000000000002 },
            > { asset: "P2", weigth: 0.304853201708779 },
            > { asset: "P3", weigth: 0.03887074865824967 },
            > { asset: "P4", weigth: 0.08907124456880741 },
            > { asset: "P5", weigth: 0.038472078322830935 },
            > { asset: "P6", weigth: 0.23249229758823953 },
            > { asset: "P7", weigth: 0.09624042915309339 },
            > { asset: "P8", weigth: 0.1 }
            > ]
            > var w2 =
            > [
            > { asset: "P1", weigth: 0.10000000000000002 },
            > { asset: "P2", weigth: 0.304853201708779 },
            > { asset: "P3", weigth: 0.03887074865824967 },
            > { asset: "P4", weigth: 0.08907124456880741 }
            > ]
            >
            > var pieDS = new YAHOO.util.DataSource([]);
            > pieDS.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
            > pieDS.responseSchema = { fields: [ "asset", "weigth" ] };
            >
            > //--- chart
            >
            > var mychart = new YAHOO.widget.PieChart( "chart", pieDS,
            > {
            > dataField: "weigth",
            > categoryField: "asset",
            > 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"
            > });
            >
            > var button_changeData = new YAHOO.widget.Button("changeData");
            >
            > YAHOO.util.Event.addListener("changeData", "click", function () {
            > if (Math.random() <= 0.5) {
            > pieDS.liveData = w;
            > } else {
            > pieDS.liveData = w2;
            > }
            > mychart._seriesDefs = [{style: {}}];
            > mychart.set('dataSource', pieDS);
            > }, this, true);
            >
            > </script>
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.