  $(document).ready(function() {
							 
	var $flowchart = $('#db_1');
	
	// Zoom content Start
	var $container = $flowchart.parent();    
    var cx = $flowchart.width() / 2;
    var cy = $flowchart.height() / 2;
	$flowchart.panzoom();
	$flowchart.panzoom('pan', -cx + $container.width() / 2, -cy + $container.height() / 2);
	 var possibleZooms = [0.5, 0.75, 1, 2, 3];
    var currentZoom = 2;
    $container.on('mousewheel.focal', function( e ) {
        e.preventDefault();
        var delta = (e.delta || e.originalEvent.wheelDelta) || e.originalEvent.detail;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        currentZoom = Math.max(0, Math.min(possibleZooms.length - 1, (currentZoom + (zoomOut * 2 - 1))));
        $flowchart.flowchart('setPositionRatio', possibleZooms[currentZoom]);
        $flowchart.panzoom('zoom', possibleZooms[currentZoom], {
            animate: false,
            focal: e
        });
    });
	// Zoom content End
	
	// default data start
    var data = {
      operators: {
      }
    };
	// default data end
	
    // Apply the plugin on a standard, empty div...
    
    $flowchart.flowchart({
      data: data
    });
    
    var operatorI = 0;
    //$flowchart.siblings
	$('.create_operator').click(function() {
      var operatorId = 'created_operator_' + operatorI;
      var operatorData = {
        top: 60,
        left: 200,
        properties: {
          title: 'Operator ' + (operatorI + 1),
          inputs: {
              ins: {
                label: 'Input (:i)',
                multiple: true
              }
            },
          outputs: {
              outs: {
                label: 'Output (:i)',
                multiple: true
              }
            }
        }
      };
      
      operatorI++;
      
      $flowchart.flowchart('createOperator', operatorId, operatorData);
    });
	
	/*-----------------------------------------------------------------*/
	
	var $flowchart2 = $('#db_Excel');
	
	// Zoom content Start
	var $container = $flowchart2.parent();    
    var cx = $flowchart2.width() / 2;
    var cy = $flowchart2.height() / 2;
	$flowchart2.panzoom();
	$flowchart2.panzoom('pan', -cx + $container.width() / 2, -cy + $container.height() / 2);
	 var possibleZooms = [0.5, 0.75, 1, 2, 3];
    var currentZoom = 2;
    $container.on('mousewheel.focal', function( e ) {
        e.preventDefault();
        var delta = (e.delta || e.originalEvent.wheelDelta) || e.originalEvent.detail;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        currentZoom = Math.max(0, Math.min(possibleZooms.length - 1, (currentZoom + (zoomOut * 2 - 1))));
        $flowchart2.flowchart('setPositionRatio', possibleZooms[currentZoom]);
        $flowchart2.panzoom('zoom', possibleZooms[currentZoom], {
            animate: false,
            focal: e
        });
    });
	// Zoom content End
	
	
	// default data start
    var data2 = {
      operators: {
      }
    };
	// default data end
	
    // Apply the plugin on a standard, empty div...
    
    $flowchart2.flowchart({
      data2: data
    });
    
    var operatorM = 0;
    //$flowchart.siblings
	$('.create_operator2').click(function() {
      var operatorId = 'created_operator_' + operatorM;
      var operatorData = {
        top: 60,
        left: 200,
        properties: {
          title: 'Operator ' + (operatorM + 1),
          inputs: {
              ins: {
                label: 'Input (:i)',
                multiple: true
              }
            },
          outputs: {
              outs: {
                label: 'Output (:i)',
                multiple: true
              }
            }
        }
      };
      
      operatorM++;
      
      $flowchart2.flowchart('createOperator', operatorId, operatorData);
    });
	
    
   // $flowchart.siblings
	/*$('.delete_selected_button').click(function() {
      $flowchart.flowchart('deleteSelected');
    });*/
	


	$('html').keyup(function(e){
		if(e.keyCode == 46) {
			$flowchart.flowchart('deleteSelected');
			$flowchart2.flowchart('deleteSelected');
		}
	});

	
	//$flowchart.siblings
	$('.get_data').click(function() {
      var data = $flowchart.flowchart('getData');
      $('#flowchart_data').val(JSON.stringify(data, null, 2));
    });
	
	
	
	<!--canvas div show/hide-->
		/*$("#db_Excel").hide();
		$(".create_operator").click(function(){
		$("#db_1").show(200);
		$("#db_Excel").hide(200);
		});
		
		$(".create_operator2").click(function(){
		$("#db_1").hide(200);
		$("#db_Excel").show(200);
		});*/
		
		<!--end canvas div show/hide-->
	
  });
