Zoom in (scrolling) bubble chart or bar chart

[SanatanParticipant]

I would like to know that, is it possible that i can zoom in a bubble chat to clearly see a bubble ( bubble chart contain more than 100 bubbles)

[MariyaParticipant]

Hi Sanatan,

Thank you for your interest in jqxChart but it is not possible to have a zoom in a bubble chart.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[marveenParticipant]

any workaround this ? or in the futere versions.

[Peter StoevKeymaster]

Hi marveen,

Zooming feature is still not in our development plans. We may consider it in the future.

Best Regards,
Peter Stoev

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

[RCWParticipant]

Actually I have created a zoom method using a range slider to change the CategoryAxis and limit the years selected on a time series of data, I stripped down the range slider demo to do this:

Variables for categoryAxis minValue/maxValue:

var XminVal = 2012; // default
var XmaxVal = 2037; // default

Setup:

// setup the slider
    var theme = getDemoTheme();
    var yearsSlider = $('#yearsSlider'),
    resetButton = $('#resetButton');
    yearsSlider.jqxSlider({ theme: theme, height: 30, min: 2012, max: 2037, step: 5, ticksFrequency: 5, values: [2012, 2037], rangeSlider: true, mode: 'fixed', width: 240 });
    resetButton.jqxButton({ theme: theme, width: 100 });
    // initialise Slider
    selectYear.init(yearsSlider, resetButton);

Slider:

var selectYear = (function ($) {
                    // wait for the slider to move
                    var addEventListeners = function () {
                        $('.jqx-slider').on('change', function (event) {
                            handleSlide('years', event.args.value);
                            var XminVal;
                            var XmaxVal;
                            catAxis(event.args.value.rangeStart, event.args.value.rangeEnd);
                        });
                                                
                        // call reset slider
                        $('#resetButton').on('click', function () {
                            resetSlider();
                        });
                        // change the X-Axis
                         $('#cataxisButton').on('click', function () {
                            catAxis(XminVal, XmaxVal);
                         });
                    };
                    
                    // change the CATEGORY AXIS STUFF
                    var catAxis = function (XminVal,XmaxVal){
                    var categoryAxis = $('#jqxChart').jqxChart('categoryAxis');
                    // alert('Min value: ' + XminVal + ' - Max value: ' + XmaxVal);
                    categoryAxis.minValue = XminVal;
                    categoryAxis.maxValue = XmaxVal;
                    categoryAxis.unitInterval = 1;
                    $('#jqxChart').jqxChart('refresh');
                    };
                    // the reset function
                    var resetSlider = function () {
                        this.yearsSlider.jqxSlider('setValue', [this.yearsSlider.jqxSlider('min'), this.yearsSlider.jqxSlider('max')]);
                        var categoryAxis = $('#jqxChart').jqxChart('categoryAxis');
                        categoryAxis.minValue = 2012;
                        categoryAxis.maxValue = 2037;
                        categoryAxis.unitInterval = 1;
                        $('#jqxChart').jqxChart('refresh');
                    };
                    // change label & value on slider
                    var handleSlide = function (option, value) {
                        setLabelValue('yearsSlider', option, value);
                    };
                   // set the labels & value on slider
                    var setLabelValue = function (yearsSlider, option, value) {   
                        var XmaxVal = document.getElementById('yearsMax').innerHTML = value.rangeEnd;
                        var XminVal = document.getElementById('yearsMin').innerHTML = value.rangeStart;
                            if(XminVal == XmaxVal) {
                            alert("Can't have the same start and end years");
                            resetSlider();
                            }
                    };
                    // Set variables
                    var initSliders = function (yearsSlider, resetButton) {
                        this.yearsSlider = yearsSlider;
                        this.resetButton = resetButton;
                    };
                    // Set initial load from variables
                    return {
                        init: function (yearsSlider,  resetButton) {
                                initSliders(yearsSlider, resetButton);
                                addEventListeners();
                                setLabelValue(yearsSlider, 'years', yearsSlider.jqxSlider('value'));
                        }
                    };

Markup for Slider:

<div id="jqx-widget">
     <div id="main-container" class="main-container jqx-rc-all">
            <div id="options" class="options jqx-rc-all">
                <div id="options-container" class="options-container">
                    <div class="label">YEARS</div>
                    <div class="options-value">
                        <div id="yearsMin"></div>
                        <div id="yearsTo">To</div>        
                        <div id="yearsMax"></div>
                    </div>
                    <br />
                   <div id='yearsSlider'></div>
                    <input type="button" value="Reset" id="resetButton" class="resetButton" />
                </div>
            </div>
            <div style="clear: both;">
            </div>
        </div>
        </div>

Also able to amend valueAxis using similar principal and by getting minimum & maximum values from data.

[Author]

Posts