Export functionality not working

[phaefeleParticipant]

Hi,

I am trying to get chart export to JPEG working. The chart’s data resides on a web-server that is not accessible to the internet, and am wondering if this is an issue (as the export server is at http://www.jqwidgets.com as per example.) The HTML code I am using is as follows (from a Flask jinja2 template.) Using the Chrome debugger, I do see the code to ‘saveAsJPEG’ called, but no download occurs.)

Thanks
Paul

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Chart{% endblock %}

{% block head %}
{{ super() }}
    <link rel="stylesheet" href="/static/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link href="/static/jqwidgets/styles/jqx.bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/jqwidgets/styles/irwin.css" type="text/css" />
{% endblock %}

{% block scripts %}
{{ super() }}
    <script type="text/javascript" src="/static/scripts/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxchart.rangeselector.js"></script>
    <script type="text/javascript" src="/static/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/static/scripts/utils.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'Date', type: 'date' },
                    {% for algo_id in label_dict.keys() %}
                    { name: '{{algo_id}}' },
                    {% endfor %}
                    ],
                url: '/chart_data/{{data_type}}/{{algo_id_list_url_str}}'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            var toolTipCustomFormatFn = function (value, itemIndex, series, group, categoryValue, categoryAxis) {
                var dataItem = dataAdapter.records[itemIndex];
                return '<DIV style="text-align:left"><b>Date: ' +
                        categoryValue.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                        '</b><br />MTM: ' + dataItem[series.dataField].numberFormat(2) +
                        '<br />AlgoID: ' + series.dataField +
                         '</DIV>';
            };

            // prepare jqxChart settings
            var settings = {
                title: '{{title}}',
                description: '{{sub_title}}',
                enableAnimations: true,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 30, bottom: 5 },
                titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'Date',
                    type: 'date',
                    baseUnit: 'day',
                    labels:
                    {
                        formatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
                        }
                    },
                    rangeSelector: {
                        size: 80,
                        padding: { top: 0, bottom: 0 },
                        backgroundColor: 'white',
                        dataField: {{max_time_range_algo}},
                        baseUnit: 'month',
                        gridLines: { visible: false },
                        serieType: 'area',
                        labels: {
                            formatFunction: function (value) {
                                return months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
                            }
                        }
                    }
                },
                valueAxis:
                {
                    title: { text: '{{y_label}}<br><br>' },
                    labels: { horizontalAlignment: 'right' },
                    formatFunction: function(value) { return value.numberFormat({{y_decimal_places}}); }
                },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            series: [
                                    {% for algo_id, label in label_dict.items() %}
                                        { dataField: '{{algo_id}}', displayText: '{{label}}', lineWidth: 1, lineWidthSelected: 1, lineColor: '{{color_dict[algo_id]}}', fillColor: '{{color_dict[algo_id]}}' },
                                    {% endfor %}

                            ]
                        }
                    ]
            };
            // Show the chart
            $('#chartContainer').jqxChart(settings);

            // Create a jqxMenu
            var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '30px', autoOpenPopup: false, mode: 'popup'});
            // open the context menu when the user presses the mouse right button.
            $("#chartContainer").on('mousedown', function (event) {
                var rightClick = isRightClick(event) || $.jqx.mobile.isTouchDevice();
                if (rightClick) {
                    var scrollTop = $(window).scrollTop();
                    var scrollLeft = $(window).scrollLeft();
                    contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                    return false;
                }
            });

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

            $("#jqxMenu").on('itemclick', function (event) {
                if ($.trim($(args).text()).indexOf("Save as JPEG") >= 0) {
                    $("#chartContainer").jqxChart('saveAsJPEG', 'myChart.jpeg', getExportServer());
                }
            });

            // disable the default browser's context menu.
            $(document).on('contextmenu', function (e) {
                return false;
            });

            function isRightClick(event) {
                var rightclick;
                if (!event) var event = window.event;
                if (event.which) rightclick = (event.which == 3);
                else if (event.button) rightclick = (event.button == 2);
                return rightclick;
            }
        });
    </script>
{% endblock %}
{% block body %}
{{ super() }}

    <!-- This makes the body take up the whole frame. Not sure why putting this in the style block does not work.
    See http://www.jqwidgets.com/fluid-layout-with-fixed-header-and-footer/  -->
    <style type="text/css">
     html, body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    </style>
     <div>
         <div id='chartContainer' style="position: absolute; box-sizing:border-box; -moz-box-sizing:border-box; padding-top: 0px; padding-bottom: 0px; width: 100%; height: 100%;">
         </div>
         <div id='jqxMenu'>
            <ul>
                <li><a href="#">Save as JPEG</a></li>
            </ul>
         </div>
    </div>

