jQuery UI Widgets › Forums › Chart › Bar chart with single bar is not displaying
Tagged: chart, html5 chart, javascript chart, jquery chart, jquery ui chart, jqwidgets, jqxChart
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
-
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
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 StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.