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

Chart refresh...

Expand Messages
  • santini.alberto
    Hello. I know my question is a newbie question and in the forum I found some hints, but my code doesn t work. I have a pie chart using a JS_ARRAY, starting
    Message 1 of 7 , Jul 30 1:27 PM
    • 0 Attachment
      Hello.

      I know my question is a newbie question and in the forum I found some
      hints, but my code doesn't work.

      I have a pie chart using a JS_ARRAY, starting empty and, then, filled
      with new values. The result is a pie chart with only legend rendered
      on white backgroud, no pie.

      ... // define datasource and chart: asset is a string and weight a
      percentage number between 0 and 1.

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

      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"
      });
      ...

      ... // filling the data and, debugging, they are correct. I tried to
      fill weight with, for instance, a constant (5.000).
      pieData[i] = {
      asset: prods[i],
      weigth: res.solution[i] * 100
      };
      ...

      ... // ok... I used mychart.refresh() too with the same result: only
      legend rendered.
      pieDS.liveData = pieData;
      mychart.set('dataSource', pieDS);
      ...


      Any idea?

      Thanks in advance,
      Alberto Santini
    • tripp.bridges
      Hi, If your data source is populated correctly, this should work for loading your data: pieDS.liveData = pieData; mychart.set( dataSource , pieDS); You may be
      Message 2 of 7 , Jul 30 4:24 PM
      • 0 Attachment
        Hi,
        If your data source is populated correctly, this should work for
        loading your data:
        pieDS.liveData = pieData;
        mychart.set('dataSource', pieDS);

        You may be experiencing timing issues so try setting the data source
        after the "contentReady" event is fired.

        function loadData()
        {
        pieDS.liveData = pieData;
        mychart.set('dataSource', pieDS);
        }
        mychart.on("contentReady", loadData);

        If that does not work, send me a link or the source to your code so
        that I can inspect further.

        Thanks,
        Tripp
        --- In ydn-javascript@yahoogroups.com, "santini.alberto"
        <albertosantini@...> wrote:
        >
        > Hello.
        >
        > I know my question is a newbie question and in the forum I found some
        > hints, but my code doesn't work.
        >
        > I have a pie chart using a JS_ARRAY, starting empty and, then, filled
        > with new values. The result is a pie chart with only legend rendered
        > on white backgroud, no pie.
        >
        > ... // define datasource and chart: asset is a string and weight a
        > percentage number between 0 and 1.
        >
        > var pieDS = new YAHOO.util.DataSource([]);
        > pieDS.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        > pieDS.dataType = YAHOO.util.DataSource.TYPE_JSARRAY;
        > pieDS.responseSchema = {
        > fields: ["asset", "weigth"]
        > };
        >
        > 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"
        > });
        > ...
        >
        > ... // filling the data and, debugging, they are correct. I tried to
        > fill weight with, for instance, a constant (5.000).
        > pieData[i] = {
        > asset: prods[i],
        > weigth: res.solution[i] * 100
        > };
        > ...
        >
        > ... // ok... I used mychart.refresh() too with the same result: only
        > legend rendered.
        > pieDS.liveData = pieData;
        > mychart.set('dataSource', pieDS);
        > ...
        >
        >
        > Any idea?
        >
        > Thanks in advance,
        > Alberto Santini
        >
      • santini.alberto
        Hello Tripp. ... I added a complete test case below. It reproduces exactly what I described in my post. The datasource is initialized with [], then, when you
        Message 3 of 7 , Jul 31 1:29 AM
        • 0 Attachment
          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"></script>
          <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>

        • 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 4 of 7 , Jul 31 10:41 AM
          • 0 Attachment
            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 5 of 7 , Jul 31 1:03 PM
            • 0 Attachment
              --- 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 6 of 7 , Aug 4, 2008
              • 0 Attachment
                --- 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 7 of 7 , Aug 4, 2008
                • 0 Attachment
                  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.