{% endblock %}

[DimitarParticipant]

Hi Paul,

Is there any error thrown in your browser’s console why trying to export the chart?

If you are a customer with a Developer or Enterprise license, you will gain access to the file export.php. You may then use it to export charts using your own server.

Best Regards,
Dimitar

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

[phaefeleParticipant]

I do see the following warning:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

Do I need to get access to export.php if the data source is on an internal/non-internet server?

[DimitarParticipant]

Hi phaefele,

The warning is irrelevant in this case.

You need access to export.php, because this is the file that actually creates an image from the chart you are trying to export. You can access it from our server or host it locally if you have a Developer or Enterprise license.

Best Regards,
Dimitar

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

[phaefeleParticipant]

Hi Dimitar,

Thanks for the help. I was able to work out what is wrong. Basically if I remove the rangeSelector on the xAxis in the settings, the export functionality works. Any thoughts on how I can keep the RangeSelector and still have export functionality? I’d be OK with the exported graph not showing the RangeSelector.

Many thanks,
Paul

[DimitarParticipant]

Hi Paul,

Exporting a chart with a range selector to an image is currently supported only if the range selector is rendered outside the chart (with renderTo), e.g.:

<!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/jqxdata.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/jqxchart.rangeselector.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function getExportServer() {
                return 'http://www.jqwidgets.com/export_server/export.php';
            }

            // prepare the data
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'Open' },
                    { name: 'High' },
                    { name: 'Low' },
                    { name: 'Close' },
                    { name: 'Volume' },
                    { name: 'AdjClose' }
                    ],
                url: '../sampledata/TSLA_stockprice.csv'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

            var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                var dataItem = dataAdapter.records[itemIndex];
                return '<DIV style="text-align:left"><b>Date: ' +
                        categoryValue.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                        '</b><br />Open price: $' + dataItem.Open +
                        '</b><br />Close price: $' + dataItem.Close +
                        '</b><br />Daily volume: ' + dataItem.Volume +
                         '</DIV>';
            };

            // prepare jqxChart settings
            var settings = {
                title: "Tesla Motors Stock Price",
                description: "(June 2010 - March 2014)",
                enableAnimations: true,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 30, bottom: 5 },
                titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'Date',
                    minValue: new Date(2012, 0, 1),
                    maxValue: new Date(2013, 11, 31),
                    type: 'date',
                    baseUnit: 'day',
                    labels:
                    {
                        formatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
                        }
                    },
                    rangeSelector: {
                        renderTo: $('#selectorContainer'),
                        size: 80,
                        padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
                        minValue: new Date(2010, 5, 1),
                        backgroundColor: 'white',
                        dataField: 'Close',
                        baseUnit: 'month',
                        gridLines: { visible: false },
                        serieType: 'area',
                        labels: {
                            formatFunction: function (value) {
                                return months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
                            }
                        }
                    }
                },
                valueAxis:
                {
                    title: { text: 'Price per share [USD]<br><br>' },
                    labels: { horizontalAlignment: 'right' }
                },

                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            series: [
                                { dataField: 'Close', displayText: 'Close Price', lineWidth: 1, lineWidthSelected: 1 }
                            ]
                        }

                    ]
            };

            $('#chartContainer').jqxChart(settings).
                on('rangeSelectionChanging', function (event) {
                    var args = event.args;
                    args.instance.description = args.minValue.getFullYear() + " - " + args.maxValue.getFullYear();
                });

            $("#jpegButton").click(function () {
                // call the export server to create a JPEG image
                $('#chartContainer').jqxChart('saveAsJPEG', 'myChart.jpeg', getExportServer());
            });
        });
    </script>
</head>
<body class='default'>
    <div>
        <div id='chartContainer' style="width: 800px; height: 500px;">
        </div>
        <!-- you can optionally render the selecor in this container -->
        <div id='selectorContainer' style="width: 800px; height: 100px;">
        </div>
    </div>
    <input style='float: left;' id="jpegButton" type="button" value="Save As JPEG" />
</body>
</html>

Best Regards,
Dimitar

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

[Author]

Posts