Proportional Display of CategoryAxis In Column Chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: axis, categoryAxis, chart, jqxChart, value, valueAxis, xAxis

This topic contains 10 replies, has 2 voices, and was last updated by vinodn 9 years, 11 months ago.

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

Author

Proportional Display of CategoryAxis In Column Chart Posts
April 23, 2015 at 7:16 am Proportional Display of CategoryAxis In Column Chart #70169

vinodn
Participant

Hi Team,

I am using column chart with decimal value on value axis [Y Axis]. The data series being displayed irregularly/repeated value.
For example : 0, 0.1, 0.1, 0.1, 0.2, 0.5 [using decimalPlaces property in formatsetting upto 1]

I have 3 times the value ‘0.1’. Here is the problem that chart of look is not giving the feeling of real value as value are wrongly plotted.

I would like to display my valueAxis only once on chart.

Kindly do needful.

Thank you,
Rinkal Parmar

April 23, 2015 at 10:26 am Proportional Display of CategoryAxis In Column Chart #70177

Dimitar
Participant

Hi Rinkal Parmar,

Are you referring to the valueAxis (which is usually the y-axis) or the xAxis/categoryAxis (which is usually the x-axis)? Please clarify and share your chart initialization code and some sample data so that we may better understand your issue.

Best Regards,
Dimitar

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

April 23, 2015 at 11:23 am Proportional Display of CategoryAxis In Column Chart #70183

vinodn
Participant

Referring to y-axis. You can view the same in the below image. Basically, the json data object that is bound to the chart has values upto one decimal precision. However, the chart renders with scale upto 2 decimal precision which is wrong as even the scale should have only one decimal precision. Hence, we set “decimalPlaces” property of the chart in “formatsetting” to “1”. But that is now giving us an incorrect scale with duplicate values.

April 23, 2015 at 11:37 am Proportional Display of CategoryAxis In Column Chart #70185

Dimitar
Participant

Hi Rinkal Parmar,

I think this will be fixed if you set the valueAxis unitInterval property to 0.1.

Best Regards,
Dimitar

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

April 23, 2015 at 12:07 pm Proportional Display of CategoryAxis In Column Chart #70193

vinodn
Participant

We can’t hard code it. The values are dynamic. They can be in 0.1, 0.2, 0.3 or in 10, 20, 30. Hard coding unitInterval property to 0.1 would make the chart look full of horizontal lines when the values are big.

April 23, 2015 at 1:05 pm Proportional Display of CategoryAxis In Column Chart #70197

Dimitar
Participant

Hi Rinkal Parmar,

If setting decimalPlaces to 2 is unacceptable (although I did not understand why), you can implement a format of your own choice using the valueAxis formatFunction callback.

Best Regards,
Dimitar

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

April 24, 2015 at 5:09 am Proportional Display of CategoryAxis In Column Chart #70214

vinodn
Participant

Hi Dimitar,

I want to set Dynamic value to unitInterval. Is there any way to find MAX Y-Axis value?

Regards,
Rinkal

April 24, 2015 at 6:27 am Proportional Display of CategoryAxis In Column Chart #70222
Dimitar
Participant
Hi Rinkal,

You can find the largest value in the data adapter’s beforeLoadComplete callback:
```
<!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.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array            
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Country' },
                    { name: 'GDP' },
                    { name: 'DebtPercent' },
                    { name: 'Debt' }
                ],
                url: '../sampledata/gdp_dept_2010.txt'
            };

            var largest;

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true,
                beforeLoadComplete: function (data) {
                    largest = parseFloat(data[0]['DebtPercent']);
                    for (var i = 0; i < data.length; i++) {
                        var newValue = parseFloat(data[i]['DebtPercent']);
                        if (newValue > largest) {
                            largest = newValue;
                        }
                    }
                    alert(largest);
                }
            });

            // prepare jqxChart settings
            var settings = {
                title: "Economic comparison",
                description: "GDP and Debt in 2010",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'Country',
                        gridLines: { visible: true },
                        valuesOnTicks: false
                    },
                colorScheme: 'scheme01',
                columnSeriesOverlap: false,
                seriesGroups:
                    [
                        {
                            type: 'line',
                            valueAxis:
                            {
                                visible: true,
                                unitInterval: 10,
                                title: { text: 'Debt (% of GDP)' },
                                gridLines: { visible: false },
                                labels: { horizontalAlignment: 'left' }
                            },
                            series: [
                                    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
                                ]
                        }

                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px;">
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
April 24, 2015 at 9:54 am Proportional Display of CategoryAxis In Column Chart #70229

vinodn
Participant

Hi Dimitar,

Thank you for the replay! Using this solution I can avoid manually calculation outside the chart.
And one more question, can I use callback function for unitInterval?
i.e.,
…
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
visible: true,
unitInterval: fuction() { // Some logic.. },
title: { text: ‘Debt (% of GDP)’ },
gridLines: { visible: false },
labels: { horizontalAlignment: ‘left’ }
},
series: [
{ dataField: ‘DebtPercent’, displayText: ‘Debt (% of GDP)’ }
]
}
]
…

Best Regards,
Rinkal

April 24, 2015 at 11:42 am Proportional Display of CategoryAxis In Column Chart #70240
Dimitar
Participant
Hi Rinkal,

No, unitInterval has to have a numeric value. However, you may set it to the result of a function which returns a number, e.g.:
```
...
unitInterval: calculateUnitInterval(),
...
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
April 24, 2015 at 12:18 pm Proportional Display of CategoryAxis In Column Chart #70243

vinodn
Participant

Thanks Dimitar.
Author

Posts

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

You must be logged in to reply to this topic.