jQuery UI Widgets Forums Chart Change label on xAxis of bar chart

This topic contains 2 replies, has 2 voices, and was last updated by  shawn 3 weeks, 6 days ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Change label on xAxis of bar chart #132213

    shawn
    Participant

    I have a bar chart who’s xAxis is the week of the year.
    sample chart

    I want the week to roll back to 1 after week 52, but if I use week 1, it puts it at the beginning of the chart.
    How can I change the label displayed on the x-axis without changing the placement value on the chart?

            $(document).ready(function () {
                // prepare chart data as an array
                var chartData = [
    	        { week: '48','No Growth': 0,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0},
    	        { week: '49','No Growth': 3,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 1},
    	        { week: '50','No Growth': 6,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0},
    		{ week: '51','No Growth': 0,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0},
    		{ week: '52','No Growth': 5,'1-10': 1,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0},
    		{ week: '53','No Growth': 0,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0},
    		{ week: '54','No Growth': 0,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0}
                  ];
                // prepare jqxChart settings
                var settings = {
                    title: "Combined<br>Culture Summary",
                    description: "12-01-2022 To 01-10-2023",
                    enableAnimations: false,
                    showLegend: true,            
                    showBorderLine: false,
                    backgroundColor: "#fff",
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: chartData,
                    xAxis:
                    {
                        dataField: 'week',                   
                        tickMarks: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        },
                        gridLines: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        },
                        axisSize: 'auto',
                        title: {text: "Weekly"}
                    },
                    valueAxis:
                    {
                        unitInterval: 1,
                        title: {text: 'Number of Samples'},
                        tickMarks: {color: '#BCBCBC'},
                        gridLines: {color: '#BCBCBC'},
                        labels: {
                            horizontalAlignment: 'right'
                        },
                    },
                    colorScheme: 'scheme04',
                    seriesGroups:
                        [
                            {
                                type: 'stackedcolumn',
                                columnsGapPercent: 100,
                                seriesGapPercent: 5,
                                series: [
                                        { dataField: 'No Growth', displayText: 'No Growth' },
                                        { dataField: '1-10', displayText: '1-10' },
                                        { dataField: '11-100', displayText: '11-100' },
                                        { dataField: '101-1000', displayText: '101-1000' },
                                        { dataField: '1001-10000', displayText: '1001-10000' },
                                        { dataField: 'TNTC', displayText: 'TNTC' }
                                    ]
                            }
                        ]
                };
                // setup the chart
                $('#chartContainer').jqxChart(settings);            
    	    // add a new color scheme named 'kuster'
                $('#chartContainer').jqxChart('addColorScheme', 'kuster', ['#00C000', '#80FF80', '#FFFF40','#F8902C', '#FF8080', '#FF0000']);
    	    // apply the new scheme by setting the chart's colorScheme property
    	     $('#chartContainer').jqxChart('colorScheme', 'kuster');
    	     // refresh the chart
                 $('#chartContainer').jqxChart('refresh');       				    
            });
    Change label on xAxis of bar chart #132216

    Hi,

    For this, you can use the formatFunction of the labels property.
    Please see this example: http://jsfiddle.net/L4xgy1ba/2/
    xAxis -> labels -> formatFunction

    Best regards,
    Svetoslav Borislavov

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

    Change label on xAxis of bar chart #132221

    shawn
    Participant

    thank you

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

You must be logged in to reply to this topic.