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

Charts No Y series JSON Data

Expand Messages
  • 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 1 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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 9 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.