Waiting for javascript chart to finish loading before take screenshoot

T. Ho

unread,

Nov 12, 2012, 4:19:43 AM11/12/12

to casp...@googlegroups.com

Hello all,

In my java application I want to use CasperJS to take screenshoot of javascript chart (on server side) then post the picture back to java application server. And my problem is I don't know when a javascript chart is finished to load before it executes a sreenshoot.

Here is my js:

phantom.casperPath = 'D:/Codebases/casperjs';
phantom.injectJs(phantom.casperPath + '/bin/bootstrap.js');

var casper = require('casper').create({
verbose: true,
logLevel: "debug"
});

casper.start(casper.cli.get(0));

casper.waitFor(function check() {
    return this.evaluate(function() {
        // what do I check here?
    });
}, function then() {
var pic = this.captureBase64('png');

casper.open('http://localhost:8080/stream', {
  method: 'post',
  data: {
   'stream': pic
  }
});
});

What do I check in side evaluate function?

Thank you in advanced

T. Ho

Nicolas Perriault

unread,

Nov 12, 2012, 4:49:14 AM11/12/12

to casp...@googlegroups.com

On Mon, Nov 12, 2012 at 10:19 AM, T. Ho <hot...@gmail.com> wrote:

> // what do I check here?

How do you you want we know that if we don't even have sample code to see? :)

++

--
Nicolas Perriault
https://nicolas.perriault.net/
Phone: +33 (0) 660 92 08 67

T. Ho

unread,

Nov 12, 2012, 5:05:42 AM11/12/12

to casp...@googlegroups.com, nic...@perriault.net

Hi

I have a DIV with id = "container" and here is my code inside evaluate function:

var contain= document.getElementById ("container");
return contain.querySelectorAll('svg').length > 2;

Thank

T. Ho

Nicolas Perriault

unread,

Nov 12, 2012, 6:22:18 AM11/12/12

to casp...@googlegroups.com

On Mon, Nov 12, 2012 at 11:05 AM, T. Ho <hot...@gmail.com> wrote:

> I have a DIV with id = "container" and here is my code inside evaluate
> function:
>
> var contain= document.getElementById ("container");
> return contain.querySelectorAll('svg').length > 2;

I meant the whole graphics code

T. Ho

unread,

Nov 12, 2012, 6:30:08 AM11/12/12

to casp...@googlegroups.com, nic...@perriault.net

Hi Nicolas,

Sorry for my misunderstand, and here is my graphics code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8;application/x-javascript"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type='text/javascript'>
  $(function () {
      var chart;
      $(document).ready(function() {

          // Radialize the colors
          Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
              return {
                  radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                  stops: [
                      [0, color],
                      [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                  ]
              };
          });

          // Build the chart
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container',
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  plotShadow: false,
                  heigh: 400,
                  width: 600
              },
              title: {
                  text: 'Browser market shares at a specific website, 2010'
              },
              tooltip: {
                  pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                  percentageDecimals: 1
              },
              plotOptions: {
                  pie: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      dataLabels: {
                          enabled: true,
                          color: '#000000',
                          connectorColor: '#000000',
                          formatter: function() {
                              return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                          }
                      }
                  }
              },
              series: [{
                  type: 'pie',
                  name: 'Browser share',
                  data: [
                      ['Firefox',   45.0],
                      ['IE',       26.8],
                      {
                          name: 'Chrome',
                          y: 12.8,
                          sliced: true,
                          selected: true
                      },
                      ['Safari',    8.5],
                      ['Opera',     6.2],
                      ['Others',   0.7]
                  ]
              }]
          });
      });

  });
</script>
</head>
<body>
<div id="container" style="height: 300px"></div>
</body>
</html>