Home Forums Chart Support Synchronized Charts

Synchronized Charts

Viewing 8 posts - 1 through 8 (of 8 total)
  • #33424

    Hello every one, is there an option to synchronized panning/zooming option?

    I mean if I do a zoom in one chart and then change to pan, can i change the option in the other to pan chart as well?

    I let you my jsfiddle

    Thanks!

    #33500

    @nerviozzo96,

    Yes, it is possible to sync zoom / pan button across multiple charts. You can achieve this by triggering the click event on the zoom / pan button on all charts when a user clicks on it in one of the charts as shown below:

    function syncZoomPanButtonClick() {
      var toolbars = document.getElementsByClassName("canvasjs-chart-toolbar");
      for(var j = 0; j < toolbars.length; j++) {
        toolbars[j].firstChild.addEventListener("click", function(e) {
          for(var j = 0; j < toolbars.length; j++){
            if(this != toolbars[j].firstChild && e.isTrusted === true) {
              toolbars[j].firstChild.click();
            }
          }
        });
      }
    }

    Please take a look at this JSFiddle for a working example with sample code.

    Sync zoom / pan button across multiple charts


    Shashi Ranjan
    Team CanvasJS

    #33610

    Thanks!

    #34388

    Hi there, im having a little problem with this.
    I want to have 2 charts with different values (that mean different maximums) with same width or margin.
    jsfiddle
    I let you an image to clarify what I mean Example

    #34448

    @nerviozzo96,

    You can align y-axis across multiple charts by setting the margin property. The margin value has to be calculated based on the bounds of y-axis as shown in the code below –

    var axisYBoundMax = 0;
    for (var i=0; i<charts.length; i++) {
      axisYBoundMax = Math.max(axisYBoundMax, charts[i].axisY[0].bounds.x2);
    }
    
    for(var i = 0; i < charts.length; i++) {
      charts[i].axisY[0].set("margin", axisYBoundMax - (charts[i].axisY[0].bounds.x2 - charts[i].axisY[0].bounds.x1));
    } 

    Please take a look at this JSFiddle for complete working code.

    Align Y-axis across Multiple Charts

    —-
    Manoj Mohan
    Team CanvasJS

    #34510

    Thanks, I guess the same applies for the x axis right?

    #34514

    Hi there, this dont work on chart updates. I let you the example
    Try to hide and show Series multiple times

    #34525

    @nerviozzo96,

    Thanks, I guess the same applies for the x axis right?

    Yes, you can align x-axis across multiple chart using same logic as mentioned above.

    Hi there, this dont work on chart updates. I let you the example
    Try to hide and show Series multiple times

    You can reset the margin of y-axis to 0 before aligning the y-axis across multiple charts as shown in the code snippet below.

    for(var i = 0; i < charts.length; i++) {
       charts[i].axisY[0].set("margin", 0);
    }

    Also, please take a look at this updated JSFiddle for complete code.

    —-
    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.