How to automatically download png file from highchart when the page load

Question

I'm working on Highchart and it's working fine but now when the page load. I want the png (image file) automatically downloaded. How can I do this?

<?php 
$xcat = array('0-4', '5-9', '10-14', '15-19',
            '20-24', '25-29', '30-34', '35-39', '40-44',
            '45-49', '50-54', '55-59', '60-64', '65-69',
            '70-74', '75-79', '80-84', '85-89', '90-94',
            '95-99', '100 +');
$unit = "age";
$data1 = array("0"=>array("Seriesname"=>"Male","data"=>array("-1746181", "-1884428", "-2089758", "-2222362", "-2537431", "-2507081", "-2443179",
                    "-2664537", "-3556505", "-3680231", "-3143062", "-2721122", "-2229181", "-2227768",
                    "-2176300", "-1329968", "-836804", "-354784", "-90569", "28367", "-3878")),
"1"=>array("Seriesname"=>"Female","data"=>array("1656154", "1787564", "1981671", "2108575", "2403438", "2366003", "2301402", "2519874",
                    "3360596", "3493473", "3050775", "2759560", "2304444", "2426504", "2568938", "1785638",
                    "1447162", "1005011", "330870", "130632", "21208"))
);
echo NegativeBarChart("container2","Testing","Test",$xcat,$unit,$data1);
?>

<div id="container2" style="min-width: 400px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Maybe this help you to [Render Highcharts canvas as a PNG on the page](http://stackoverflow.com/questions/8995177/render-highcharts-canvas-as-a-png-on-the-page) — furas, Jun 07 '13 at 14:08

Sebastian Bochan · Accepted Answer · 2013-06-10T08:46:24.627

1

I advice to familair with exporting options: http://api.highcharts.com/highcharts#exporting.buttons.contextButton.onclick and example http://jsfiddle.net/72E6v/ which introduce how to download chart automatically.

exporting: {
        buttons: {
            contextButton: {
                menuItems: null,
                onclick: function() {
                    this.exportChart();
                }
            }
        }

EDIT: Automatically downloading http://jsfiddle.net/8uDdb/1/

chart: {
        events: {
            load: function () {
                var ch = this;
                setTimeout(function(){
                    ch.exportChart();
                },1);
            }
        }
    },

edited Jun 10 '13 at 08:46

answered Jun 07 '13 at 14:10

Sebastian Bochan

37,348
3
49
75

Dear Sebastian, But it's not downloading automatically. when i clicked on chart context menu then he's able to download the png file. I want when i go to that page highchart automatically download the png file. I think due to your answer I'm just one 0.1 m away from my achievement. Please let me know if you have a solution for me – Tariq Jun 07 '13 at 14:47
Thanks all of you but especially sebastian bochan. It works. i just added the trigger like this and it's working ("#container2 .highcharts-container .highcharts-button").trigger('click'); – Tariq Jun 07 '13 at 16:01
@Tariq Instead of triggering you can use load() event and export function http://jsfiddle.net/8uDdb/1/ – Sebastian Bochan Jun 10 '13 at 08:45
Dear Sebastian Bochan, It's Awesome. I never think like that.. Thank you so much. Another question is that can i export image.png on server's folder insted of downloading it on client system ? – Tariq Jun 11 '13 at 10:18
Unfortunately not, because it is related with security. – Sebastian Bochan Jun 11 '13 at 11:00
Hello, how can i save the chartimage directly on the server with this example [link](http://jsfiddle.net/8uDdb/1) – achillix Nov 13 '14 at 13:42
You need to develop your own solution, which transform SVG (from chart) and save it in your direction. Ask users which use phantomjs or other exporitng tools. – Sebastian Bochan Nov 14 '14 at 10:42

How to automatically download png file from highchart when the page load

1 Answers1