range selector zooming - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

range selector zooming Posts

November 14, 2017 at 11:21 am range selector zooming #97313

Participant

Hi
kindly asking for help!
on the example below, if clicking the button, I can change the range selector progammatically, switching between 2 ranges.
As soon as I change the range clicking on the selector below the graph (a simple mouse click is enough), then the button is not working anymore.

That is the code:


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>JavaScript Chart Range Selector Example with zooming</title>
    <meta name="description" content="This is an example of JavaScript Chart Range Selector with Zooming." />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <meta name="keywords" content="jQuery range selector, jQWidgets, jqxRangeSelector, range, range selector, range selector widget" />
    <script type="text/javascript" src="scripts/jquery-1.12.4.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="scripts/demos.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxchart.rangeselector.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxrangeselector.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
         	  var changeRange = 0; 
        	
	   var sampleData = [];
		for ( i = 0; i <= 100; i++) {  
		 sampleData.push({Temp: i*10, testval: i});
		} 
 
            // prepare jqxChart settings
            var settings = {
                title: "Range selector with regular x-axis",
                description: "In this example the range selector works with (non-date) axis",
                enableAnimations: false,//true,
                showLegend: false,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 20, bottom: 5 },
                colorScheme: 'scheme02',
                source: sampleData,
                xAxis:
                    {
                        minValue: 15,
                        maxValue: 50,
                     
                   type:'linear',
                        dataField: 'testval',
                        flip: false,
                        valuesOnTicks: true,
                        labels: { 
                        	angle: -45, offset: { x: -17, y: 0} ,
                        	
                        },                        
                        rangeSelector: {
                        	     serieType: 'area',
                            padding: { /*left: 0, right: 0,*/ top: 20, bottom: 0 },
                            // Uncomment the line below to render the selector in a separate container
                            //renderTo: $('#selectorContainer'),
                            backgroundColor: 'white',
                            size: 110,
                            gridLines: {visible: false},

                        }	
                        
                    },
                seriesGroups:
                    [
                        {
                            type: 'line',
                           
                            valueAxis:
                            {
                                flip: false,
                                title: {text: 'Value<br><br>'}
                            },
                            series: [
                                { dataField: 'Temp', lineWidth: 1, lineWidthSelected: 1 }
                            ]
                        }

                    ]
            };

 	   $('#chartContainer').jqxChart(settings);
  

                              
            $('#jqxButtontest').on('click', function (event) {
            	
	            var chart= $('#chartContainer' ).jqxChart('getInstance');
	            	
	            if (changeRange)
	            {
	            	chart.xAxis.minValue = 40;
	            	chart.xAxis.maxValue = 70;
	                changeRange =0;
	            }else{
	                chart.xAxis.minValue = 60;
	                chart.xAxis.maxValue = 80;
	                changeRange =1;         	
	            }
	          
	    	    chart.update();	
 	}); 
            	
            	
                
        
                
                 
               
       
                           
            
        });
    </script>
</head>
<body class='default'>
    <p>
        <div id='chartContainer' style="width:800px; height:500px;">
        </div>
    </p>
    <p>
        <!-- you can optionally render the selecor in this container -->
        <div id='rangeSelector' style="width:500px; height:100px;">
        </div>
           <div>
                <input type="button" value="Button" id='jqxButtontest' />
               
            </div>    
        
    </div>
        
         
    </p>
    <div class="example-description">
    <br />
    <h2>Description</h2>
    <br />
    This is an example of JavaScript Chart Range Selector with Zooming.
    </div>
</body>
</html>

Many thanks,
Paolo

November 20, 2017 at 11:12 am range selector zooming #97448

Hristo

Participant

Hello Paolo,

Thank you for this feedback.
I will create a work item for this case.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

December 7, 2017 at 4:11 pm range selector zooming #97814

paolomail

Participant

thanks you Hristo for taking care of my problem.
Please can you advise me if a solution is found ?
Thanks very much
Paolo

December 12, 2017 at 12:13 pm range selector zooming #97897

Hristo

Participant

Hello Paolo,

You could check our “Release History” page from time to time.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.