Customise x-axis for weekending date - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angle, categoryAxis, chart, jqxChart, label, line, show, showLabels, textRotationAngle, week, x-axis

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

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

Author

Customise x-axis for weekending date Posts

February 15, 2014 at 1:19 pm 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

February 17, 2014 at 5:52 am 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/

Author

Posts

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

You must be logged in to reply to this topic.