Export more chart with one button - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, chart, delay, export, export server, jqxChart, multiple, save, save as, saveAsJPEG, saveAsPNG, setTimeout, timeout

This topic contains 7 replies, has 2 voices, and was last updated by Dimitar 9 years, 9 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Export more chart with one button Posts

December 9, 2014 at 12:56 pm Export more chart with one button #63955

LeoSquall

Participant

Hi,

can I make the export of a two or more chart with the function export (like in the exmaples)?
I have five charts and now I realized the export of all of them with a button for evey chart. I need to have only one button and I want to export all the charts once for all.
Thanks

December 9, 2014 at 1:15 pm Export more chart with one button #63957

Dimitar

Participant

Hello LeoSquall,

You can call all charts’ export functions in a single button click handler, i.e.:

function getExportServer() {
    return 'http://www.jqwidgets.com/export_server/export.php';
}

$("#pngButton").click(function() {
    $('#chart1').jqxChart('saveAsPNG', 'myChart.png', getExportServer());
    $('#chart2').jqxChart('saveAsPNG', 'myChart.png', getExportServer());
    $('#chart3').jqxChart('saveAsPNG', 'myChart.png', getExportServer());
    $('#chart4').jqxChart('saveAsPNG', 'myChart.png', getExportServer());
    $('#chart5').jqxChart('saveAsPNG', 'myChart.png', getExportServer());
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

December 9, 2014 at 1:32 pm Export more chart with one button #63959

LeoSquall

Participant

Hi,

I tried this way but the function will export only the last chart i define in the function.
here is my solution that i’ve copied from your tip:
$(document).ready(function () {

//funzione che consente il downolad del Chart in formato immagine
function getExportServer() {
return ‘http://www.jqwidgets.com/export_server/export.php’;
}
//Esportazione del grafico in PNG
//$(“#pngAllPages”).jqxButton({});
$(“#pngAllPages”).click(function () {
$(‘#Row1Chart1’).jqxChart(‘saveAsPNG’, ‘Grafici.png’, getExportServer());
$(‘#Row1Chart2’).jqxChart(‘saveAsPNG’, ‘Grafici.png’, getExportServer());
$(‘#Row2Chart1’).jqxChart(‘saveAsPNG’, ‘Grafici.png’, getExportServer());
$(‘#Row2Chart2’).jqxChart(‘saveAsPNG’, ‘Grafici.png’, getExportServer());
$(‘#Row3Chart1’).jqxChart(‘saveAsPNG’, ‘Grafici.png’, getExportServer());
});

});

December 10, 2014 at 7:52 am Export more chart with one button #63998

Dimitar

Participant

Hi LeoSquall,

You would have to set a timeout between the export of each chart, e.g.:

$("#pngButton").click(function () {
    $('#chartContainer1').jqxChart('saveAsPNG', 'myChart1.png', getExportServer());
    setTimeout(function () {
        $('#chartContainer2').jqxChart('saveAsPNG', 'myChart2.png', getExportServer());
    }, 3000);
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

December 11, 2014 at 2:27 pm Export more chart with one button #64121

LeoSquall

Participant

Hi,

I used your method with timeout but if I use 3 or more charts the code export the first and the last. I also tried with different time values without success… Here the code I used in my project :

$(document).ready(function () {

function getExportServer() {
return ‘http://www.jqwidgets.com/export_server/export.php’;
}

$(“#pngAllPages”).jqxButton({});
$(“#pngAllPages”).click(function () {
$(‘#Chart1’).jqxChart(‘saveAsPNG’, ‘Chart1.png’, getExportServer());
setTimeout(function () {
$(‘#Chart2’).jqxChart(‘saveAsPNG’, ‘Chart2.png’, getExportServer());
}, 500);
setTimeout(function () {
$(‘#Chart3’).jqxChart(‘saveAsPNG’, ‘Chart3.png’, getExportServer());
}, 1000);
setTimeout(function () {
$(‘#Chart4’).jqxChart(‘saveAsPNG’, ‘Chart4.png’, getExportServer());
}, 1500);
setTimeout(function () {
$(‘#Chart5’).jqxChart(‘saveAsPNG’, ‘Chart5.png’, getExportServer());
}, 2000);
});
});

Thanks

December 12, 2014 at 7:05 am Export more chart with one button #64136

Dimitar

Participant

Hi LeoSquall,

We suggest you increase each timeout delay to at least 3 seconds (3000). Here is the example we tested which shows how to export three charts successfully:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array            
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Country' },
                    { name: 'GDP' },
                    { name: 'DebtPercent' },
                    { name: 'Debt' }
                ],
                url: '../sampledata/gdp_dept_2010.txt'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            // prepare jqxChart settings
            var settings = {
                title: "Economic comparison",
                description: "GDP and Debt in 2010",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'Country',
                        showGridLines: true
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            valueAxis:
                            {
                                unitInterval: 5000,
                                displayValueAxis: true,
                                description: 'GDP & Debt per Capita($)'
                            },
                            series: [
                                    { dataField: 'GDP', displayText: 'GDP per Capita' },
                                    { dataField: 'Debt', displayText: 'Debt per Capita' }
                                ]
                        },
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 10,
                                displayValueAxis: false,
                                description: 'Debt (% of GDP)'
                            },
                            series: [
                                    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
                                ]
                        }

                    ]
            };

            // setup the chart
            $('#chart1').jqxChart(settings);
            $('#chart2').jqxChart(settings);
            $('#chart3').jqxChart(settings);

            function getExportServer() {
                return 'http://www.jqwidgets.com/export_server/export.php';
            }

            $("#pngButton").click(function () {
                $('#chart1').jqxChart('saveAsPNG', 'myChart.png', getExportServer());
                setTimeout(function () {
                    $('#chart2').jqxChart('saveAsPNG', 'myChart2.png', getExportServer());
                }, 3000);
                setTimeout(function () {
                    $('#chart3').jqxChart('saveAsPNG', 'myChart3.png', getExportServer());
                }, 6000);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='chart1' style="width: 850px; height: 500px; margin-bottom: 20px;">
    </div>
    <div id='chart2' style="width: 850px; height: 500px; margin-bottom: 20px;">
    </div>
    <div id='chart3' style="width: 850px; height: 500px; margin-bottom: 20px;">
    </div>
    <button id="pngButton">
        Export</button>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

December 12, 2014 at 9:47 am Export more chart with one button #64141

LeoSquall

Participant

I used a high time values in the timeout and it work. I don’t know why but now with this time values it finally work:
Chart1: —
Chart2: 3000
Chart3: 6000
Chart4: 12000
Chart5: 15000

if I used a lesser values 1 of the charts will be lost during the process. Can you verify please?

Thanks for your help

December 12, 2014 at 9:50 am Export more chart with one button #64142

Dimitar

Participant

Hi LeoSquall,

Yes, a larger delay (about 3 seconds) has to be set to avoid simultaneous requests to the export server.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.