y axis values format in chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: axis, chart, jqxChart, valueAxis, y

This topic contains 2 replies, has 2 voices, and was last updated by kamal sharma 12 years, 7 months ago.

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

Author

y axis values format in chart Posts

August 29, 2012 at 8:25 am y axis values format in chart #7235

Member

i am using decimal point (like 1.10,1.20 etc.)to show at y axis but i want to show in minute:second format(like 1:10,1:20,1:30) at y axis.

how it is possible in graph .

August 29, 2012 at 10:21 am y axis values format in chart #7245

Dimitar

Participant

Hello kamal sharma,

You can change the decimal separator of the y axis to : by setting the valueAxis formatSettings. However, this may not work properly for minutes, because you may have a value of 1.90 and thus 1:90. This is an example of how to change the decimal separator:

<html lang="en">
<head>
    <title id='Description'>jQuery Chart Column Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data
            var sampleData = [
                    { Day: 0, Keith: 2.30, Erica: 0.15, George: 2.25 },
                    { Day: 1, Keith: 1.25, Erica: 0.25, George: 2.30 },
                    { Day: 2, Keith: 0.30, Erica: 2.20, George: 2.25 },
                    { Day: 3, Keith: 2.35, Erica: 3.00, George: 3.00 },
                    { Day: 4, Keith: 0.20, Erica: 1.20, George: 1.25 },
                    { Day: 5, Keith: 1.50, Erica: 2.20, George: 0.30 },
                    { Day: 6, Keith: 0.60, Erica: 1.45, George: 0.10 }
                ];
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        formatFunction: function (value) {
                            // value is from 0-6 (see 'Day' field in sampleData above)
                            var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                            return days[value];
                        },
                        dataField: 'Day',
                        showGridLines: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 3,
                                unitInterval: 0.1,
                                description: 'Time in minutes',
                                formatSettings: { decimalSeparator: ":" }
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith', formatFunction: minuteFormatFunction },
                                    { dataField: 'Erica', displayText: 'Erica', formatFunction: minuteFormatFunction },
                                    { dataField: 'George', displayText: 'George', formatFunction: minuteFormatFunction }
                                ]
                        }
                    ]
            };
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body style="background: white;">
    <div id='chartContainer' style="width: 600px; height: 400px" />
</body>
</html>

There is another way which we recommend – to leave the y axis in minutes and have the series values show in the hours : minutes format. This is done by a formatFunction in the series. Here is the example:

<html lang="en">
<head>
    <title id='Description'>jQuery Chart Column Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data
            var sampleData = [
                    { Day: 0, Keith: 120, Erica: 15, George: 25 },
                    { Day: 1, Keith: 25, Erica: 25, George: 30 },
                    { Day: 2, Keith: 30, Erica: 20, George: 25 },
                    { Day: 3, Keith: 115, Erica: 25, George: 85 },
                    { Day: 4, Keith: 20, Erica: 112, George: 25 },
                    { Day: 5, Keith: 70, Erica: 20, George: 30 },
                    { Day: 6, Keith: 60, Erica: 45, George: 90 }
                ];
            //this function formats the series values to x h : y min
            var minuteFormatFunction = function (value) {
                if (value > 59) {
                    return Math.floor(value / 60) + ' h : ' + (value % 60) + ' min';
                }
                else return value + ' min';
            };
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        formatFunction: function (value) {
                            // value is from 0-6 (see 'Day' field in sampleData above)
                            var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                            return days[value];
                        },
                        dataField: 'Day',
                        showGridLines: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 120,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith', formatFunction: minuteFormatFunction },
                                    { dataField: 'Erica', displayText: 'Erica', formatFunction: minuteFormatFunction },
                                    { dataField: 'George', displayText: 'George', formatFunction: minuteFormatFunction }
                                ]
                        }
                    ]
            };
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body style="background: white;">
    <div id='chartContainer' style="width: 600px; height: 400px" />
</body>
</html>

Best Regards,
Dimitar

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

September 11, 2012 at 12:25 pm y axis values format in chart #7686

kamal sharma

Member

Hello Dimitar,

Thank you ,very much.

Thanks&Regards
kamal sharma

Author

Posts

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

You must be logged in to reply to this topic.