chart.js - Charts.js -> Display / Load chart only when visible on the screen -

-

this first question, searching answer here , on google no avail.

i preparing website accountancy company, have requested demo created data visualisations. have opted use 'charts.js'.

my problem this, want chart load when visible on screen. @ moment load @ same time therefore miss quite nice animation.

extending on question, text next chart 'ease-in' too, when visible on screen.

would kind enough point me right material on 'net, or maybe show me easy way achieve this?

kindest regards , thank in advance!

as requested, adding simple code displays 2 charts below screen. make work need chart.js here: chart.js website

index.html:

<!doctype html> <html class="no-js">     <head>         <meta charset="utf-8">         <meta http-equiv="x-ua-compatible" content="ie=edge">         <title>graphs</title>         <link rel="stylesheet" href="css/main.css">         <script src="js/chart.js"></script>     </head>     <body>  <div class="graphs">                      <div class="separator1"></div>               <div class="graph1">                      <canvas id="mycanvas" width="475" height="400">graph 1</canvas>                     <script>                     //get context of canvas element want select                     context = document.getelementbyid('mycanvas').getcontext('2d'); var line = {}; var data = {     labels : ["january","february","march","april","may","june","july"],     datasets : [         {             fillcolor : "rgba(151,57,56,0.5)",             strokecolor : "rgba(151,57,56,1)",             pointcolor : "rgba(151,57,56,1)",             pointstrokecolor : "#fff",             data : [65,59,90,81,56,55,40]         },         {             fillcolor : "rgba(59,97,150,0.5)",             strokecolor : "rgba(59,97,150,1)",             pointcolor : "rgba(59,97,150,1)",             pointstrokecolor : "#fff",             data : [28,48,40,19,96,27,100]         }     ] }; var options = { scaleoverlay : false, scaleoverride : false, scalelinewidth : 1,  pointdotradius : 3, pointdotstrokewidth : 1, animationsteps : 150 };  new chart(context).line(data, options);                      </script>                     </div>                     <div class="text1">                         <div class="innertext">                         <h3>praesent viverra</h3>                         <hr/>                         <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>                         </div>                     </div>             <div class="graph2">                      <canvas id="mycanvas2" width="475" height="400">graph 2</canvas>                     <script>                     //get context of canvas element want select                     context = document.getelementbyid('mycanvas2').getcontext('2d'); var pie = {}; var data = [     {         value: 30,         color:"#973938"     },     {         value : 50,         color : "#78963e"     },     {         value : 40,         color : "#3b6196"     },     {         value : 25,         color: "#f49d20"     },     {         value : 35,         color: "#fbdd13"     }            ]; var options = { animationsteps : 150 };  new chart(context).pie(data, options);                      </script>                     </div>                     <div class="text2">                         <div class="innertext">                         <h3>praesent viverra</h3>                         <hr/>                         <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>                         </div>                     </div>       </body> </html>

main.css:

.graph1 {     margin-left: 15%;     width: 33%;     float: left;     height: 450px;     display: block; }  .graph1 canvas {     padding: 25px 25px 25px 25px; }  .graph2 {     margin-right: 15%;     width: 33%;     float: right;     height: 450px;     display: block; }  .graph2 canvas {     padding: 25px 25px 25px 25px; }   .innertext {     padding-top: 25%;  }  .text1 {     margin-right: 15%;     width: 33%;     float: right;     height: 450px;  }  .text1 p {     text-align: center; }  .text1 hr {     margin: 0 auto;     width: 40%;     text-align: center; }  .text1 h3 {     text-align: center;     color: #636363; }   .text2 {     margin-left: 15%;     width: 33%;     float: left;     height: 450px;  }  .text2 p {     text-align: center; }  .text2 hr {     margin: 0 auto;     width: 40%;     text-align: center; }  .text2 h3 {     text-align: center;     color: #636363; }  .separator1 {     display: block;     margin: 0 auto;     width: 100%;     height: 1000px; }

thanks again willing help!


Comments

Post a Comment

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

-
i having problem, have grid called "gridbasica" , this: thisform.gridbase.recordsource = "sgviemp" sgviemp cursor made executing select sqlserver command sqlexec. when want modify registry, go form , the update there. so, when come form grid, grid isnt grid anymore, big white rectangle. reading around said: delete recordsource , asingt again. thisform.gridbase.recordsource = "" *--i sqlexe here thisform.gridbase.recordsource = "sgviemp" i , works, but, when click button modify again cursos updated modify form doesnt load fields did first time. could me out that? thanks in advance. --------------- edit ------------------ i have been doing recommended: lnselect = select(0) n = sqlexec(thisform.conexion,"select emp_ccodigo codigo, emp_cnombre 'nombre o razon social', emp_cnumrif 'r.i.f' sgviempr","sgviemp1") set echo on suspend select sgviemp zap in sgviemp *-- browse *--zaps correct
Read more

jquery - Set jPicker field to empty value -

-
im using jpicker color selector in form. have clear value set window/icon 'no color selected' state. i've tried following: $(':input[name="color"]').val(''); //access value directly. (does not affect jpicker) 2: $.jpicker.list[0].color.active.val('hex', '', this); //set color black , input value 000000, instead of empty string 3: $.jpicker.list[0].color.active.val(null, '', this); //does nothing none of 3 methods seems behave properly. in advance. this works me :) $.jpicker.list[0].color.active.val('v', null); here example: http://jsfiddle.net/3up7n/
Read more

.htaccess - htaccess convert request to clean url and add slash at the end of the url -

-
ok , searched more 4 days , more 20 posts here in stach or in websites without kind of success first here htaccess file rewriteengine on rewriterule ^([a-za-z0-9_]+)/?$ index.php?page=$1 [nc] rewriterule ^([a-za-z0-9_]+)\/([a-za-z0-9_]+)\/?$ index.php?page=$1&action=$2 [nc] i tried many codes 1 worked me can call request , works me www.example.com/pagename => www.example.com/index.php?page=pagename here questions , please provide me information "in detail" understand code well 1- how convert request automatically www.example.com/index.php?page=pagename www.example.com/pagename 2- if tried add slash @ end shows me page without images or styling mean www.example.com/pagename => works www.example.com/pagename/ => doesn't work that's :) for first part need 301 rule this: rewritecond %{the_request} /index\.php\?page=([^\s&]+) [nc] rewriterule ^ /%1? [r=301,l] for second part use absolute path in css, js, images files r
Read more