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

YUI Chart with datasource polling in CakePHP

Expand Messages
  • Riki Pribadi
    Hi everyone, Im using CakePHP now and i never use YUI before untill i saw YUI Chart with datasource polling feature. I ve testing it with its original source
    Message 1 of 4 , Mar 31 8:53 AM
    • 0 Attachment
      Hi everyone,

      Im using CakePHP now and i never use YUI before untill i saw YUI Chart with datasource polling feature. I've testing it with its original source and it works. Then i try to implement it in CakePHP. But i can make it out. FYI, i placed the YUI folder in webroot/js/YUI.

      i have changed this line,
      var jsonData = new YAHOO.util.DataSource( "assets/generatedata.php?" );

      into :
      var jsonData = new YAHOO.util.DataSource("<?= $html->url('tester/generate') ?>");

      i have created Tester Controller with its function like this :
      function index() {
          // do nothing just display view
      }
      function generate() {
          $this->layout = 'ajax';
          $this->render('generate');
         
      }

      this is the index.ctp, i just copy-paste and edit the href
      <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?>js/yui/assets/yui.css" >

      <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?>js/yui/assets/dpSyntaxHighlighter.css">
      <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?>js/yui/build/button/assets/skins/sam/button.css" />

      <script type="text/javascript" src="<?= $this->webroot ?>js/yui/build/yahoo/yahoo-min.js"></script>
      <script type="text/javascript" src="<?= $this->webroot ?>js/yui/build/dom/dom-min.js"></script>
      <script type="text/javascript" src="<?= $this->webroot ?>js/yui/build/event/event-min.js"></script>
      <script type="text/javascript" src="<?= $this->webroot ?>js/yui/build/json/json-min.js"></script>
      <script type="text/javascript" src="<?= $this->webroot ?>js/yui/build/element/element-beta-min.js"></script>
      <script type="text/javascript" src="<?= $this->webroot ?>js/yui/build/connection/connection-min.js"></script>
      <script type="text/javascript" src="<?= $this->webroot ?>js/yui/build/datasource/datasource-beta-min.js"></script>
      <script type="text/javascript" src="<?= $this->webroot ?>js/yui/build/charts/charts-experimental-min.js"></script>
      <script type="text/javascript" src="<?= $this->webroot ?>js/yui/build/button/button-min.js"></script>

      <div id="example-canvas" class="bd">
          <div id="chart">Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p>
          </div>

          <script type="text/javascript">
         
              YAHOO.widget.Chart.SWFURL = "<?= $this->webroot ?>js/yui/build/charts/assets/charts.swf";

              var jsonData = new YAHOO.util.DataSource( "<?= $html->url('/tester/generate') ?>" );     

              jsonData.connMethodPost = true;
              jsonData.responseType = YAHOO.util.DataSource.TYPE_JSON;
              jsonData.responseSchema =
              {
                      resultsList: "Results",
                      fields: ["Name","Value"]
              };
             
              var yAxis = new YAHOO.widget.NumericAxis();
              yAxis.minimum = 0;
              yAxis.maximum = 100;
             
              var mychart = new YAHOO.widget.ColumnChart( "chart", jsonData,
              {
                  xField: "Name",
                  yField: "Value",
                  yAxis: yAxis,
                  polling: 2000,
                  expressInstall: "<?= $this->webroot ?>expressinstall.swf"
              });
             
          </script>   
             
          </div>  
      </div>

      FYI, i coppied expressintall.swf to webroot folder

      and last, i create the generate.ctp in tester view folder and its content just like in generate.php example :
      {"Results":
          {"Name":"A","Value":"<?= rand(0,99) ?>"},
          {"Name":"B","Value":"<?= rand(0,99) ?>"},
          {"Name":"C","Value":"<?= rand(0,99) ?>"},
          {"Name":"D","Value":"<?= rand(0,99) ?>"},
          {"Name":"E","Value":"<?= rand(0,99) ?>"}
      }


      everything is up, the image, the background, the swf file. but it doesnt load any data from generate.php. i think the problem is in
      var jsonData = new YAHOO.util.DataSource("<?= $html->url('tester/generate') ?>");
      because jsonData is empty, feels like it doesnt render generate.ctp view or maybe something else i dont know.

      Does anyone could help me please with example. thanks for reply soon

      Best Regards

      Riki Pribadi
       


      Special deal for Yahoo! users & friends - No Cost. Get a month of Blockbuster Total Access now
    • Eric Miraglia
      Riki, This might be easier for Charts-savvy developers to help you with if you provided a URL where they can see it in action and poke around in Firebug. Is
      Message 2 of 4 , Apr 1, 2008
      • 0 Attachment
        Riki,

        This might be easier for Charts-savvy developers to help you with if you provided a URL where they can see it in action and poke around in Firebug.   Is there a URL you can share?

        Regards,
        Eric

        ______________________________________________
        Eric Miraglia
        Yahoo! User Interface Library



        On Mar 31, 2008, at 8:53 AM, Riki Pribadi wrote:

        Hi everyone,

        Im using CakePHP now and i never use YUI before untill i saw YUI Chart with datasource polling feature. I've testing it with its original source and it works. Then i try to implement it in CakePHP. But i can make it out. FYI, i placed the YUI folder in webroot/js/YUI.

        i have changed this line, 
        var jsonData = new YAHOO.util.DataSour ce( "assets/generatedat a.php?" );

        into :
        var jsonData = new YAHOO.util.DataSour ce("<?= $html->url('tester/ generate' ) ?>");

        i have created Tester Controller with it s function like this :
        function index() {
            // do nothing just display view
        }
        function generate() {
            $this->layout = 'ajax';
            $this->render('generate' );
            
        }

        this is the index.ctp, i just copy-paste and edit the href 
        <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?>js/yui/assets/ yui.css" >

        <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?>js/yui/assets/ dpSyntaxHighligh ter.css">
        <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?>js/yui/build/ button/assets/ skins/sam/ button.css" />

        <script type="text/javascri pt" src="<?= $this->webroot ?>js/yui/build/ yahoo/yahoo- min.js"></script>
        <script type="text/javascri pt" src="<?= $this->webroot ?>js/yui/build/ dom/dom-min. js"></script>
        <script type="text/javascri pt" src="<?= $this->webroot ?> ;js/yui/build/ event/event- min.js"></script>
        <script type="text/javascri pt" src="<?= $this->webroot ?>js/yui/build/ json/json- min.js"></script>
        <script type="text/javascri pt" src="<?= $this->webroot ?>js/yui/build/ element/element- beta-min. js"></script>
        <script type="text/javascri pt" src="<?= $this->webroot ?>js/yui/build/ connection/ connection- min.js"></script>
        <script type="text/javascri pt" src="<?= $this->webroot ?>js/yui/build/ datasource/ datasource- beta-min. js"></script>
        <script type="text/javascri pt" src="<?= $this->webroot ?> ;js/yui/build/ charts/charts- experimental- min.js"></script>
        <script type="text/javascri pt" src="<?= $this->webroot ?>js/yui/build/ button/button- min.js"></script>

        <div id="example- canvas" class="bd">
            <div id="chart">Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the <a href="http:/ /www.adobe. com/go/getflashp layer">Adobe Flash Player Download Center</a>.</p>
            </div>

            <script type="text/javascri pt">
            
                YAHOO.widget. Chart.SWFURL = "<?= $this->webroot ?>js/yui/build/ charts/assets/ charts.swf" ;

                var jsonData = new YAHOO.util.DataSour ce( "<?= $html->url('/tester/ generate' ) ?>" );      

                jsonData.connMethod Post = true;
                jsonDa ta.responseTy pe = YAHOO.util.DataSour ce.TYPE_JSON;
                jsonData.responseSc hema =
                {
                        resultsList: "Results",
                        fields: ["Name","Value" ]
                };
                
                var yAxis = new YAHOO.widget. NumericAxis( );
                 yAxis.minimum = 0;
                yAxis.maximum = 100;
                
                var mychart = new YAHOO.widget. ColumnChart( "chart", jsonData,
                {
                    xField: "Name",
                    yField: "Value",
                    yAxis: yAxis,
                    polling: 2000,
                    expressInstall: "<?= $this->webroot ?>expressinstall. swf"
                });
                
            </script>    
                
            </div>   
        </div>

        FYI, i coppied expressintall. swf to webroot folder

        and last, i create the generate.ctp in tester view folder and its content just like in generate.php example :
        {"Results":
            {"Name":"A", "Value":"<?= rand(0,99) ?>"},
            {"Name":"B", "Value":"<?= rand(0,99) ?>"},
            {"Name":"C", "Value":"<?= rand(0,99) ?>"},
            {"Name":"D", "Value":"<?= rand(0,99) ?>"},
            {"Name":"E", "Value":"<?= rand(0,99) ?>"}
        }


        everything is up, the image, the background, the swf file. but it doesnt load any data from generate.php. i think the problem is in 
        var jsonData = new YAHOO.util.DataSour ce("<?= $html->url('tester/ generate' ) ?>");
        because jsonData is empty, feels like it doesnt render generate.ctp view or maybe something else i dont know. 

        Does anyone could help me please with example. thanks for reply soon

        Best Regards

        Riki Pribadi
         



        Special deal for Yahoo! users friends - No Cost. Get a month of Blockbuster Total Access now


      • LAyonne A GAddis
        ... if ... in ... CakePHP. ... webroot/js/YUI. ... the ... href= http://www.adobe.com/go/getflashplayer ... ( / ... jsonData, ... its ... it ... generate.ctp
        Message 3 of 4 , Nov 3, 2008
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...>
          wrote:
          >
          > Riki,
          >
          > This might be easier for Charts-savvy developers to help you with
          if
          > you provided a URL where they can see it in action and poke around
          in
          > Firebug. Is there a URL you can share?
          >
          > Regards,
          > Eric
          >
          > ______________________________________________
          > Eric Miraglia
          > Yahoo! User Interface Library
          >
          >
          >
          > On Mar 31, 2008, at 8:53 AM, Riki Pribadi wrote:
          >
          > > Hi everyone,
          > >
          > > Im using CakePHP now and i never use YUI before untill i saw YUI
          > > Chart with datasource polling feature. I've testing it with its
          > > original source and it works. Then i try to implement it in
          CakePHP.
          > > But i can make it out. FYI, i placed the YUI folder in
          webroot/js/YUI.
          > >
          > > i have changed this line,
          > > var jsonData = new YAHOO.util.DataSource( "assets/
          > > generatedata.php?" );
          > >
          > > into :
          > > var jsonData = new YAHOO.util.DataSource("<?= $html->url('tester/
          > > generate') ?>");
          > >
          > > i have created Tester Controller with it s function like this :
          > > function index() {
          > > // do nothing just display view
          > > }
          > > function generate() {
          > > $this->layout = 'ajax';
          > > $this->render('generate');
          > >
          > > }
          > >
          > > this is the index.ctp, i just copy-paste and edit the href
          > > <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?
          >js/
          > > yui/assets/yui.css" >
          > >
          > > <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?
          >js/
          > > yui/assets/dpSyntaxHighlighter.css">
          > > <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?
          >js/
          > > yui/build/button/assets/skins/sam/button.css" />
          > >
          > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
          > > build/yahoo/yahoo-min.js"></script>
          > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
          > > build/dom/dom-min.js"></script>
          > > <script type="text/javascript" src="<?= $this->webroot ?
          > ;js/yui/
          > > build/event/event-min.js"></script>
          > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
          > > build/json/json-min.js"></script>
          > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
          > > build/element/element-beta-min.js"></script>
          > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
          > > build/connection/connection-min.js"></script>
          > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
          > > build/datasource/datasource-beta-min.js"></script>
          > > <script type="text/javascript" src="<?= $this->webroot ?
          > ;js/yui/
          > > build/charts/charts-experimental-min.js"></script>
          > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
          > > build/button/button-min.js"></script>
          > >
          > > <div id="example-canvas" class="bd">
          > > <div id="chart">Unable to load Flash content. The YUI Charts
          > > Control requires Flash Player 9.0.45 or higher. You can download
          the
          > > latest version of Flash Player from the <a
          href="http://www.adobe.com/go/getflashplayer
          > > ">Adobe Flash Player Download Center</a>.</p>
          > > </div>
          > >
          > > <script type="text/javascript">
          > >
          > > YAHOO.widget.Chart.SWFURL = "<?= $this->webroot ?>js/yui/
          > > build/charts/assets/charts.swf";
          > >
          > > var jsonData = new YAHOO.util.DataSource( "<?= $html->url
          ('/
          > > tester/generate') ?>" );
          > >
          > > jsonData.connMethodPost = true;
          > > jsonDa ta.responseType = YAHOO.util.DataSource.TYPE_JSON;
          > > jsonData.responseSchema =
          > > {
          > > resultsList: "Results",
          > > fields: ["Name","Value"]
          > > };
          > >
          > > var yAxis = new YAHOO.widget.NumericAxis();
          > > yAxis.minimum = 0;
          > > yAxis.maximum = 100;
          > >
          > > var mychart = new YAHOO.widget.ColumnChart( "chart",
          jsonData,
          > > {
          > > xField: "Name",
          > > yField: "Value",
          > > yAxis: yAxis,
          > > polling: 2000,
          > > expressInstall: "<?= $this->webroot ?
          >expressinstall.swf"
          > > });
          > >
          > > </script>
          > >
          > > </div>
          > > </div>
          > >
          > > FYI, i coppied expressintall.swf to webroot folder
          > >
          > > and last, i create the generate.ctp in tester view folder and
          its
          > > content just like in generate.php example :
          > > {"Results":
          > > {"Name":"A","Value":"<?= rand(0,99) ?>"},
          > > {"Name":"B","Value":"<?= rand(0,99) ?>"},
          > > {"Name":"C","Value":"<?= rand(0,99) ?>"},
          > > {"Name":"D","Value":"<?= rand(0,99) ?>"},
          > > {"Name":"E","Value":"<?= rand(0,99) ?>"}
          > > }
          > >
          > >
          > > everything is up, the image, the background, the swf file. but
          it
          > > doesnt load any data from generate.php. i think the problem is in
          > > var jsonData = new YAHOO.util.DataSource("<?= $html->url('tester/
          > > generate') ?>");
          > > because jsonData is empty, feels like it doesnt render
          generate.ctp
          > > view or maybe something else i dont know.
          > >
          > > Does anyone could help me please with example. thanks for reply
          soon
          > >
          > > Best Regards
          > >
          > > Riki Pribadi
          > >
          > >
          > >
          > >
          > > Special deal for Yahoo! users friends - No Cost. Get a month of
          > > Blockbuster Total Access now
          > >
          > >
          >
        • jerry_gagliano
          Hey Riki, I think it s a problem with the url. I use cakePHP and i tried hooking up a datatable. It doesn t seem to like these type of urls /data/view . It
          Message 4 of 4 , Nov 3, 2008
          • 0 Attachment
            Hey Riki,

            I think it's a problem with the url. I use cakePHP and i tried hooking
            up a datatable. It doesn't seem to like these type of urls
            '/data/view'. It works with '/data/json.php'. It has to excute a php
            file.

            Maybe Eric knows better. I am really curious about this solution


            --- In ydn-javascript@yahoogroups.com, "LAyonne A GAddis"
            <lgarmour@...> wrote:
            >
            > --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@>
            > wrote:
            > >
            > > Riki,
            > >
            > > This might be easier for Charts-savvy developers to help you with
            > if
            > > you provided a URL where they can see it in action and poke around
            > in
            > > Firebug. Is there a URL you can share?
            > >
            > > Regards,
            > > Eric
            > >
            > > ______________________________________________
            > > Eric Miraglia
            > > Yahoo! User Interface Library
            > >
            > >
            > >
            > > On Mar 31, 2008, at 8:53 AM, Riki Pribadi wrote:
            > >
            > > > Hi everyone,
            > > >
            > > > Im using CakePHP now and i never use YUI before untill i saw YUI
            > > > Chart with datasource polling feature. I've testing it with its
            > > > original source and it works. Then i try to implement it in
            > CakePHP.
            > > > But i can make it out. FYI, i placed the YUI folder in
            > webroot/js/YUI.
            > > >
            > > > i have changed this line,
            > > > var jsonData = new YAHOO.util.DataSource( "assets/
            > > > generatedata.php?" );
            > > >
            > > > into :
            > > > var jsonData = new YAHOO.util.DataSource("<?= $html->url('tester/
            > > > generate') ?>");
            > > >
            > > > i have created Tester Controller with it s function like this :
            > > > function index() {
            > > > // do nothing just display view
            > > > }
            > > > function generate() {
            > > > $this->layout = 'ajax';
            > > > $this->render('generate');
            > > >
            > > > }
            > > >
            > > > this is the index.ctp, i just copy-paste and edit the href
            > > > <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?
            > >js/
            > > > yui/assets/yui.css" >
            > > >
            > > > <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?
            > >js/
            > > > yui/assets/dpSyntaxHighlighter.css">
            > > > <link rel="stylesheet" type="text/css" href="<?= $this->webroot ?
            > >js/
            > > > yui/build/button/assets/skins/sam/button.css" />
            > > >
            > > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
            > > > build/yahoo/yahoo-min.js"></script>
            > > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
            > > > build/dom/dom-min.js"></script>
            > > > <script type="text/javascript" src="<?= $this->webroot ?
            > > ;js/yui/
            > > > build/event/event-min.js"></script>
            > > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
            > > > build/json/json-min.js"></script>
            > > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
            > > > build/element/element-beta-min.js"></script>
            > > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
            > > > build/connection/connection-min.js"></script>
            > > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
            > > > build/datasource/datasource-beta-min.js"></script>
            > > > <script type="text/javascript" src="<?= $this->webroot ?
            > > ;js/yui/
            > > > build/charts/charts-experimental-min.js"></script>
            > > > <script type="text/javascript" src="<?= $this->webroot ?>js/yui/
            > > > build/button/button-min.js"></script>
            > > >
            > > > <div id="example-canvas" class="bd">
            > > > <div id="chart">Unable to load Flash content. The YUI Charts
            > > > Control requires Flash Player 9.0.45 or higher. You can download
            > the
            > > > latest version of Flash Player from the <a
            > href="http://www.adobe.com/go/getflashplayer
            > > > ">Adobe Flash Player Download Center</a>.</p>
            > > > </div>
            > > >
            > > > <script type="text/javascript">
            > > >
            > > > YAHOO.widget.Chart.SWFURL = "<?= $this->webroot ?>js/yui/
            > > > build/charts/assets/charts.swf";
            > > >
            > > > var jsonData = new YAHOO.util.DataSource( "<?= $html->url
            > ('/
            > > > tester/generate') ?>" );
            > > >
            > > > jsonData.connMethodPost = true;
            > > > jsonDa ta.responseType = YAHOO.util.DataSource.TYPE_JSON;
            > > > jsonData.responseSchema =
            > > > {
            > > > resultsList: "Results",
            > > > fields: ["Name","Value"]
            > > > };
            > > >
            > > > var yAxis = new YAHOO.widget.NumericAxis();
            > > > yAxis.minimum = 0;
            > > > yAxis.maximum = 100;
            > > >
            > > > var mychart = new YAHOO.widget.ColumnChart( "chart",
            > jsonData,
            > > > {
            > > > xField: "Name",
            > > > yField: "Value",
            > > > yAxis: yAxis,
            > > > polling: 2000,
            > > > expressInstall: "<?= $this->webroot ?
            > >expressinstall.swf"
            > > > });
            > > >
            > > > </script>
            > > >
            > > > </div>
            > > > </div>
            > > >
            > > > FYI, i coppied expressintall.swf to webroot folder
            > > >
            > > > and last, i create the generate.ctp in tester view folder and
            > its
            > > > content just like in generate.php example :
            > > > {"Results":
            > > > {"Name":"A","Value":"<?= rand(0,99) ?>"},
            > > > {"Name":"B","Value":"<?= rand(0,99) ?>"},
            > > > {"Name":"C","Value":"<?= rand(0,99) ?>"},
            > > > {"Name":"D","Value":"<?= rand(0,99) ?>"},
            > > > {"Name":"E","Value":"<?= rand(0,99) ?>"}
            > > > }
            > > >
            > > >
            > > > everything is up, the image, the background, the swf file. but
            > it
            > > > doesnt load any data from generate.php. i think the problem is in
            > > > var jsonData = new YAHOO.util.DataSource("<?= $html->url('tester/
            > > > generate') ?>");
            > > > because jsonData is empty, feels like it doesnt render
            > generate.ctp
            > > > view or maybe something else i dont know.
            > > >
            > > > Does anyone could help me please with example. thanks for reply
            > soon
            > > >
            > > > Best Regards
            > > >
            > > > Riki Pribadi
            > > >
            > > >
            > > >
            > > >
            > > > Special deal for Yahoo! users friends - No Cost. Get a month of
            > > > Blockbuster Total Access now
            > > >
            > > >
            > >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.