jQuery UI Widgets Forums Chart RangeSelector out of position

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • RangeSelector out of position #75360

    sonicviz
    Participant

    Not sure what’s going on here?
    This is dynamically generated code inside a wordpress plugin.

                var trendsource = {
                    datatype: \"json\",
                    datafields: [{
                        name: 'Date', type: 'date', format: 'yyyy-MM-dd'
                    }, {
                        name: 'Weight', type: 'float'
                    }],
                    localdata: data
                };
    
                var trenddataAdapter = new jQuery.jqx.dataAdapter(trendsource, {
                    async: false,
                    loadComplete: function (records) { },
                    autoBind: true,
                    loadError: function (xhr, status, error) {
                        alert('Error loading \"' + source.url + '\" : ' + error);
                    }
                });                
                // prepare jqxChart settings
                var settings = {
                    title: \"Weight\",
                    description: \"Weight difference\",
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: trenddataAdapter,
                    xAxis:
                    {
                        dataField: 'Date',
                        type: 'date',
                        baseUnit: 'day',
    //                    formatFunction: function (value) {
    //                        var date = new Date(value);
    //                        return  date.getDate() + \"-\" + date.getMonth();
    //                    },
                        valuesOnTicks: true,
                        tickMarks: {
                            visible: true,
                            step: 1,
                            color: '#888888'
                        },  
                        unitInterval: 7,
                        gridLines: {
                            visible: false,
                            interval: 1,
                            color: '#BCBCBC'
                        },
                        rangeSelector: {
                            size: 80,
                            //padding: { /*left: 10, right: 90,*/ top: 0, bottom: 0 },
                            backgroundColor: 'transparent',
                            dataField: 'Date',
                            baseUnit: 'day',
                            gridLines: { visible: false },
                            serieType: 'area'
                        }                    
                    },
                    valueAxis:
                    {
                        minValue: -10,
                        maxValue: 10,
                        unitInterval: 2,
                        title: {text: 'Weight Difference'},
                        gridLines : {visible: false},   
                        labels:
                        {
                            horizontalAlignment: 'right',
                            formatSettings:
                            {
                                decimalPlaces: 1
                            }
                        }
                    },                
                    colorScheme: 'scheme01',
                    seriesGroups:
                    [
                        {
                            type: 'line', 
                            toolTipFormatFunction: function(value, itemIndex, serie, group, xAxisValue, xAxis) {
                                var date = new Date(xAxisValue);
                                var formattedTooltip = \"<div\" + \" style=\" + \"'width:80px; height:40px'\" + \">\" + 
                                    \"<b>Day: </b>\" + date.getDate() + \"</br>\" +
                                    \"<b>Value: </b>\" + value + \"</br>\" +
                                    \"</div >\";
                                return formattedTooltip;
                            }, 
                            series: [
                                    { dataField: 'Weight', displayText: 'Weight'}
                                ]
                        }
                    ]
                };
                
                // select the chartContainer DIV element and render the chart.
                jQuery ('#chartContainer').jqxChart(settings);
            });
        </script>";

    I took the range selector code for this from http://www.jqwidgets.com/community/topic/chart-rangeselector-does-not-align-proper/

    • This topic was modified 8 years, 6 months ago by  sonicviz.
    • This topic was modified 8 years, 6 months ago by  sonicviz.
    RangeSelector out of position #75372

    Dimitar
    Participant

    Hi sonicviz,

    Does this occur if you run this code on its own (not in WordPress)?

    As a solution, you can try displaying the chart’s range selector in a separate div by setting the renderTo property (the commented line in the demo Date/time x-axis range selection). Please also make sure you are using the latest version of jQWidgets (3.8.2).

    Best Regards,
    Dimitar

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

    RangeSelector out of position #75381

    sonicviz
    Participant

    Hi,

    >>Does this occur if you run this code on its own (not in WordPress)?
    I don’t know. I’m a bit busy to check at the moment as I’m on a timeline.

    I’m on 3.8.2 and running it in a separate div doesn’t solve it.

    Cheers,
    Paul

    RangeSelector out of position #75382

    Dimitar
    Participant

    Hi Paul,

    Could you, please, share some sample data so that we will be able to test your example locally and determine what causes the issue?

    Best Regards,
    Dimitar

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

    RangeSelector out of position #75391

    sonicviz
    Participant

    Sure. This is dynamically generated from php.

    It is part of a rather long dynamically generated html/jquery page which is viewed as jqxtabs, so the issue may be due to a conflict with some other JQ widget perhaps? If you know what might cause that maybe I can look out for it?

    Tomorrow I’ll be optimizing it with tabs loading the views separately (as you suggest in a couple of threads) so I’ll try it again then to see if it makes a difference.

    Starting to get the hang of JQX now, will pick up the license soon. ty!

            jQuery(document).ready(function () {
                // prepare chart data             
     		var data = [{Date: "2015-07-01",Weight:175.00},{Date: "2015-07-11",Weight:173.50},{Date: "2015-07-17",Weight:174.00},{Date: "2015-07-18",Weight:174.00},{Date: "2015-07-23",Weight:176.00},{Date: "2015-07-25",Weight:175.00},{Date: "2015-07-26",Weight:175.99},{Date: "2015-07-28",Weight:174.00},{Date: "2015-08-01",Weight:175.00},{Date: "2015-08-11",Weight:173.50},{Date: "2015-08-17",Weight:174.00},{Date: "2015-08-18",Weight:174.00},{Date: "2015-08-23",Weight:176.00},{Date: "2015-08-25",Weight:175.00},{Date: "2015-08-26",Weight:175.99},{Date: "2015-08-28",Weight:174.00}];
                var trendsource = {
                    datatype: "json",
                    datafields: [{
                        name: 'Date', type: 'date', format: 'yyyy-MM-dd'
                    }, {
                        name: 'Weight', type: 'float'
                    }],
                    localdata: data
                };
    
                var trenddataAdapter = new jQuery.jqx.dataAdapter(trendsource, {
                    async: false,
                    loadComplete: function (records) { },
                    autoBind: true,
                    loadError: function (xhr, status, error) {
                        alert('Error loading "' + source.url + '" : ' + error);
                    }
                });                
                // prepare jqxChart settings
                var settings = {
                    title: "Weight",
                    description: "Weight in lbs",
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: trenddataAdapter,
                    xAxis:
                    {
                        dataField: 'Date',
                        type: 'date',
                        baseUnit: 'day',
    //                    formatFunction: function (value) {
    //                        var date = new Date(value);
    //                        return  date.getDate() + "-" + date.getMonth();
    //                    },
                        valuesOnTicks: true,
                        tickMarks: {
                            visible: true,
                            step: 1,
                            color: '#888888'
                        },  
                        unitInterval: 10,
                        gridLines: {
                            visible: false,
                            interval: 1,
                            color: '#BCBCBC'
                        }
    //                    rangeSelector: {
    //                        size: 80,
    //                        //padding: { /*left: 10, right: 90,*/ top: 0, bottom: 0 },
    //                        backgroundColor: 'transparent',
    //                        dataField: 'Date',
    //                        baseUnit: 'day',
    //                        gridLines: { visible: false },
    //                        serieType: 'area'
    //                    }                    
                    },
                    valueAxis:
                    {
                        minValue: 172.5,
                        maxValue: 177,
                        unitInterval: 1,
                        title: {text: 'Weight in lbs'},
                        gridLines : {visible: false},   
                        labels:
                        {
                            horizontalAlignment: 'right',
                            formatSettings:
                            {
                                decimalPlaces: 1
                            }
                        }
                    },                
                    colorScheme: 'scheme01',
                    seriesGroups:
                    [
                        {
                            type: 'line', 
                            toolTipFormatFunction: function(value, itemIndex, serie, group, xAxisValue, xAxis) {
                                var date = new Date(xAxisValue);
                                var formattedTooltip = "<div" + " style=" + "'width:100px; height:40px'" + ">" + 
                                    "<b>Day: </b>" + date.getDate() + "</br>" +
                                    "<b>Value: </b>" + value + "</br>" +
                                    "</div >";
                                return formattedTooltip;
                            }, 
                            series: [
                                    { dataField: 'Weight', displayText: 'Weight'}
                                ]
                        }
                    ]
                };
                
                // select the chartContainer DIV element and render the chart.
                jQuery ('#chartContainer').jqxChart(settings);
            });
    
    • This reply was modified 8 years, 5 months ago by  sonicviz.
    • This reply was modified 8 years, 5 months ago by  sonicviz.
    RangeSelector out of position #75394

    sonicviz
    Participant

    The value axis min/max is also dynamically adjusted based on min/max data values so the graph shows up better.

    RangeSelector out of position #75398

    Dimitar
    Participant

    Hi Paul,

    The chart and its range selector are plotted correctly when testing your example locally (image). If the jqxChart is displayed in jqxTabs, please make sure you initialize it in the jqxTabs initTabContent callback function (demo).

    Best Regards,
    Dimitar

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

    RangeSelector out of position #75474

    sonicviz
    Participant

    Hi,
    I’m trying out the initTabContent but getting very weird behavior.

    If I switch to another tab then back to tab 4 it remains blank but now the content element block is gone
    <div class="jqx-tabs-titleContentWrapper jqx-disableselect" style="float: left; margin-top: -0.5px;">Charts</div>

    2. If I switch to another tab (eg 5) then reload the page THEN switch to tab 4 the “initWidgets” appears correctly
    <div id="tab-charts" role="tabpanel" class="jqx-tabs-content-element jqx-tabs-content-element-web jqx-rc-b jqx-rc-b-web" style="display: block;">initWidgets</div>

    But: I need use case 1 to work, the tab needs to be populated even when it is preselected. That’s just common UX expectations.

    What am I doing wrong. I need this to work before I replace the “initWidgets” test with my ajax chart population code.

    The code:

            $html .= "<script>
    		jQuery( document ).ready(function( $ ) {
                        var initChart1 = function () {
                           $('#jqxTabs').jqxTabs('setContentAt', 4, '$chartsView');
                        }                
                        // init tab widgets.
                        var initWidgets = function (tab) {
                            switch (tab) {
                                case 0:
                                    break;
                                case 1:
                                    break;
                                case 2:
                                    break;
                                case 3:
                                    break;
                                case 4:
                                    $('#jqxTabs').jqxTabs('setContentAt', 4, 'initWidgets');
                                    break;
                                case 5:
                                    break;  
                                case 6:
                                    break;                              
                            }
                        }
                        var index = $.jqx.cookie.cookie(\"jqxTabs_jqxWidget\");
                        if (undefined == index) index = 0;
                        $ ( '#jqxTabs' ).jqxTabs({ 
                            theme: \"web\", 
                            selectedItem: index, 
                            height: \"100%\", 
                            width: \"100%\",
                            initTabContent: initWidgets
                            });
                        $ ('#jqxTabs').on('selected', function (event) { selectedTab = event.args.item;
                                $.jqx.cookie.cookie(\"jqxTabs_jqxWidget\", event.args.item);
                          });
                    });
       		</script>
     		";

    plus

            $html .= "<div id=\"jqxTabs\">
                            <ul>
                                <li>Compliance</a></li>
                                <li>Measure</a></li>
                                <li>Plan</a></li>  
                                <li>Target</a></li>  
                                <li>Charts</a></li>
                                <li>History</a></li>
                                <li>Settings</a></li>                       
                            </ul>
                            <div id=\"tab-compliance\">
                                <p>$complianceView</p>
                            </div>
                            <div id=\"tab-data-entry\">
                                <p>$entryView</p>
                            </div>
                            <div id=\"tab-action-plan\">
                                <p>$planView</p>
                            </div>
                            <div id=\"tab-action-plan\">
                                <p>$targetView</p>
                            </div>                        
                            <div id=\"tab-charts\">
    
                            </div>
                            <div id=\"tab-history\">
                                <p>$historyView</p>
                            </div>
                            <div id=\"tab-settings\">
                                <p>$settingsView</p>
                            </div>   
                        </div>
                          ";

    I’ve tested this with and without any of the php vars in the above div (in case it was something else conflicting) but the results are the same.

    • This reply was modified 8 years, 5 months ago by  sonicviz.
    • This reply was modified 8 years, 5 months ago by  sonicviz.
    • This reply was modified 8 years, 5 months ago by  sonicviz.
    RangeSelector out of position #75480

    Dimitar
    Participant

    Hi sonicviz,

    This can easily be fixed as follows:

    var initWidgets = function(tab) {
            switch (parseInt(tab)) {

    Best Regards,
    Dimitar

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

    RangeSelector out of position #75491

    sonicviz
    Participant

    Thanks for the quick response.

    I have another problem now.

    I can’t use the init widgets because I’m dynamically generating html which in this case puts <script> tags within other <script> tags.
    This works when it’s server generated as html, but when it’s placed inline in something like $(‘#jqxTabs’).jqxTabs(‘setContentAt’, 4, ‘$dynamicHTMLWith nested scripts’); it throws Illegal Token JS errors.

    I’m trying to think of a simple way around this but no luck.
    Tried a bunch of different ways but they all throw one or more errors, which makes using the initTab function difficult.

    Any ideas?

    RangeSelector out of position #75498

    Dimitar
    Participant

    Hi sonicviz,

    Please note that you can pass a jQuery object to the setContentAt method:

    var content = $('<em>New content</em>');
    
    $('#jqxButton').click(function () {
        $('#jqxTabs').jqxTabs('setContentAt', 0, content);
    });

    Maybe this approach is what you need. If not, please create a separate topic on the matter in the Tabs forum, as it is more suitable for discussing this issue.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.