How to export the whole page or html content with Highcharts not just the chart?

Question

hi all my chart is exporting fine with highcharts i m getting the chart for my php project

but the problem is

that i am looking to import html content or the whole page along with the chart not just the chart

is it possible to do ??

can any one help me

or show here is a sample fiddle http://jsfiddle.net/YBXdq/

i need to export the text below the chart has well

Solution 1

i found a simple workaround for exporting charts (printing)

and

i didn't use any plugin just little plain old css and some javascript

which in my case is

i wanted to print the chart with some specific html content of the page

or in my case i wanted to remove header , footer and left menu

i dint wanted to show buttons or unecessary content

and just show the page content , description table and chart

so here is i how i achieved it.

> CSS :-

---

<style type="text/css">
@media print{
@page
        {
            size: auto;   /* auto is the initial value */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }
  body{ background-color:#FFFFFF; background-image:none; color:#000000 }
  .navimainbg{ display:none;}
  .printhide{ display:none;}
  .usercontent-footer{ display:none;}
  .linkBTN{ display:none;}
  .userheader{ display:none;}
  .user-profile-left{ display:none;}
  #userbgcontent{ width:100%;}
}
</style>

We are focussing on the print css here which we implied when the page is printed

acess the divs or portions of the page which you dont want ot be printed via their class or id depending upon your usage

for example

i didnt wanted to display the button

 .linkBTN{ display:none;}

which can be simply called via javascript.

Javascript :->

---

<script type="text/javascript">


function printpage()
{
     
window.print()
}

<script type="text/javascript">

we can invoke the print function to print the page minus elements we dont want to print with the page via click of a button by calling function in my case "printpage" as you can see this button will also not display while printing as printhide class display is set to none while priting

<input title="Print a Printer Friendly Page" class ="printhide" type="button" value="Print this page" onclick="printpage()">

isnt is it a simple way to print chart other than highcharts printing if you want to print more

only con is that sometime the image will slide down when you want to show it along with some conetent due to lack of size to render an image . it will shift to next page . other than its tested working .

Solution 2

There are so many direct and indirect way to achieve this

• Use HTML Canvas : http://html2canvas.hertzen.com/

• Using wkhtmltoimage

Example

  exec('wkhtmltoimage --quality 50 http://www.bbc.com bbc.jpg');

• Using wkhtmltopdf + ImageMagic

  -- Convert the web page to pdf using wkhtmltopdf

  -- Convert pdf to jpg using ImageMagic

Example

exec("convert a.pdf a.jpg");

• Use PHP imagegrabwindow and imagegrabscreen

Example

$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->Navigate("http://localhost");

/* Still working? */
while ($browser->Busy) {
    com_message_pump(4000);
}
$im = imagegrabwindow($handle, 0);
$browser->Quit();

header("Content-Type: image/png");
imagepng($im);
imagedestroy($im);

Advance Examples

-- Also See Get Website Screenshots Using PHP

For Possible Issues : Getting imagegrabscreen to work

• use Webshort and call it from php using exec if you have python installed

Example

exec("python webshot.py https://example.com/webshot/php example.png");

• Download and use Website Thumbnail Generator

Example

webthumb.php?url=http://www.google.com&x=150&y=150

• Use boxcutter

Example

exec('boxcutter -f image.png');

• Capture Screenshots in PHP with GrabzIt

Example

$grabzIt = new GrabzItClient("APPLICATION KEY", "APPLICATION SECRET");
$id = $grabzIt->TakePicture("http://www.google.com", "http://www.example.com/GrabzItHandler.php");

• using wimg.ca

Example with this current page

  http://wimg.ca/https://stackoverflow.com/questions/10328457/how-to-export-the-whole-page-or-html-content-with-highcharts-not-just-the-chart/10330701#10330701

• TimThumb – PHP Image Resizer

Example

 timthumb.php?src=http://www.google.com/&webshot=1

I think have given more than enough example

Comments

[Rinzler]

thank you so much for your time and reply can you show me a working demo has am a newbie :)

[Justin Dominic]

@Baba well we have a linux server and am opening the chart with html content in an iframe will this method work ??

[Baba]

@Rinzle ... all the example i gave has links which lead to a demo

[Baba]

@ Justin Dominic every other one would work for you except example C which only works on windows

[Rinzler]

@Baba is it possible we can insert our html content in to the highcharts function ?? can any one show that on fiddle

[Baba]

Sorry don't know much about fiddle but if you have any problem still capturing the thumb let me know