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

YUI Charts

Expand Messages
  • Jordi Boggiano
    Hi, I am trying to build an logarithmic X axis and well, I am completely lost as the code probably shows. What I have is the size on the X axis, that should
    Message 1 of 16 , Oct 1, 2008
    • 0 Attachment
      Hi,

      I am trying to build an logarithmic X axis and well, I am completely
      lost as the code probably shows.

      What I have is the size on the X axis, that should range from "<
      0.100mm" to "> 0.315mm", and each value is the Y coordinate..

      I don't know if that's enough for anyone to help me, but I sure hope
      so because I have no clue what's wrong here. At some point it worked
      with a logarithmic Y axis, but that's not what we need unfortunately.

      ====================================

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

      siebkurve = [
      { size: "0,315mm", value: 97},
      { size: "0,200mm", value: 6},
      { size: "0,100mm", value: 1}
      ];

      var seriesDef = [ { displayName: "Size", yField: "value" } ];

      var myDataSource = new YAHOO.util.DataSource( siebkurve );
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
      myDataSource.responseSchema = {
      fields: [ "size", "value" ]
      };

      var valueAxis = new YAHOO.widget.NumericAxis();

      var sizeAxis = new YAHOO.widget.NumericAxis();
      sizeAxis.scale = "logarithmic";

      var mychart = new YAHOO.widget.LineChart( "skchart", myDataSource,
      {
      xField: "size",
      series: seriesDef,
      yAxis: valueAxis,
      xAxis: sizeAxis
      });

      ====================================

      Thanks for any help.
      Cheers,
      Jordi
    • tripp.bridges
      Hi, Your problem is in your data array. You have string values defined. Change to this: var siebkurve = [ { size: 0.315, value: 97}, { size: 0.200, value: 6},
      Message 2 of 16 , Oct 1, 2008
      • 0 Attachment
        Hi,
        Your problem is in your data array. You have string values defined.
        Change to this:

        var siebkurve = [
        { size: 0.315, value: 97},
        { size: 0.200, value: 6},
        { size: 0.100, value: 1}
        ];

        That will get the chart to display. If you want the labels to be
        formatted as you have them in your current data. You can use the
        labelFunction of the NumericAxis to add the "mm"

        Thanks,
        Tripp

        --- In ydn-javascript@yahoogroups.com, "Jordi Boggiano"
        <j.boggiano@...> wrote:
        >
        > Hi,
        >
        > I am trying to build an logarithmic X axis and well, I am completely
        > lost as the code probably shows.
        >
        > What I have is the size on the X axis, that should range from "<
        > 0.100mm" to "> 0.315mm", and each value is the Y coordinate..
        >
        > I don't know if that's enough for anyone to help me, but I sure hope
        > so because I have no clue what's wrong here. At some point it worked
        > with a logarithmic Y axis, but that's not what we need unfortunately.
        >
        > ====================================
        >
        > YAHOO.widget.Chart.SWFURL =
        > "http://yui.yahooapis.com/2.5.2/build/charts/assets/charts.swf";
        >
        > siebkurve = [
        > { size: "0,315mm", value: 97},
        > { size: "0,200mm", value: 6},
        > { size: "0,100mm", value: 1}
        > ];
        >
        > var seriesDef = [ { displayName: "Size", yField: "value" } ];
        >
        > var myDataSource = new YAHOO.util.DataSource( siebkurve );
        > myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        > myDataSource.responseSchema = {
        > fields: [ "size", "value" ]
        > };
        >
        > var valueAxis = new YAHOO.widget.NumericAxis();
        >
        > var sizeAxis = new YAHOO.widget.NumericAxis();
        > sizeAxis.scale = "logarithmic";
        >
        > var mychart = new YAHOO.widget.LineChart( "skchart", myDataSource,
        > {
        > xField: "size",
        > series: seriesDef,
        > yAxis: valueAxis,
        > xAxis: sizeAxis
        > });
        >
        > ====================================
        >
        > Thanks for any help.
        > Cheers,
        > Jordi
        >
      • Ken Loomis
        Hi: I m having a devil of a time with charts. First: I couldn t see the YUI Examples in FireFox 3.0. When I tried to download the latest version of FlashPlayer
        Message 3 of 16 , Oct 1, 2008
        • 0 Attachment
          Hi:

          I'm having a devil of a time with charts.

          First: I couldn't see the YUI Examples in FireFox 3.0. When I tried to
          download the latest version of FlashPlayer from the link in YUI, I was
          only offered 9.0.124 as the latest version, I installed that and still
          couldn't see the examples in FF. (IE was OK.) I found 9.0.45 in a source
          for "older versions" Once I downloaded that I could see the examples.
          So, 9.0.45 is older than 9.0.124, and Charts only works with the older
          version in FF?

          Second: I can't get the Y series to display. I tried using an
          XHRDataSource (I'm assumimg XHR stands for AJAX?), but I couldn't get
          that to work at all. I couldn't see where to specify parameters with the
          URL, so I ended up with a tortuous work-around.

          I call a function to issue an ajax request :

          function buildGraph() {
          postdata = "routine=getWeeklyStats";
          YAHOO.util.Connect.asyncRequest('POST', 'ajax.php',
          callbackGetWeekStats, postdata);
          }

          And then do the callback stuff and end up with:

          var handleWeekStatsSuccess = function(o) {
          YAHOO.widget.Chart.SWFURL = "yui-2.6.0/build/charts/assets/charts.swf";
          var info = YAHOO.lang.JSON.parse(o.responseText);
          var graphDataSource = new YAHOO.util.DataSource(info);
          graphDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
          graphDataSource.responseSchema =
          {
          fields:["Week","numTowers","numProjects","numSensors"]
          }
          var seriesDef =
          [
          {displayName:"Towers",yField:"numTowers"},
          {displayName:"Projects",yField:"numProjects"},
          {displayName:"Sensors",yField:"numSensors"}
          ];

          var graph = new YAHOO.widget.LineChart("statsGraph", graphDataSource,
          {
          xField:'Week',
          series:seriesDef
          });
          };

          .. and I could get the x-axis, but not the y.

          I tried:
          var graphDataSource = new YAHOO.util.DataSource(o.responseText);
          graphDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

          .. but that didn't work at all.

          as for using a XHRConnection I followed the example in the Polling
          example, but it would never produce the request and as I said there was
          no place for params.

          So, what am I missing?

          By the way, my JSON string: looks like this:

          [{"Week":"09\/13\/2008","numTowers":"19","numProjects":"9","numSensors":"5"},{"Week":"09\/20\/2008","numTowers"

          :"19","numProjects":"9","numSensors":"26"},{"Week":"09\/27\/2008","numTowers":"19","numProjects":"9","numSensors"

          :"35"}]



          Thanks,

          Ken
        • Jordi Boggiano
          ... Thank you, works fine. I just have one small problem, but I am not sure whether it s possible to fix this. I would like to have my LineChart draw lines not
          Message 4 of 16 , Oct 2, 2008
          • 0 Attachment
            On Thu, Oct 2, 2008 at 1:28 AM, tripp.bridges <trippb@...> wrote:
            > Hi,
            > Your problem is in your data array. You have string values defined.
            > [...]
            > That will get the chart to display. If you want the labels to be
            > formatted as you have them in your current data. You can use the
            > labelFunction of the NumericAxis to add the "mm"

            Thank you, works fine.

            I just have one small problem, but I am not sure whether it's possible
            to fix this. I would like to have my LineChart draw lines not straight
            but curved (by extrapolating between known values). Is this possible ?

            Cheers,
            Jordi
          • tripp.bridges
            Hi, There currently is not an option for curved lines in YUI Charts. It has been requested before and will be considered for a future enhancement. Thanks,
            Message 5 of 16 , Oct 2, 2008
            • 0 Attachment
              Hi,
              There currently is not an option for curved lines in YUI Charts. It
              has been requested before and will be considered for a future
              enhancement.

              Thanks,
              Tripp
              --- In ydn-javascript@yahoogroups.com, "Jordi Boggiano"
              <j.boggiano@...> wrote:
              >
              > On Thu, Oct 2, 2008 at 1:28 AM, tripp.bridges <trippb@...> wrote:
              > > Hi,
              > > Your problem is in your data array. You have string values defined.
              > > [...]
              > > That will get the chart to display. If you want the labels to be
              > > formatted as you have them in your current data. You can use the
              > > labelFunction of the NumericAxis to add the "mm"
              >
              > Thank you, works fine.
              >
              > I just have one small problem, but I am not sure whether it's possible
              > to fix this. I would like to have my LineChart draw lines not straight
              > but curved (by extrapolating between known values). Is this possible ?
              >
              > Cheers,
              > Jordi
              >
            • tripp.bridges
              Hi, Charts display properly in FF3 with Flash 9.0.124.0. You might have had a corrupt install. If you upgrade your version it should still work. If not, you
              Message 6 of 16 , Oct 2, 2008
              • 0 Attachment
                Hi,
                Charts display properly in FF3 with Flash 9.0.124.0. You might have
                had a corrupt install. If you upgrade your version it should still
                work. If not, you may have to do a clean install. Remember, when
                installing flash player, it is a separate install for the Active X
                control (IE) and the plugin (all other browsers).

                Change you JSON string to contain numeric values for you y axis
                properties and the y axis should display.
                {"Results":
                [
                {"Week":"09\/13\/2008","numTowers":19,"numProjects":9,"numSensors":5},
                {"Week":"09\/20\/2008","numTowers":19,"numProjects":9,"numSensors":26},
                {"Week":"09\/27\/2008","numTowers":19,"numProjects":9,"numSensors":35}
                ]}


                Also, you can set your post data through the request property of your
                attributes argument in your chart simplifying your code.

                //datasource
                var graphDataSource = new YAHOO.util.DataSource( "ajax.php" );
                graphDataSource.connMethodPost = true;
                graphDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
                graphDataSource.responseSchema =
                {
                resultsList: "Results",
                fields: ["Week","numTowers","numProjects","numSensors"]
                };

                //chart
                var graph = new YAHOO.widget.LineChart("statsGraph", graphDataSource,
                {
                request:"routine=getWeeklyStats",
                xField:"Week",
                series:seriesDef
                });

                Thanks,
                Tripp
                --- In ydn-javascript@yahoogroups.com, Ken Loomis <kloomis@...> wrote:
                >
                > Hi:
                >
                > I'm having a devil of a time with charts.
                >
                > First: I couldn't see the YUI Examples in FireFox 3.0. When I tried to
                > download the latest version of FlashPlayer from the link in YUI, I was
                > only offered 9.0.124 as the latest version, I installed that and still
                > couldn't see the examples in FF. (IE was OK.) I found 9.0.45 in a
                source
                > for "older versions" Once I downloaded that I could see the examples.
                > So, 9.0.45 is older than 9.0.124, and Charts only works with the older
                > version in FF?
                >
                > Second: I can't get the Y series to display. I tried using an
                > XHRDataSource (I'm assumimg XHR stands for AJAX?), but I couldn't get
                > that to work at all. I couldn't see where to specify parameters with
                the
                > URL, so I ended up with a tortuous work-around.
                >
                > I call a function to issue an ajax request :
                >
                > function buildGraph() {
                > postdata = "routine=getWeeklyStats";
                > YAHOO.util.Connect.asyncRequest('POST', 'ajax.php',
                > callbackGetWeekStats, postdata);
                > }
                >
                > And then do the callback stuff and end up with:
                >
                > var handleWeekStatsSuccess = function(o) {
                > YAHOO.widget.Chart.SWFURL =
                "yui-2.6.0/build/charts/assets/charts.swf";
                > var info = YAHOO.lang.JSON.parse(o.responseText);
                > var graphDataSource = new YAHOO.util.DataSource(info);
                > graphDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
                > graphDataSource.responseSchema =
                > {
                > fields:["Week","numTowers","numProjects","numSensors"]
                > }
                > var seriesDef =
                > [
                > {displayName:"Towers",yField:"numTowers"},
                > {displayName:"Projects",yField:"numProjects"},
                > {displayName:"Sensors",yField:"numSensors"}
                > ];
                >
                > var graph = new YAHOO.widget.LineChart("statsGraph",
                graphDataSource,
                > {
                > xField:'Week',
                > series:seriesDef
                > });
                > };
                >
                > .. and I could get the x-axis, but not the y.
                >
                > I tried:
                > var graphDataSource = new YAHOO.util.DataSource(o.responseText);
                > graphDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
                >
                > .. but that didn't work at all.
                >
                > as for using a XHRConnection I followed the example in the Polling
                > example, but it would never produce the request and as I said there was
                > no place for params.
                >
                > So, what am I missing?
                >
                > By the way, my JSON string: looks like this:
                >
                >
                [{"Week":"09\/13\/2008","numTowers":"19","numProjects":"9","numSensors":"5"},{"Week":"09\/20\/2008","numTowers"
                >
                >
                :"19","numProjects":"9","numSensors":"26"},{"Week":"09\/27\/2008","numTowers":"19","numProjects":"9","numSensors"
                >
                > :"35"}]
                >
                >
                >
                > Thanks,
                >
                > Ken
                >
              • Ken Loomis
                Tripp: Thank you VERY much for your reply. Please see my comments/questions in line: ... Yup. I did some more installs (there s a separate version for FF?)
                Message 7 of 16 , Oct 3, 2008
                • 0 Attachment
                  Tripp: Thank you VERY much for your reply. Please see my
                  comments/questions in line:

                  tripp.bridges wrote:
                  > Hi,
                  > Charts display properly in FF3 with Flash 9.0.124.0. You might have
                  > had a corrupt install. If you upgrade your version it should still
                  > work.
                  >
                  Yup. I did some more installs (there's a separate version for FF?) and
                  all is working properly.
                  > Change your JSON string to contain numeric values for your y axis
                  > properties and the y axis should display.
                  > {"Results":
                  > [
                  > {"Week":"09\/13\/2008","numTowers":19,"numProjects":9,"numSensors":5},
                  > {"Week":"09\/20\/2008","numTowers":19,"numProjects":9,"numSensors":26},
                  > {"Week":"09\/27\/2008","numTowers":19,"numProjects":9,"numSensors":35}
                  > ]}
                  >
                  Yes, that was the problem. I discovered that my data was displaying when
                  I set the height of the chart high enough, but that's not a good
                  solution because it doesn't take advantage of the chart's ability to
                  dynamically resize. I believe that, strictly speaking, the JSON data has
                  to be quoted, and that's the way php json_encode produces it. I don't
                  know how to remove the quotes. Might it be a bug that the chart can't
                  handle the quoted numbers?
                  > Also, you can set your post data through the request property of your
                  > attributes argument in your chart simplifying your code.
                  >
                  > //datasource
                  > var graphDataSource = new YAHOO.util.DataSource( "ajax.php" );
                  > graphDataSource.connMethodPost = true;
                  How can I send parameters along with the request?

                  Thanks, again,

                  Ken
                • tripp.bridges
                  Hi Ken, The DataSource class has a built-in number parser that you can declare when you set up your response schema. This will solve the issue.
                  Message 8 of 16 , Oct 5, 2008
                  • 0 Attachment
                    Hi Ken,
                    The DataSource class has a built-in number parser that you can declare
                    when you set up your response schema. This will solve the issue.
                    http://developer.yahoo.com/yui/datasource/#parsers

                    Your responseSchema should look something like this:

                    graphDataSource.responseSchema =
                    {
                    resultsList: "Results",
                    fields: ["Week",
                    {key:"numTowers",parser:"number"},
                    {key:"numProjects",parser:"number"},
                    {key:"numSensors",parser:"number"}
                    ]
                    };


                    If you allow the chart to make the sendRequest on your data source,
                    you can pass in your parameters in the request configuration
                    parameter. The Chart will handle the rest.

                    var graph = new YAHOO.widget.LineChart("statsGraph", graphDataSource,
                    {
                    request:"routine=getWeeklyStats",
                    xField:"Week",
                    series:seriesDef
                    });

                    Of course be sure to set connMethodPost to true.

                    var graphDataSource = new YAHOO.util.DataSource( "assets/ajax.php" );
                    graphDataSource.connMethodPost = true;
                    graphDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;


                    Thanks,
                    Tripp
                    --- In ydn-javascript@yahoogroups.com, Ken Loomis <kloomis@...> wrote:
                    >
                    > Tripp: Thank you VERY much for your reply. Please see my
                    > comments/questions in line:
                    >
                    > tripp.bridges wrote:
                    > > Hi,
                    > > Charts display properly in FF3 with Flash 9.0.124.0. You might have
                    > > had a corrupt install. If you upgrade your version it should still
                    > > work.
                    > >
                    > Yup. I did some more installs (there's a separate version for FF?) and
                    > all is working properly.
                    > > Change your JSON string to contain numeric values for your y axis
                    > > properties and the y axis should display.
                    > > {"Results":
                    > > [
                    > >
                    {"Week":"09\/13\/2008","numTowers":19,"numProjects":9,"numSensors":5},
                    > >
                    {"Week":"09\/20\/2008","numTowers":19,"numProjects":9,"numSensors":26},
                    > >
                    {"Week":"09\/27\/2008","numTowers":19,"numProjects":9,"numSensors":35}
                    > > ]}
                    > >
                    > Yes, that was the problem. I discovered that my data was displaying
                    when
                    > I set the height of the chart high enough, but that's not a good
                    > solution because it doesn't take advantage of the chart's ability to
                    > dynamically resize. I believe that, strictly speaking, the JSON data
                    has
                    > to be quoted, and that's the way php json_encode produces it. I don't
                    > know how to remove the quotes. Might it be a bug that the chart can't
                    > handle the quoted numbers?
                    > > Also, you can set your post data through the request property of your
                    > > attributes argument in your chart simplifying your code.
                    > >
                    > > //datasource
                    > > var graphDataSource = new YAHOO.util.DataSource( "ajax.php" );
                    > > graphDataSource.connMethodPost = true;
                    > How can I send parameters along with the request?
                    >
                    > Thanks, again,
                    >
                    > Ken
                    >
                  • Ken Loomis
                    ... Tripp: That worked well (enabling dynamic sizing of the cart), however it has introduced another problem. If the data is parsed as a number, the chart
                    Message 9 of 16 , Oct 6, 2008
                    • 0 Attachment
                      tripp.bridges wrote:
                      > Hi Ken,
                      > The DataSource class has a built-in number parser that you can declare
                      > when you set up your response schema. This will solve the issue.
                      > http://developer.yahoo.com/yui/datasource/#parsers
                      >
                      Tripp:

                      That worked well (enabling dynamic sizing of the cart), however it has
                      introduced another problem.
                      If the data is parsed as a number, the chart draws a line to and creates
                      a point for NULL data as zero. No point is created if the data is not
                      parsed as a number (and this is the behavior I would like). Fiddling
                      with the connectDiscontinuousPoints doesn't seem to solve the problem.

                      Any ideas?

                      Thanks,

                      Ken
                    • tripp.bridges
                      Hi Ken, You could try writing your own number parsing function that does not return 0 for null values and assigning it as the parser in your responseSchema.
                      Message 10 of 16 , Oct 7, 2008
                      • 0 Attachment
                        Hi Ken,

                        You could try writing your own number parsing function that does not
                        return 0 for null values and assigning it as the parser in your
                        responseSchema.

                        Below is a proof of concept using the existing logic of the
                        DataSource's number parser. You may need to write and test your own
                        function.

                        YAHOO.example.parseNumber = function ( oData )
                        {
                        //return null if the data will not parse as a number
                        if(isNaN(parseInt(oData))) return null;

                        //Convert to number
                        var number = oData * 1;

                        // Validate
                        if(YAHOO.lang.isNumber(number)) {
                        return number;
                        }
                        else {
                        return null;
                        }

                        return parseInt(oData);

                        }

                        graphDataSource.responseSchema =
                        {
                        resultsList: "Results",
                        fields: ["Week",
                        {key:"numTowers",parser:YAHOO.example.parseNumber},
                        {key:"numProjects",parser:YAHOO.example.parseNumber},
                        {key:"numSensors",parser:YAHOO.example.parseNumber}
                        ]
                        };

                        Hope this helps.

                        Thanks,
                        Tripp

                        --- In ydn-javascript@yahoogroups.com, Ken Loomis <kloomis@...> wrote:
                        >
                        > tripp.bridges wrote:
                        > > Hi Ken,
                        > > The DataSource class has a built-in number parser that you can declare
                        > > when you set up your response schema. This will solve the issue.
                        > > http://developer.yahoo.com/yui/datasource/#parsers
                        > >
                        > Tripp:
                        >
                        > That worked well (enabling dynamic sizing of the cart), however it has
                        > introduced another problem.
                        > If the data is parsed as a number, the chart draws a line to and
                        creates
                        > a point for NULL data as zero. No point is created if the data is not
                        > parsed as a number (and this is the behavior I would like). Fiddling
                        > with the connectDiscontinuousPoints doesn't seem to solve the problem.
                        >
                        > Any ideas?
                        >
                        > Thanks,
                        >
                        > Ken
                        >
                      • Ken Loomis
                        ... Sweet! Now I just need to get the minor grid lines working and I ll be all set. Thanks, Tripp. Ken
                        Message 11 of 16 , Oct 8, 2008
                        • 0 Attachment
                          tripp.bridges wrote:
                          > Hi Ken,
                          >
                          > You could try writing your own number parsing function that does not
                          > return 0 for null values and assigning it as the parser in your
                          > responseSchema.
                          >
                          > Below is a proof of concept using the existing logic of the
                          > DataSource's number parser. You may need to write and test your own
                          > function.
                          Sweet!

                          Now I just need to get the minor grid lines working and I'll be all set.

                          Thanks, Tripp.

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