Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" />

    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/globalize.culture.zh-TW.js"></script>
</head>
<body>

    <div id="qcchart" style="width:800px; height: 500px;"></div>
    <div>
        <input type="button" class="btn btn-primary m-2" id="btnExport" value="Export" />
    </div>

    <script>
        $(document).ready(function(){

            InitChart();

            $("#btnExport").on("click", function(){
                $('#qcchart').jqxChart('saveAsJPEG', 'myChart.jpeg', getExportServer());
            });

        });

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

        function InitChart() {
            // prepare data source
            var chartData = [
                { Country: 'Luxembourg', GDP: 81278.63, DebtPercent: 16.2, Debt: 13167.13806 },
                { Country: 'Singapore', GDP: 57596.47, DebtPercent: 102.4, Debt: 58978.78528 },
                { Country: 'Norway', GDP: 53285.21, DebtPercent: 47.7, Debt: 25417.04517 },
                { Country: 'USA', GDP: 45759.46, DebtPercent: 58.9, Debt: 26952.32194 },
                { Country: 'Austria', GDP: 39269.33, DebtPercent: 70.4, Debt: 27645.60832 },
                { Country: 'Germany', GDP: 34065.12, DebtPercent: 78.8, Debt: 26843.31456 },
                { Country: 'Canada', GDP: 38065.13, DebtPercent: 34, Debt: 12942.1442 },
            ];

            // 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: chartData,
                xAxis:
                {
                    dataField: 'Country'
                },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            valueAxis:
                            {
                                unitInterval: 5000,
                                title: { text: 'GDP & Debt per Capita($)<br>' }
                            },
                            series: [
                                    { dataField: 'GDP', displayText: 'GDP per Capita' },
                                    { dataField: 'Debt', displayText: 'Debt per Capita' }
                                ]
                        },
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 10,
                                title: { text: 'Debt (% of GDP)<br>' },
                                position: 'right',
                                gridLines: { visible: false }
                            },
                            series: [
                                { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
                            ],
                            // annotations: [
                            //     {
                            //         type: "rect",
                            //         yValue: 90,
                            //         xValue: 2,
                            //         offset: { x: 5, y: -10 },
                            //         fillColor: "#FEFEFE",
                            //         lineColor: "#FEFEFE",
                            //         text: {
                            //             value: "Test Annotations",
                            //             offset: { x: 2, y: 2 },
                            //             class: "blueLabel",
                            //             angle: 0
                            //         }
                            //     },
                            // ]
                        }
                    ]
            };
            // setup the chart
            $('#qcchart').jqxChart(settings);
        }

    </script>

</body>
</html>