Chart Export to JPG - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

Chart Export to JPG Posts

May 20, 2015 at 10:40 pm Chart Export to JPG #71365

Participant

Hi,

I’m using chart directive <jqx-chart jqx-settings=”chartSettings” jqx-watch=”chartSettings.seriesGroups” style=”width: 850px; height: 500px;”></jqx-chart>

How to export the chart to JPG?

May 21, 2015 at 4:29 am Chart Export to JPG #71370

Peter Stoev

Keymaster

Hi andrecn13,

To export the Chart you should call a method for exporting it as shown in the Chart’s API Documentation and export demos. To invoke a widget method using AngularJS is explained here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm

Best Regards,
Peter Stoev

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

May 21, 2015 at 4:20 pm Chart Export to JPG #71419

andrecn13

Participant

Hi there,

I tried to invoke a widget method to export the chart but return false on the browser console.


  $scope.export = function(){
    console.log($scope.chartConfig);
     $scope.chartConfig.jqxChart('saveAsJPEG', 'myChart.jpeg', 'http://www.jqwidgets.com/export_server/export.php');
  };

I also tried to export a grid and works fine.

$scope.download = function(){
     $scope.settings.jqxGrid('exportdata', 'xls', 'jqxGrid');
 };

Can you show an example how to export the chart?

Thanks!

May 22, 2015 at 6:17 am Chart Export to JPG #71443

Peter Stoev

Keymaster

Hi andrecn13,

Here’s example:

 <!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxChart directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <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/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.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/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {

            var dataAdapter = new $.jqx.dataAdapter( {
                datatype: "csv",
                datafields: [
                    { name: 'Country' },
                    { name: 'GDP' },
                    { name: 'DebtPercent' },
                    { name: 'Debt' }
                ],
                url: '../sampledata/gdp_dept_2010.txt'
            }, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            // prepare jqxChart settings
            $scope.chartSettings = {
                title: "Economic comparison",
                description: "GDP and Debt in 2010",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 50, 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)' }
                            ]
                        }

                    ]
            };

            $scope.export = function () {
                $scope.chartSettings.jqxChart('saveAsJPEG', 'myChart.jpeg', 'http://www.jqwidgets.com/export_server/export.php');
            }
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-chart jqx-settings="chartSettings" jqx-watch="chartSettings.seriesGroups" style="width: 850px; height: 500px;"></jqx-chart>
        <br />
        <jqx-button jqx-on-click="export()">Export to JPEG</jqx-button>
     </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 26, 2015 at 8:22 pm Chart Export to JPG #71592

andrecn13

Participant

Hi Peter,

your example works fine. But if I add a range selector it won´t work. See this example:

http://jsfiddle.net/andrecn13/6c1xgonn/

 categoryAxis: {
          dataField: 'Country',
          showGridLines: true,
          flip: false,
          rangeSelector: {
              size: 100,
              padding: { top: 0, bottom: 0 },
              backgroundColor: 'white',
              dataField: 'Country',
              showGridLines: false
          }
      }

May 27, 2015 at 7:11 am Chart Export to JPG #71613

Peter Stoev

Keymaster

Hi andrecn13,

Ok, thanks for feedback. We will look into that for a future update.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.