Chart Not shown!!!

[antonborrazParticipant]

Hi guys:

I’ve implemented a solution which contains a hidden field to be shown when the user presses one button. All it’s fine except the graph that is not shown but i don’t know why.

Any idea??

The code is on fiddle: http://jsfiddle.net/8zgdkpjz/41/

Thanks in advance.

Kind regards.

[DimitarParticipant]

Hello antonborraz,

There are two issues with your example:

1) chartSettings is a local variable for getChartSettings() and is not “visible” from where you try to initialize the chart. Change:

$("#chartContainer1").jqxChart(chartSettings);

to

$("#chartContainer1").jqxChart(getChartSettings(dataNetApplications));

2) You have no “value” and “name” datafields. Change them to “Share” and “Browser” instead:

dataField: 'Share',
displayText: 'Browser',

Best Regards,
Dimitar

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

[antonborrazParticipant]

Hi Dimitar,

Thank you for your answer. Sorry but the example doesn’t updated .

Now I’ve it updated with those mistakes corrected: http://jsfiddle.net/8zgdkpjz/43/ and it is still hidden.

Why is not shown, what i’m doing wrong???

Thanks in advance, again ;).

Kind regards.

[DimitarParticipant]

Hi antonborraz,

The following jQuery selection is empty, because there is no testPlanInUseId variable defined in your page and neither is there an element in your content with an id starting with data_:

$(content).find("#data_" + testPlanInUseId)

That is why

Best Regards,
Dimitar

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

[antonborrazParticipant]

Sorry Dimitar, but It fails:

http://jsfiddle.net/8zgdkpjz/47/

For me is strange because I used to develop desktop apps instead of web ones.

Sorry for the inconvenience.

Kind regards

[DimitarParticipant]

Hi antonborraz,

Here is a working version of your fiddle: http://jsfiddle.net/Dimitar_jQWidgets/k40Lgnw5/. You have to load the data via dataAdapter and select the chart for initialization directly with $("#chartContainer1").

Best Regards,
Dimitar

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

[antonborrazParticipant]

Hello Dimitar,

I’ve tested your code and it runs, but when I try to put it on my app the result is the same, it doesn’t work.

Here is my code, all starts when the button is pressed and invokes to EnableEscenarioInUseCache(). All fields are formed correctly and the dialog is shown without problem although the pie chart.

function UpdateGraphInfo(testPlanInUseId, escenarioId, description) {
    var hiddenField = document.getElementById(escenarioId);
    var content = hiddenField.outerHTML.replace('style="display: none; visibility: hidden;"', '');

    // select container and apply settings
    $("#chartContainer1").jqxChart(getChartSettings($("#" + testPlanInUseId).serializeArray(), description));
    return false;
}

function getChartSettings(myInfo, description) {
    var source = {
        datatype: "json",
        datafields: [{
            name: 'name'
        }, {
            name: 'value'
        }],
        localdata: myInfo
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    var chartSettings = {
        source: dataAdapter,
        title: '',
        description: 'Resumen ejecución Escenario',
        enableAnimations: false,
        showLegend: true,
        showBorderLine: true,
        padding: {
            left: 5,
            top: 5,
            right: 5,
            bottom: 5
        },
        titlePadding: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 10
        },
        colorScheme: 'scheme02',
        seriesGroups: [{
            type: 'pie',
            showLegend: true,
            enableSeriesToggle: true,
            series: [{
                dataField: 'value',
                displayText: 'name',
                showLabels: true,
                labelRadius: 160,
                labelLinesEnabled: true,
                labelLinesAngles: true,
                labelsAutoRotate: false,
                initialAngle: 0,
                radius: 125,
                minAngle: 0,
                maxAngle: 180,
                centerOffset: 0,
                offsetY: 170,
                formatFunction: function (value, itemIdx, serieIndex, groupIndex) {
                    if (isNaN(value)) return value;
                    return value + '%';
                }
            }]
        }]
    };
    return chartSettings;
}

function ShowEscenarioDialog(testPlanInUseId) {
    var hiddenField = document.getElementById(testPlanInUseId);
    var content = hiddenField.outerHTML.replace('style="display: none; visibility: hidden;"', '');

    $.Dialog({
        overlay: true,
        shadow: false,
        flat: true,
        icon: '<span class="icon-info"></span>',
        onShow: function (_dialog) {
            $.Dialog.title("Estado Ejecución Escenario");
            $.Dialog.content(content);
        }
    });
    // select container and apply settings
    var chartsettings = getChartSettings($("#data_" + testPlanInUseId).serializeArray(), 'Resumen Ejecución');
    $("#chartContainer1").jqxChart(chartsettings);
    return false;
}

function EnableEscenarioInUseCache(escenarioInUseId, enableChache) {
    ShowEscenarioDialog(escenarioInUseId);    
}

Dorry for the inconvenience but I’m a bit desesperated.

Kind regards

[DimitarParticipant]

Hi antonborraz,

I am not sure where your issue originates. Please make sure you are using the latest version of jQWidgets (3.4.0) in your solution. Also check if the chartContainer1 div is in the DOM by the time

$("#chartContainer1").jqxChart(chartsettings);

is called ($("#chartContainer1").length is not 0).

Best Regards,
Dimitar

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

[Author]

Posts