jQWidgets Forums

jQuery UI Widgets Forums Chart Chart in tabs not showing

Tagged: ,

This topic contains 5 replies, has 2 voices, and was last updated by  ziggy 9 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Chart in tabs not showing #73642

    ziggy
    Participant

    Hi,

    I have been trying to display the chart in a tab but to no avail.

    Here’s my code:

    
     var initChart = function () {
                    var sampleData1 = [{
                        Country: 'China',
                        Population: 1347350000,
                        Percent: 19.18
                    }, {
                        Country: 'India',
                        Population: 1210193422,
                        Percent: 17.22
                    }]
    
                    
    
                    // prepare jqxChart settings
                    var settings1 = {
                        title: "1st and 2nd most populated countries",
                        description: "Statistics for 2011",
                        showLegend: true,
                        enableAnimations: true,
                        padding: {
                            left: 20,
                            top: 5,
                            right: 20,
                            bottom: 5
                        },
                        titlePadding: {
                            left: 90,
                            top: 0,
                            right: 0,
                            bottom: 10
                        },
                        source: sampleData1,
                        categoryAxis: {
                            dataField: 'Country',
                            showGridLines: true,
                            flip: false
                        },
                        colorScheme: 'scheme01',
                        seriesGroups: [{
                            type: 'column',
                            orientation: 'horizontal',
                            columnsGapPercent: 100,
                            toolTipFormatSettings: {
                                thousandsSeparator: ','
                            },
                            valueAxis: {
                                flip: true,
                                unitInterval: 100000000,
                                maxValue: 1500000000,
                                displayValueAxis: true,
                                description: '',
                                formatFunction: function (value) {
                                    return parseInt(value / 1000000);
                                }
                            },
                            series: [{
                                dataField: 'Population',
                                displayText: 'Population (millions)'
                            }]
                        }]
                    };
    
                    // setup the chart
                    $('#jqxGraphViewProcessAlign').jqxChart(settings1);
                    console.log("sda");
                }
     
                // init widgets.
                initWidgets = function (tab) {
                    switch (tab) {
                        case 0:
                            initGridBasicViewResults();
                            break;
                        case 1:
                            break;
                        case 2:
                            initGraphViewProcessAlign();
                            break;
                        case 3:
                            initChart();
                            break;
                    }
                }
    
                
                 $('#jqxTabs').jqxTabs({ width: '100%',   theme: theme, initTabContent: initWidgets});
    
    

    What am I missing? help.

    Chart in tabs not showing #73643

    ziggy
    Participant

    currently using jqwidgets-ver3.8.0.

    Chart in tabs not showing #73645

    ziggy
    Participant

    you can check the code here in sample code

    I get the chart loaded, but not in tabs though…

    The grid loaded correctly but not the chart in tabs.

    Chart in tabs not showing #73649

    ivailo
    Participant

    Hi Karen,

    Try to update to the latest version 3.8.1
    We tested your code and it works well. Maybe the problem is in the rest of your code.
    Here it is integrated in our example.
    Also check are included all needed external files.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Chart in tabs not showing #73650

    ivailo
    Participant

    Hi Karen,

    In your demo was used wrong HTML structire. You included the chart outside, instead insude in your tabs.
    Here is the fixed DEMO.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Chart in tabs not showing #73652

    ziggy
    Participant

    Thanks Ivaillo. I missed that part.

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

You must be logged in to reply to this topic.