One element in BarColumn

[marchipMember]

Hi

When i have a one only item to rendere the chart do not display it?

Example

I have this json source

[{
    "ID": "135333534951096",
    "remote_host": "pippo.it",
    "avgBytes": 58.0
  }

]
The chart do not display the column. Only text of X-Axis is visible.

Thanks

[Peter StoevKeymaster]

Hi marchip,

Could you please, provide the Chart’s initialization?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[marchipMember]

var gridData = data;
                        var gridSource =
                            {
                                localdata: gridData,
                                datatype: 'json'
                            };
                        gridDataAdapter = new $.jqx.dataAdapter(gridSource);

var settings = {
                        title: $(xml).find('Title').text(),
                        description: $(xml).find('SubTitle').text(),
                        showLegend: true,
//                        enableAnimations: true,
//                        animationDuration:100,
                        toolTipShowDelay: 200,
                        padding: { left: 20, top: 5, right: 20, bottom: 5 },
                        titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
                        source: gridDataAdapter,
                        categoryAxis:
                        {
                            dataField: $(xml).find('XAxis').text(),
                            showGridLines: true,
                            flip: true,
                            formatFunction: function (value) {
                                var v = value;
                                if (v.indexOf('Date') == -1)
                                    return value;
                                var d = new Date(value.match(/\d+/)[0] * 1);
                                var curr_date = d.getDate();
                                var curr_month = d.getMonth() + 1;
                                var curr_year = d.getFullYear();
                                return curr_date + "/" + curr_month + "/" + curr_year;
                            },
                        },
                        colorScheme: $(xml).find('ColorSchemte').text(),
                        seriesGroups:
                        [
                            {
                                type: 'column',
                                orientation: $(xml).find('Orientation').text(),
                                //columnsGapPercent: 100,
                                
                                toolTipFormatSettings: { thousandsSeparator: ',' },
                                valueAxis:
                                {
                                    minValue: 0,
                                    axisSize: 'auto',
                                    flip: false,
                                    //displayValueAxis: true,
                                    description: '',
                                    formatFunction: function (value) {
                                        return parseInt(value / 1);
                                    }
                                },
                                series: [
                                         { dataField: $(xml).find('YAxis').text(), displayText: '' }
                                    ]
                            }
                        ]
                    };
                    $("#jqxChart_@(Model.WidgetId)").jqxChart(settings);

[Peter StoevKeymaster]

Hi marchip,

What is the result of: $(xml).find(‘XAxis’).text(), orientation: $(xml).find(‘Orientation’).text() and $(xml).find(‘YAxis’).text()?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[marchipMember]

$(xml).find(‘XAxis’).text() = remote_host
$(xml).find(‘Orientation’).text() = vertical
$(xml).find(‘YAxis’).text() = avgBytes

[marchipMember]

Could you help me, please?

[Peter StoevKeymaster]

Hi marchip,

The following sample is a working code based on the provided code and information in your posts:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var gridData = [{
                "ID": "135333534951096",
                "remote_host": "pippo.it",
                "avgBytes": 58.0
            }];
            var gridSource =
                {
                    localdata: gridData,
                    datatype: 'json'
                };
            var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
            var settings = {
                showLegend: true,
                toolTipShowDelay: 200,
                padding: { left: 20, top: 5, right: 20, bottom: 5 },
                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
                source: gridDataAdapter,
                categoryAxis:
                {
                    dataField: "remote_host",
                    showGridLines: true,
                    flip: true,
                    formatFunction: function (value) {
                        var v = value;
                        if (v.indexOf('Date') == -1)
                            return value;
                        var d = new Date(value.match(/\d+/)[0] * 1);
                        var curr_date = d.getDate();
                        var curr_month = d.getMonth() + 1;
                        var curr_year = d.getFullYear();
                        return curr_date + "/" + curr_month + "/" + curr_year;
                    },
                },
                seriesGroups:
                [
                    {
                        type: 'column',
                        orientation: 'vertical',               
                        toolTipFormatSettings: { thousandsSeparator: ',' },
                        valueAxis:
                        {
                            minValue: 0,
                            axisSize: 'auto',
                            flip: false,
                            description: '',
                            formatFunction: function (value) {
                                return parseInt(value / 1);
                            }
                        },
                        series: [
                                 { dataField: 'avgBytes', displayText: '' }
                        ]
                    }
                ]
            };
            $("#jqxChart").jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width:680px; height:400px">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts