Welcome Guest Search | Active Topics |

Using a single x zoom to zoom multiple charts
Options
Previous Topic Next Topic
d20gdx
#1 Posted : Thursday, August 04, 2016 4:00:09 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 8/4/2016(UTC)
Posts: 2

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Hi

thanks for your wonderful jqchart library, its very good. Apologies if this has been asked before.

I have a requirement where separate charts all have the same x axis values. What I want to do is to have a single zoom bar on one chart which also zooms all the other charts at the same time.


I have got code like this working (it changes the y axis max). but I can't figure out how to programatically set the x-axis range on the second chart, Any help would be appreciated please

Code:

     $('#jqChart2').bind('axisZoom', function(e, data) {
       
                 
                  var chart = data.chart;
                  var axis = data.axis;
                 
                  $('.slider-time').html(Math.round(axis.actualVisibleMinimum));
                  $('#jqChart').jqChart('option', 'background', 'yellow');
                 
             

                  $('#jqChart').jqChart('option', 'axes', [ {
                     maximum : 100000
                  } ]);
                 
       
                 
               });
Back to top
Dragan
#2 Posted : Thursday, August 04, 2016 9:32:45 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

Here is the code you can use:
Code:
$('#jqChart').bind('axisZoom', function (e, data) {

            var axis = data.axis;
            var minX = axis._getActualVisibleMinimum();
            var maxX = axis._getActualVisibleMaximum();

            var axes = $('#jqChartVolume').jqChart('option', 'axes');
            var bottomAxis = axes[0];
            bottomAxis.visibleMinimum = minX);
            bottomAxis.visibleMaximum = maxX;

            $('#jqChartVolume').jqChart('update');
        });


With this code you can synchronize this example:
http://www.jqchart.com/jquery/chart/FinancialCharts/CandlestickChartWithVolume

In your case just make sure you are defining the bottom axis as first in the axis array:

Code:
axes: [
    {
       location: 'bottom',
           ...
    },
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.121 seconds.