CSS3 transitions with my canvas tag


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Weezy on 29th June 2016
Hello,

I use the method who's describe here www.rgraph.net/docs/howto-use-css3-transitions-with-your-canvas-tag.html

But when I run my program the chart display in the same time not by transition.

My program:

<!DOCTYPE html >
<html>
<meta charset=utf-8 />

<head>

<script src="RGraph/libraries/RGraph.common.core.js"></script>
<script src="RGraph/libraries/RGraph.line.js"></script>

<script src="RGraph/libraries/RGraph.common.dynamic.js"></script>
<script src="RGraph/libraries/RGraph.common.annotate.js"></script>
<script src="RGraph/libraries/RGraph.common.context.js"></script>
<script src="RGraph/libraries/RGraph.common.key.js"></script>
<script src="RGraph/libraries/RGraph.common.effects.js"></script>


</head>

<body>

<style>
   canvas {
       transition: width .5s, height .5s, top .5s, left .5s;
   }
</style>

<div id="wrapper" style="float: center; width: 700px margin: 0px">
     <canvas id="line" width="650" height="300">[No canvas support]</canvas><br /><br/>

         <FORM method="post" action="testzoom.php">
             xmin: <input type="text" name="XMIN" placeholder="xmin"/><br/>
             xmax: <input type="text" name="XMAX" placeholder="xmax"/><br/>
         </FORM>
</div>

<button type="button" id='myButton'>Zoomer</button><script>

window.onload = function (){

   RGraph.AJAX.getJSON('getJson.php', drawLine);
   var type = true;

    function drawLine (json){

        // Now draw the chart
        var line = new RGraph.Line({
            id: 'line',
            data: [json.a, json.b],
            options: {
                /*annotatable: true,
                annotateLinewidth: 2,
                contextmenu: [['Effacer les annotations', function () {RGraph.Clear(line.canvas);
                          RGraph.ClearAnnotations(line.canvas); line.Draw();}]],*/
                key: ['a', 'b'],
                labels: json.nom,
                title: 'Exemple courbe',
                gutterTop: 40,
                gutterBottom:40,
                gutterLeft: 40,
                ymax: 10,
                tickmarks: 'circle',
                numxticks: 0,

           }
        }).trace();
        type = false;
   }

   RGraph.AJAX.getJSON('testzoom.php', drawLine1);

   function drawLine1 (json){
         // Now draw the chart
       var line1 = new RGraph.Line({
           id: 'line',
           data: [json.a, json.b],
           options: {
               //annotatable: true,
               //annotateLinewidth: 2,
               //contextmenu: [['Effacer les annotations', function () {RGraph.Clear(line1.canvas);
                   // RGraph.ClearAnnotations(line1.canvas); line1.Draw();}]],
               key: ['a', 'b'],
               labels: json.nom,
               title: 'Exemple courbe',
               gutterTop: 40,
               gutterBottom:40,
               gutterLeft: 40,
               ymax: 10,
               tickmarks: 'circle',
               numxticks: 0,

          }
       }).trace();
       type = true;
   }
   document.getElementById('myButton').onclick = function (e)
              {
                  var ca = document.getElementById('line');
                  var wrapper = ('#wrapper');

                  ca.style.width = 0;
                  ca.style.height = 0;
                  ca.style.top = '100px'
                  ca.style.left = '300px';

                  setTimeout(function ()
                  {
                      RGraph.reset(ca);
                      ca.__rgraph_aa_translated__ = false;

                      if (!type) {
                          drawLine();
                      } else {
                          drawLine1();
                      }

                      type = !type;

                      ca.style.width = '600px';
                      ca.style.height = '250px';
                      ca.style.position = 'relative';
                      ca.style.left = 0;
                      ca.style.top = 0;

                  }, 750)

              }
              drawLine();
};

</script>
</body>
</html>
Posted by Richard on 29th June 2016
Hi there,

I can't quite tell what you're asking. Put your page on your website and send me the link to it. And try using static data instead of using JSON whilst you get it workin.

When you have it working you can then change it over to JSON.





Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)
Posted by Weezy on 29th June 2016
I work with local server I don't know how I can put my page on my website.

Now When I run the program this error display : "TypeError: json is undefined - data: [json.a, json.b],"
Posted by Richard on 29th June 2016
Hi there,

Well if the json variable is undefined then your AJAX call may not be returning what you expect. You can see this by requesting the AJAX script in your browser. For example:

localhost/getjson.php

And you'll see what the script outputs. This is what the RGraph.AJAX.getJSON will be getting and it should look similar to this:



{data: [1,2,5,3,6,8,9], labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']}



Here's an AJAX script on the RGraph site:

www.rgraph.net/getdata.html?json





Then in your callback you could do this:

     RGraph.AJAX.getJSON('/getdata.html?json', function (json)
     {
         $p(json.data);
         $p(json.labels);
     });




Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)
Posted by Weezy on 29th June 2016
127.0.0.1/getjson.php return this:

{"nom":["Aziz","Eric","Adel","Brayan","Rayan","Nicolas","Kevin","Leo","Julien","Julie"],"a":[1,7,2,6,2,6,3,7,2,8],"b":[0,4,3,5,3,1,2,4,3,7],"c":[3,5,9,7,6,4,8,4,8,6],"d":[2,7,5,8,1,6,6,8,2,8]}
Posted by Richard on 29th June 2016
Hi there,

