jQuery UI Widgets Forums Chart Export functionality not working

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Export functionality not working #74888

    phaefele
    Participant

    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 %}
    • This topic was modified 8 years, 6 months ago by  phaefele.
    • This topic was modified 8 years, 6 months ago by  phaefele.
    • This topic was modified 8 years, 6 months ago by  phaefele.
    • This topic was modified 8 years, 6 months ago by  phaefele.
    Export functionality not working #74908

    Dimitar
    Participant

    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/

    Export functionality not working #74927

    phaefele
    Participant

    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?

    Export functionality not working #74951

    Dimitar
    Participant

    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/

    Export functionality not working #75012

    phaefele
    Participant

    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

    Export functionality not working #75134

    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.