jQuery UI Widgets › Forums › Chart › Line Graph Y-axis bug

Tagged: , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Line Graph Y-axis bug Posts
  • September 5, 2013 at 8:01 am Line Graph Y-axis bug #28379

    PhilipW
    Member

    Hello,

    I seemed to have found a bug with line graphs when the y-axis unitInterval is set to a floating point number. Code Below:

    <!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.10.2.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">
    // BEGIN HELPER FUNCTIONS
    var numberWithCommas = function(x) { //adds comma to numbers, e.g. 12000 -> 12,000
    	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
            $(document).ready(function () {
                // prepare chart data
                var sampleData = [
                    {asat: '2012-07-01', a: ''},
    				{asat: '2012-08-01', a: ''},
    				{asat: '2012-09-01', a: ''},
    				{asat: '2012-10-01', a: ''},
    				{asat: '2012-11-01', a: ''},
    				{asat: '2012-12-01', a: ''},
    				{asat: '2013-01-01', a: ''},
    				{asat: '2013-02-01', a: ''},
    				{asat: '2013-03-01', a: 8.17},
    				{asat: '2013-04-01', a: 7.17},
    				{asat: '2013-05-01', a: 7.51}
    			];
                // prepare jqxChart settings
                var chartSettings = {
    				enableAnimations: true,
    				showLegend: false,
    				showToolTips: true,
    				titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    				source: sampleData,
    				enableCrosshairs: true,
    				crosshairsColor: '#FF0000',
    				categoryAxis:
    				{
    					dataField: 'asat',
    					baseUnit: 'month',
    					formatFunction: function (value) {
    						return value.toString('yyyy-MMM');
    					},
    					showTickMarks: true,
    					tickMarksInterval: 1,
    					tickMarksColor: '#888888',
    					unitInterval: 3,
    					showGridLines: true,
    					gridLinesInterval: 3,
    					gridLinesColor: '#888888',
    					valuesOnTicks: true
    				},
    				seriesGroups:
    				[
    					{
    						type: 'line',
    						toolTipFormatFunction: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
    							return '<div style="text-align:left">' + serie.displayText + ' ' + categoryValue.toString('yyyy-MMM') + ': ' + numberWithCommas(value) + '</div>';
    						},
    						valueAxis:
    						{
    							unitInterval: 0.2,
    							minValue: 7,
    							maxValue: 8.4,
    							displayValueAxis: true,
    							description: 'a',
    							formatSettings: {
    								thousandsSeparator: ','
    							},
    							axisSize: 'auto',
    							tickMarksColor: '#888888'
    						},
    						series: 
    						[
    							{ dataField: 'a', displayText: 'a' },
    						]
    					}
    				]
    			};
                // setup the chart
                $('#jqxChart').jqxChart(chartSettings);
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxChart' style="width:680px; height:400px; position: relative; left: 0px; top: 0px;">
        </div>
    </body>
    </html>

    If you look at the actual values (8.17, 7.17, 7.51), they don’t correspond to the y-axis.

    This only occurs for certain numbers for the y-axis unitInterval – it does not happen when it is set to 0.1 instead of 0.2, for example.
    One thing I noticed was that the minValue of the y-axis for the chart that is incorrectly rendered always seems to begin at the first y-axis tick instead of the baseline. Hope this helps.

    I’ve replicated the bug in Chrome, FF and IE.

    Any help would be much appreciated. Thanks!

    September 5, 2013 at 1:01 pm Line Graph Y-axis bug #28399

    Dimitar
    Participant

    Hello PhilipW,

    Unfortunately, the unitInterval property can only be integer.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.