jQWidgets Forums

Tagged: JQXChart ExtJS Relative Absolute

This topic contains 3 replies, has 2 voices, and was last updated by ivailo 10 years, 1 month ago.

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

Author

Range Selector Absolute Positioning Posts

May 4, 2015 at 3:29 pm Range Selector Absolute Positioning #70604

Participant

Are there any plans to change the use of the Absolute Positioning used to draw the Range Selector to Relative Positioning? As it is, embedding JQXChart in a container that already uses relative positioning seems to cause the Range Selector to draw in an incorrect position. This behavior makes it appear impossible to use JQXChart with a library like ExtJS which makes heavy use of relative positioning with it’s widget dashboard.

May 5, 2015 at 5:39 am Range Selector Absolute Positioning #70624

ivailo

Participant

Hi dragontounge,

If you want Relative Positioning, you can use a separate div about rendering of the Range Selector. You can use renderTo: $('#selectorContainer'),.

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Range Selector Example</title>
    <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 () {
            // 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) {
                return 'Index: ' + itemIndex + ", Value: " + value;
            };
            // prepare jqxChart settings
            var settings = {
                title: "Range selector with regular x-axis",
                description: "In this example the range selector works with (non-date) axis",
                enableAnimations: true,
                showLegend: false,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 20, bottom: 5 },
                colorScheme: 'scheme02',
                source: dataAdapter,
                xAxis:
                    {
                        minValue: 175,
                        maxValue: 550,
                        flip: false,
                        valuesOnTicks: true,
                        rangeSelector: {
                            serieType: 'area',
                            padding: { /*left: 0, right: 0,*/ top: 20, bottom: 0 },
                            // Uncomment the line below to render the selector in a separate container
                            renderTo: $('#selectorContainer'),
                            backgroundColor: 'white',
                            size: 110,
                            gridLines: { visible: false },
                        }
                    },
                seriesGroups:
                    [
                        {
                            type: 'line',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                flip: false,
                                title: { text: 'Value<br><br>' }
                            },
                            series: [
                                { dataField: 'Close', lineWidth: 1, lineWidthSelected: 1 }
                            ]
                        }
                    ]
            };
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <p>
        <div id='chartContainer' style="width:800px; height:500px;">
        </div>
    </p>
    <p>
        <!-- you can optionally render the selecor in this container -->
        <div id='selectorContainer' style="width:500px; height:100px; margin-top:200px;">
        </div>
    </p>
</body>
</html>

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

May 5, 2015 at 3:12 pm Range Selector Absolute Positioning #70675

dragontounge

Participant

Ivailo,

Thank you for your response. Unfortunately, I’ve tried that approach as well and it doesn’t seem to work either. The object here is to get JQXChart to work WITHIN a library like ExtJS – while JQXChart works very well by itself, as your example shows, it doesn’t seem to play nicely with containing libraries. Other problems also occur when loading a JQXChart within a ExtJS Panel such as 1) if gradient colors are used all fills appear black and the only solution I’ve found is to use solid colors, 2) formatting around the tooltip (borders, margins, backgrounds) all disappear, 3) and JQXChart doesn’t seem to understand/respect the container’s dimensions which makes it impossible to use something like “height:100%”. Also, an undesirable side effect of using a separate container for the selector is that you lose the automatic positioning of the legend to below the Selector (and while you might be able to fake the positioning by using a large top margin on the legend you would still need to position the Selector container relatively, which creates a problem, and you lose the nice automatic size/position adjustments when the frame changes sizes).

So, is it possible to get the Selector positioned inside JQXChart using relative values (like the legend is) rather than the absolute values being used now, or, do you have any future plans to do so, and if so, when would it be available.

Thank you

May 7, 2015 at 5:34 am Range Selector Absolute Positioning #70753

ivailo

Participant

Hi dragontounge,

Currently this option is not possible, and we don’t have plans to include it in the package.
Also we don’t have experience with ExtJS and don’t offer integration about this framework.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.