jQuery UI Widgets Forums Chart Customise x-axis for weekending date

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Customise x-axis for weekending date #49571

    pzh20
    Participant

    My data is based on week ending dates for a business year starting 2-jun-2013. The data is as follows;

    data: [[ date(2013,5,2) , 12237.44],[ date(2013,5,9) , 8352.19],[ date(2013,5,16) , 8597.51],[ date(2013,5,23) , 7929.59],[ date(2013,5,30) , 10258.01],[ date(2013,6,7) , 9678.81],[ date(2013,6,14) , 8217.02],[ date(2013,6,21) , 9018.36],[ date(2013,6,28) , 10230.26],[ date(2013,7,4) , 13756.23],[ date(2013,7,11) , 14277.72],[ date(2013,7,18) , 15463.82],[ date(2013,7,25) , 17030.14],[ date(2013,8,1) , 12624.76],[ date(2013,8,8) , 9437.64],[ date(2013,8,15) , 9177.75],[ date(2013,8,22) , 6866.05],[ date(2013,8,29) , 7600.15],[ date(2013,9,6) , 8288.4],[ date(2013,9,13) , 5989.03],[ date(2013,9,20) , 6428.48],[ date(2013,9,27) , 9011.14],[ date(2013,10,3) , 10627.3],[ date(2013,10,10) , 5533.42],[ date(2013,10,17) , 5598.16],[ date(2013,10,24) , 6648.94],[ date(2013,11,1) , 6483.75],[ date(2013,11,8) , 8574.1],[ date(2013,11,15) , 6411.24],[ date(2013,11,22) , 12256.33],[ date(2013,11,29) , 11348.05],[ date(2014,0,5) , 8843.53],[ date(2014,0,12) , 3828.42],[ date(2014,0,19) , 4812.8],[ date(2014,0,26) , 1184.38]]
    }

    How would I create a line chart, formatting the x-axis to show the week ending dates rotated 90 degrees and with the values showing on the data points?

    Many thanks
    Pete

    Customise x-axis for weekending date #49593

    Dimitar
    Participant

    Hello Pete,

    To achieve this, please set the categoryAxis property textRotationAngle to 90 and the seriesGroups properties showLabels to true and symbolType to “circle” (for other symbolType options, please refer to the jqxChart API Documentation). Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare chart data as an array
                var sampleData = [
                        { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
                        { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
                        { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
                        { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
                        { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
                        { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
                        { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
                    ];
    
                // prepare jqxChart settings
                var settings = {
                    title: "Fitness & exercise weekly scorecard",
                    description: "Time spent in vigorous exercise by activity",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 10, top: 5, right: 10, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: sampleData,
                    categoryAxis:
                        {
                            text: 'Category Axis',
                            textRotationAngle: 90,
                            dataField: 'Day',
                            showTickMarks: true,
                            valuesOnTicks: false,
                            tickMarksInterval: 1,
                            tickMarksColor: '#888888',
                            unitInterval: 1,
                            gridLinesInterval: 1,
                            gridLinesColor: '#888888',
                            axisSize: 'auto'
                        },
                    colorScheme: 'scheme05',
                    seriesGroups:
                        [
                            {
                                type: 'line',
                                showLabels: true,
                                symbolType: 'circle',
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    minValue: 0,
                                    maxValue: 100,
                                    description: 'Goal in minutes',
                                    axisSize: 'auto',
                                    tickMarksColor: '#888888'
                                },
                                series: [
                                        { dataField: 'Goal', displayText: 'Personal Goal' }
                                    ]
                            }
                        ]
                };
    
                // setup the chart
                $('#jqxChart').jqxChart(settings);
    
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxChart' style="width: 680px; height: 400px">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.