categoryAxis proportional display - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: categoryAxis, chart, jqxChart, line

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 11 years, 8 months ago.

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

Author

categoryAxis proportional display Posts

January 9, 2013 at 12:23 pm categoryAxis proportional display #13364

aorlic

Member

Hello!

I have a line-chart with dates on the categoryAxis.

The data series to be displayed could correspond to irregularilly distributed dates or even repeated dates, for example:

01-Jan-2013, 01-Jan-2013, 01-Jan-2013, 02-Jan-2013, 31-Jan-2013

With this kind of input my line-chart categoryAxis is plotted with these exact values, meaning that I will have 3 times the value 01-Jan-2013, followed by 02-Jan-2013 and 31-Jan-2013. All distances between the points are the same (01-Jan-2013 is plotted 3 times, followed by 02-Jan-2013 and 31-Jan-2013). The problem here is that a simple look on the chart does not give a feeling of real trend in time (as dates are not proportianally plotted).

I would like my categoryAxis to be created keeping the proportion between the dates. In this case min-value would be 01-Jan-2013 (displayed only once!) and max-value would be 31-Jan-2013. In the middle of the axis would be 15-Jan-2013. Each point would be plotted just above the corresponding date (having 3 points on 01-Jan-2013).

Is this possible?

Thank you,

Aleksandar.

January 10, 2013 at 7:37 am categoryAxis proportional display #13415

Dimitar

Participant

Hello Aleksandar,

Here is an example on the matter. We hope it is helpful to you:

<!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 Line Series Data Points</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.8.3.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 = [
                    { Month: 1, Goal: 40 },
                    { Month: 1, Goal: 50 },
                    { Month: 2, Goal: 50 },
                    { Month: 12, Goal: 90 }
                ];
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            // 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: 0,
                        dataField: 'Month',
                        showTickMarks: true,
                        valuesOnTicks: false,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        minValue: 1,
                        maxValue: 12,
                        axisSize: 'auto',
                        formatFunction: function (value) {
                            return months[value - 1];
                        },
                        toolTipFormatFunction: function (value) {
                            return months[value - 1];
                        }
                    },
                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/

January 10, 2013 at 3:40 pm categoryAxis proportional display #13448

aorlic

Member

Hello Dimitar!

Thank you very much, your example looks exactly how I would like to configure my chart. However, there is a problem…

x-axis values in my case are not months, but dates (baseUnit: ‘date’), something like this:

[
{“revision_date”:”06.12.2012″, “magnitude”:”0.06″},
{“revision_date”:”20.12.2012″, “magnitude”:”0.02″}
]

I would like my dates to be displayd on the x-axis.

Looks like something is wrong with the date format… Does jqChart work with dates? If so, what format is to be used?

Thank you once more,

Aleksandar.

January 11, 2013 at 7:52 am categoryAxis proportional display #13491

Dimitar

Participant

Hi Aleksandar,

Here is a better-suited example. The datatype this time is csv.

<!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 Line Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.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 the data
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'S&P 500' },
                    { name: 'NASDAQ' }
                ],
                url: '../sampledata/nasdaq_vs_sp500.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            // prepare jqxChart settings
            var settings = {
                title: "U.S. Stock Market Index Performance (2011)",
                description: "NASDAQ Composite compared to S&P 500",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        dataField: 'Date',
                        formatFunction: function (value) {
                            return months[value.getMonth()];
                        },
                        toolTipFormatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()];
                        },
                        type: 'date',
                        baseUnit: 'month',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        gridLinesInterval: 3,
                        gridLinesColor: '#888888',
                        valuesOnTicks: false
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 500,
                                minValue: 0,
                                maxValue: 3000,
                                displayValueAxis: true,
                                description: 'Daily Closing Price',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'S&P 500', displayText: 'S&P 500' },
                                    { dataField: 'NASDAQ', displayText: 'NASDAQ' }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width:680px; height:400px">
    </div>
</body>
</html>

nasdaq_vs_sp500.txt:

1/3/2011,1071.87,2391.52
1/3/2011,1271.87,2691.52
1/4/2011,1270.2,2681.25
1/25/2011,1291.18,2719.25
1/26/2011,1296.63,2739.5
1/27/2011,1299.54,2755.28
1/28/2011,1276.34,2686.89
1/31/2011,1286.12,2700.08

Best Regards,
Dimitar

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

January 11, 2013 at 10:15 am categoryAxis proportional display #13509

aorlic

Member

Thank you Dimitar, this is definitely an acceptable solution. No dates on the x-axis are displayed, but this shorter version (months only) may even be better (easier to code, cleaner to see).

I’ve noticed that if there is only one point in the data-series, it is not plotted.

January 14, 2013 at 6:34 am categoryAxis proportional display #13562

Dimitar

Participant

Hi aorlic,

Thank you for your feedback. We will investigate the reported behaviour with one point and have created a work item on the matter.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.