jQuery UI Widgets Forums Chart Bar chart with single bar is not displaying

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • abc
    Participant

    Hi,

    I have created bar chart for only one column(single bar) , it is not displaying.

    giving console error :

    Unexpected value NaN parsing height attribute.
    Unexpected value NaN parsing y attribut

    Peter Stoev
    Keymaster

    Hi abcd,

    Unfortunately, the provided information does not help much. Please, provide a sample which demos the behavior that you described in your post.

    Please, find below a working sample with a Chart with Single Bar

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <title id='Description'>jqxChart Bar Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var sampleData = [{ "isShowValueLabels": true, "SUM_AMOUNT": 168.69, "SALESMAN": "Ringo" }];
    // prepare jqxChart settings
    var settings = {
    title: "Top 5 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: sampleData,
    categoryAxis:
    {
    dataField: 'SALESMAN',
    showGridLines: true,
    flip: false,
    },
    colorScheme: 'scheme01',
    seriesGroups:
    [
    {
    type: 'column',
    orientation: 'horizontal',
    columnsGapPercent: 100,
    toolTipFormatSettings: { thousandsSeparator: ',' },
    valueAxis:
    {
    flip: true,
    unitInterval: 100,
    maxValue: 200,
    minValue: 0,
    displayValueAxis: true,
    description: ''
    },
    series: [
    { dataField: 'SUM_AMOUNT', displayText: 'SUM_AMOUNT' }
    ]
    }
    ]
    };
    // setup the chart
    $('#jqxChart').jqxChart(settings);
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxChart' style="width:680px; height:400px; position: relative; left: 0px; top: 0px;">
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.