RangeSelector out of position

[sonicvizParticipant]

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/

[DimitarParticipant]

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/

[sonicvizParticipant]

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

[DimitarParticipant]

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/

[sonicvizParticipant]

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);
        });

[sonicvizParticipant]

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

[DimitarParticipant]

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/

[sonicvizParticipant]

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.

[DimitarParticipant]

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/

[sonicvizParticipant]

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?

[DimitarParticipant]

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/

[Author]

Posts