pChart 2.0 online documentation

Delayed rendering

As the pChart library will include additional CPU load on your web fronted (assuming that your are rendering the pictures each time a visitor open the page), we‘ve created a javascript framework that allows you to trigger the picture rendering only if the picture element is displayed in the user browser. This feature can be really useful if you have long pages with multiple charts and want to reduce the frontend CPU peak generated by the client browser.

You‘ll find a live example of the feature in the examples/delayedLoader folder of the pChart library.

Script philosophy

To use this script, the JavaScript interpreter must be activated in the user web browser (this should be the case on todays web browsers). If Javascript isn‘t enabled, the pictures will appears as an HTML link and the user will need to click on it to see it. All the delayed pictures should be created as a <A> HTML element :

 <a class=‘pChart‘ href=‘draw.php?Seed=1‘ data-pchart-alt=‘Picture1‘ data-pchart-width=‘700‘ data-pchart-height=‘230‘>Picture 1</a>

The script will use the <A> class name to determine if it has to attach the delayed loader event to it. By default the class is named "pChart" and can only be applied to <A> elements. The following parameters can be passed :

href is the path to the pChart script that will render the picture.

data-pchart-alt is an alternate text that will be attached to the picture.

data-pchart-width is the width of the picture that will be rendered.

data-pchart-height is the height of the picture that will be rendered.

Only the href parameter is mandatory.

A callback is attached to the window.onscroll() event. When the user is scrolling down the page, this function is checking all the "pChart" objects, if one appears to be in the viewable area of the user browser it triggers the rendering event. I‘ve added some cosmetics including a waiting picture and some shade-in shade-out effects.

Script installation

You‘ll have to place the delayedLoading.js and wait.gif at a place where they can be accessed by the users. (Those files are in the pChart package) In the HEAD section of your HTML file, add the JS file inclusion and the optional declaration of the CSS "pChart" class :

<head>
  <script src=‘delayedLoading.js‘ type="text/javascript"></script>
  <style>
     a.pChart { text-decoration: none; color: #6A6A6A; }
  </style>
</head>

In the BODY tag of your HTML page, attach the javascript events :

<body onscroll="scrollEvent();" onload="loaderInit();">

..then you just have to define your pictures :

 <a class=‘pChart‘ href=‘draw.php?Seed=1‘ data-pchart-alt=‘Picture1‘ data-pchart-width=‘700‘ data-pchart-height=‘230‘>Picture 1</a>

 ..some text..

 <a class=‘pChart‘ href=‘draw.php?Seed=2‘ data-pchart-alt=‘Picture2‘ data-pchart-width=‘700‘ data-pchart-height=‘230‘>Picture 2</a>

 ..some text..

 <a class=‘pChart‘ href=‘draw.php?Seed=3‘ data-pchart-alt=‘Picture3‘ data-pchart-width=‘700‘ data-pchart-height=‘230‘>Picture 3</a>

If you want to replace the loading picture, default width/height/alt, just edit the javascript file and modify the relevant global variable.

Last updated on 12/10/2010
by Jean-Damien