Then you should be able to do this:

      RGraph.AJAX.getJSON('getjson.php', function (json)
      {
          $p(json.nom);
          $p(json.a);
          $p(json.b);
          $p(json.c);
          $p(json.d);
      });



Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)
Posted by Weezy on 29th June 2016
  RGraph.AJAX.getJSON('getjson.php', function (json)
       {
           $p(json.nom);
           $p(json.a);
           $p(json.b);
           $p(json.c);
           $p(json.d);
       });
==> display contents of each column (nom, a, b, c, d)
Posted by Richard on 29th June 2016
Hi there,

Then you should be able to do this:

   RGraph.AJAX.getJSON('getjson.php', function (json)
   {
         var line = new RGraph.Line({
             id: 'cvs', // Change the ID to that of you canvas tag
             data: json.a,
             options: {
            }
         }).draw();
     });








Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)
Posted by Weezy on 29th June 2016
Yes next?
Posted by Richard on 29th June 2016
Hi there,

Well if that works then you can build up your chart from there. Eg Start by changing the data to this:

data: [json.a, json.b, json.c, json.d]


And go on from there.



Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)
Posted by Weezy on 29th June 2016
Now this error display "ReferenceError: drawLigne is not defined - drawLigne ();"
Posted by Richard on 29th June 2016
Hi there,

Well that appears to be an obvious typo. A very obvious typo.




Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)
Posted by Weezy on 29th June 2016
If it's a very obvious can you find it please because I don't find this typo.

<canvas id="cvs" width="650" height="300">[No canvas support]</canvas><br/>
<button id='myButton'>Zoomer</button>
<script>
     window.onload = (function ()
     {
         var type = true;

         RGraph.AJAX.getJSON('getJson.php', function drawLigne (json)
   {
         var line = new RGraph.Line({
             id: 'cvs',
             data: [json.a],
             options: {
               labels:json.nom,
            }
         }).draw();
     });


             type = false;


         //This function is called to draw the line chart
         function drawLine ()
         {
             var line = new RGraph.Line({
                 id: 'cvs',
                 data: [5,8,16,5,8,9,4,3,2,4,3,2],
                 options: {
                     labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                     textSize: 14,
                     textAccessible: false
                 }
             }).draw();

             type = true;
         }

         /**
         * This is the onclick event for the button
         */
         document.getElementById('myButton').onclick = function (e)
         {
             var ca = document.getElementById('cvs');
             var $wrapper = ('#wrapper');

             /**
             * This CSS change results in the canvas shrinking (due to the CSS transition)
             */
             ca.style.width = 0;
             ca.style.height = 0;
             ca.style.top = '100px'
             ca.style.left = '300px';

             /**
             * Now that the canvas hasd been shrunk - wait 0.75 seconds, draw the alternate
             * chart and unshrink it.
             */
             setTimeout(function ()
             {
                 RGraph.reset(ca);
                 ca.__rgraph_aa_translated__ = false;

                 if (!type) {
                     drawLigne ();
                 } else {
                     drawLine();
                 }

                type != type;


                 /**
                 * This CSS change results in the canvas expanding (due to the CSS transition)
                 */
                 ca.style.width = '600px';
                 ca.style.height = '300px';
                 ca.style.position = 'relative';
                 ca.style.left = 0;
                 ca.style.top = 0;

             }, 750)

         }
         drawLigne ();
     });
</script>
Posted by Richard on 29th June 2016
Hi there,

You need to find some way of putting the page online. You could use dropbox for example to set the page up. And I don't mean just dumping the files there.

And the browsers console will most likely be giving you an error message. So check that.








Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)
Posted by Weezy on 29th June 2016
I don't find some way of putting my page online.

Here you can find the different file that I use for this page:

getJson.php:

<?php
error_reporting(E_ALL);
include 'fonction.php';


$name='sample.csv';
$array=csv2tab($name);

$json = json_encode($array);
print $json;
?>

sample.csv:

Nom,a,b,c,d
Aziz,1,0,3,2
Eric,7,4,5,7
Adel,2,3,9,5
Brayan,6,5,7,8
Rayan,2,3,6,1
Nicolas,6,1,4,6
Kevin,3,2,8,6
Leo,7,4,4,8
Julien,2,3,8,2
Julie,8,7,6,8

fonction.php:

<?php
function csv2tab($file_csv){

   $fp = fopen($file_csv, 'r');
   $array=array_fill_keys(array_map('strtolower',fgetcsv($fp)), array());

   while ($row = fgetcsv($fp)) {
       $ncol=0;
       foreach ($array as &$a) {
         $val=array_shift($row);
         if (is_numeric($val))
           $a[] = floatval($val);
         else {
               $a[] = $val;
           }
         $ncol=$ncol+1;
      }
   }
   fclose($fp);
   return $array;
}
?>

Thanks for your help

Posted by Richard on 29th June 2016
Hi there,

I don't know why you're showing me that - you previously said that a chart using it was working. You need to take the code that I previously posted - this:



    RGraph.AJAX.getJSON('getjson.php', function (json)
    {
          var line = new RGraph.Line({
              id: 'cvs', // Change the ID to that of your canvas tag
              data: [json.a, json.b, json.c, json.d],
              options: {
             }
          }).draw();
      });

And build the chart up slowly from there.






Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)

Add a reply

 




« Back to message list
RGraph on social media