Bar chart with numeric string x-axis datafields

[tmaurstParticipant]

I have a bar chart with an x-axis datafield of numeric strings such as: “001”, “004”, “017”, etc

The problem is that the chart is interpreting these strings as numbers, and wants to auto increment the x-axis accordingly. How can I force the chart to recognize this datafield as a string?

My chart:

       var source = {
            datatype: 'json',
            datafields: [
              { name: 'Value', type: 'string' },
              { name: 'Amount', type: 'number' },
            ],
            localdata: analysis
        }
        var dataAdapter = new $.jqx.dataAdapter(source);        

        $("#MyChart").jqxChart({
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: source,
            xAxis:
                {
                    dataField: 'Value',
                    gridLines: { visible: true },
                    valuesOnTicks: false
                },
            columnSeriesOverlap: false,
            seriesGroups:
                [
                    {
                        type: 'column',
                        valueAxis:
                        {
                            visible: true,
                            unitInterval: 1000,
                            title: { text: '# of Trucks<br>' }
                        },
                        series: [
                                { dataField: 'Amount', displayText: 'Frequency' }
                        ]
                    }
                ]
        });

[ivailoParticipant]

Hi tmaurst,

Try this:

xAxis:
                {
                    dataField: 'Value',
                    type: 'basic',
                    gridLines: { visible: true },
                    valuesOnTicks: false
                },

This mus prevent the auto increment of the x-axis.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[tmaurstParticipant]

That works! Thank you.

For a bonus…My x-axis values of “001”, “004”, “017” are being displayed as “1”, “4”, “17” etc…

Is there a way to prevent this from happening?

[ivailoParticipant]

Hi tmaurst,

Use formatFunction.

xAxis:
                {
                    dataField: 'Country',
                    type: 'basic',
                    formatFunction: function (value) {
                            return value;
                        },
                    gridLines: { visible: true },
                    flip: false
                },

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ManikandanMParticipant]

Is there any possibility to set background color (or) Y axis lines in different colors?

[ivailoParticipant]

Duplicated post: http://www.jqwidgets.com/community/topic/apply-color-to-stacked-chart-bar/

[Author]

Posts