X-axis labeling for Chart Column are not correctly labeled - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 3 replies, has 2 voices, and was last updated by petite_moi 12 years, 3 months ago.

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

Author

X-axis labeling for Chart Column are not correctly labeled Posts

July 18, 2012 at 1:54 am X-axis labeling for Chart Column are not correctly labeled #6074

Member

petite_moi

I am trying to recreate the chart column series. However, the x-axis is skipping every 3rd label.
For example, it would be AB then GH then MN then RS. The label is wrong for the column, but the columns are correct in that it is shown the AB series, then CD series, and so forth.
I don’t know why it is doing that. Any help would be great. Thanks in advance.

My sample text file:
AB,4,22
CD,174,233
EF,11,7
GH,2,4
IJ,23,28
KL,120,134
MN,39,53
NO,42,38
PQ,1,1
RS,2,6
TU,40,50
VW,163,202
XY,0,1
AZ,50,52
WE,369,498
GC,4,2
MA,109,109
NA,542,767
NE,41,50
NF,0,0
PO,3,0
NT,13,15
TT,11,15
SS,9,0
RR,1,3
SS,16,33
EE,0,0
AA,14,31

Javascript:

$(document).ready(function () {
// prepare the data
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Organization’ },
{ name: ‘Q1’ },
{ name: ‘Q2’ }

],
url: ‘sampledata1.txt’
};

var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });

// prepare jqxChart settings
var settings = {
title: “cHART EXAMPLE”,
description: “”,
showLegend: true,
enableAnimations: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
dataField: ‘Organization’,
showGridLines: true
},
colorScheme: ‘scheme01′,
seriesGroups:
[
{
type: ‘column’,
columnsGapPercent: 50,
valueAxis:
{
unitInterval: 250,
displayValueAxis: true,
description: ‘User Count’
},
series: [
{ dataField: ‘Q1’, displayText: ‘Q1 per Capita’},
{ dataField: ‘Q2’, displayText: ‘Q2 per Capita’ }
]
}

]
};

// setup the chart
$(‘#jqxChart’).jqxChart(settings);

});

July 18, 2012 at 2:23 am X-axis labeling for Chart Column are not correctly labeled #6076

petite_moi

Member

I continue to further mess with this chart. If the setting for the

it would only show 14 column series. Once there are more than 14 records, it will start to label every other series. Does anyone know why there is a limit of number of columns??

July 18, 2012 at 4:48 am X-axis labeling for Chart Column are not correctly labeled #6087

Peter Stoev

Keymaster

Hi petite_moi,

You need to set the ‘unitInterval’ in the categoryAxis

Here’s a working sample:

<!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 Column Series Example</title>
    <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/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: 'csv',
                datafields: [
                { name: 'Organization' },
                { name: 'Q1' },
                { name: 'Q2' }
                ],
                url: 'sampledata.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                async: false,
                autoBind: true,
                loadError: function (xhr, status, error) {
                    alert("error");
                }
            });
            // prepare jqxChart settings
            var settings = {
                title: 'Chart Example',
                description: '',
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                {
                    dataField: 'Organization',
                    unitInterval: 1,
                    showGridLines: true
                },
                colorScheme: 'scheme01',
                seriesGroups:
                [
                    {
                        type: 'column',
                        columnsGapPercent: 50,
                        valueAxis:
                        {
                            unitInterval: 250,
                            displayValueAxis: true,
                            description: 'User Count'
                        },
                        series: [
                            { dataField: 'Q1', displayText: 'Q1 per Capita' },
                            { dataField: 'Q2', displayText: 'Q2 per Capita' }
                        ]
                    }]
            };
            // setup the chart
            $("#jqxChart").jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
	<div style='height: 600px; width: 682px;'>
    <div id='host' style="margin: 0 auto; width:680px; height:400px;">
		<div id='jqxChart' style="width:680px; height:400px; position: relative; left: 0px; top: 0px;">
		</div>
	</div>
    </div>
</body>
</html>

Hope this helps you.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 18, 2012 at 2:14 pm X-axis labeling for Chart Column are not correctly labeled #6114

petite_moi

Member

Peter,

This works great!! Thank you for the quick response. I am evaluating this widget for a project. If this continue to work out, the company will have to purchase the enterprise license. Thanks again.

Author

Posts

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

You must be logged in to reply to this topic.