[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?

[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.

[sonicvizParticipant]

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

[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]

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

[sonicvizParticipant]

ah, it’s ok…formatting error with quotes. working now. ty

[sonicvizParticipant]

How do you get the tooltip background box to resize?

I changed the width ok but even changing the height the box around it stays the same and cuts off the 2nd value.

[sonicvizParticipant]

ah, right…kk, ty

[sonicvizParticipant]

kk, ty

[sonicvizParticipant]

I solved it myself, through trial and error.
The docs could use a few more comprehensive examples with different date formats imo.

fwiw I had to put the dates in quotes (why?) and use a dataAdaptor as it doesn’t seem to work without it.

        jQuery(document).ready(function () {
            // prepare chart data             
 		var data = [{Date: "2015-08-11 ",Weight:-5},{Date: "2015-08-17 ",Weight:3},{Date: "2015-08-18 ",Weight:-8},{Date: "2015-08-23 ",Weight:-2},{Date: "2015-08-25 ",Weight:-3},{Date: "2015-08-26 ",Weight:2},{Date: "2015-08-28 ",Weight:-3}];
            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,
                    unitInterval: 7,
                    gridLines: {
                        visible: false,
                        interval: 1,
                        color: '#BCBCBC'
                    }
                },
                valueAxis:
                {
                    minValue: -15,
                    maxValue: 15,
                    unitInterval: 1,
                    title: {text: 'Weight Difference'},
                    gridLines : {visible: false},   
                    labels:
                    {
                        horizontalAlignment: 'right',
                        formatSettings:
                        {
                            decimalPlaces: 1
                        }
                    }
                },                
                colorScheme: 'scheme01',
                seriesGroups:
                [
                    {
                        type: 'line',                  
                        series: [
                                { dataField: 'Weight', displayText: 'Weight'}
                            ]
                    }
                ]
            };
            
            // select the chartContainer DIV element and render the chart.
            jQuery ('#chartContainer').jqxChart(settings);
        });

[Author]

Posts