Zoom options for Polar Chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, javascript chart, jquery chart, jqwidgets chart

This topic contains 1 reply, has 2 voices, and was last updated by Hristo 7 years, 1 month ago.

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

Author

Zoom options for Polar Chart Posts

August 7, 2017 at 9:39 pm Zoom options for Polar Chart #95353

Participant

Hi,

I see that we have zoom controls for xy plots like shown in one of this demo problems http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_range_selector_nondate.htm

(a) Is there a way to provide a zoom a polar chart like this for the value axis? I didn’t find any such option specifically for the polar charts.
https://www.jseditor.io/?key=polar-plot-spacing-issue

(b) I was trying to mimic the zoom manually by taking the min max radial values from the user. I also observed that for example, if I use the maxValue = 192, the plot is going beyond the polar chart area. Is there a way to avoid this spill. If option a is not available, may be I can mimic the zoom by setting the min, max values on the value axis.

valueAxis:
{
labels: {
formatSettings: { decimalPlaces: 0 },
autoRotate: true
},
minValue: -33,
maxValue: 192,
unitInterval: 96
},

August 9, 2017 at 10:26 am Zoom options for Polar Chart #95379

Hristo

Participant

Hello jmentey,

Unfortunately, there is no such option to use rangeSelector member.
I would like to suggest you try to create a workaround as you mentioned.
You could set new settings – maxValue. Also, you could transform the data that you receive with beforeLoadComplete callback of the DataAdapter.
Please, take a look the workaround below, it only demonstrates one approach to achieve this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>JavaScript Chart Polar Axis Example</title>
    <meta name="description" content="This is an example of JavaScript Chart Polar Axis." />
    <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/jqxdata.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/jqxslider.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
                {
                    datatype: "tab",
                    datafields: [
                        { name: 'Year' },
                        { name: 'HPI' },
                        { name: 'BuildCost' },
                        { name: 'Population' },
                        { name: 'HPI2' },
                        { name: 'Rate' }
                    ],
                    url: '../sampledata/homeprices.txt'
                };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                async: false, autoBind: true,
                loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); },
                beforeLoadComplete: (records) => {
                    if (isChanged) {
                        for (var i = 0; i < records.length; i++) {
                            if (records[i].HPI < 140) {
                                records[i].HPI2 = records[i].HPI;
                            }
                            // Uncomment these rows below to avoid zero 'pick''
                             /*
                            else {
                                records[i].HPI2 = 140;
                            }
                        */                            
                        }
                    }                    

                    return records;
                }
            });

            var isChanged = false;

            var series1 = [
                { dataField: 'HPI', displayText: 'Real Home Price Index', opacity: 0.7, lineWidth: 1, radius: 2, lineWidth: 2 },
                { dataField: 'BuildCost', displayText: 'Building Cost Index', opacity: 0.7, lineWidth: 1, radius: 2, lineWidth: 2 }
            ];

            var series2 = [
                { dataField: 'HPI2', displayText: 'HPI2', opacity: 0.7, lineWidth: 1, radius: 2, lineWidth: 2 },
                { dataField: 'BuildCost', displayText: 'Building Cost Index', opacity: 0.7, lineWidth: 1, radius: 2, lineWidth: 2 }
            ];

            // prepare jqxChart settings
            var settings = {
                title: "U.S. Real Home Price vs Building Cost Indeces (1950-2010)",
                description: "Source: http://www.econ.yale.edu/~shiller/data.htm",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 5 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'Year',
                    unitInterval: 10,
                    maxValue: 2010,
                    valuesOnTicks: true,
                    labels: { autoRotate: true }
                },
                valueAxis:
                {
                    //maxValue: 140,
                    labels: {
                        formatSettings: { decimalPlaces: 0 },
                        autoRotate: true
                    },
                },
                colorScheme: 'scheme01',
                seriesGroups:
                [
                    {
                        polar: true,
                        radius: 240,
                        type: 'spline',

                        series: series1
                    }
                ]
            };

            $('#click').jqxButton();
            $('#click').click(() => {
                isChanged = true;
                var valueAxis = chart.valueAxis;
                valueAxis.maxValue = 140;
                var seriesGroups = chart.seriesGroups[0];
                seriesGroups.series = series2;

                dataAdapter.dataBind();
                chart.update();
            });

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

            // get the chart's instance
            var chart = $('#chartContainer').jqxChart('getInstance');
        });
    </script>
</head>
<body class='default'>
    
    <button id="click">Update (Zoom)</button>

    <div id='chartContainer' style="width: 850px; height: 600px">
    </div>
    
</body>
</html>

(it looks better if you uncomment else state in the beforeLoadComplete callback function)

Best Regards,
Hristo Hristov

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.