     <!-- jquery-->
     <script src="../assets/js/jquery-2.2.4.min.js" type="text/javascript"></script>
     <!-- Plugins js -->
     <!-- <script src="../assets/js/plugins.js" type="text/javascript"></script> -->
     <!-- Popper js -->
     <script src="../assets/js/popper.js" type="text/javascript"></script>
     <!-- Bootstrap js -->
     <script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
     <!-- WOW JS -->
     <script src="../assets/js/wow.min.js"></script>
     <!-- Owl Cauosel JS -->
     <script src="../assets/vendor/OwlCarousel/owl.carousel.min.js" type="text/javascript"></script>
     <!-- Meanmenu Js -->
     <script src="../assets/js/jquery.meanmenu.min.js" type="text/javascript"></script>
     <!-- Srollup js -->
     <script src="../assets/js/jquery.scrollUp.min.js" type="text/javascript"></script>
    
     <!-- Isotope js -->
     <!-- <script src="../assets/js/isotope.pkgd.min.js" type="text/javascript"></script> -->
     <!-- Magnific Popup -->
     <script src="../assets/js/jquery.magnific-popup.min.js"></script>
   
     <script src="../assets/js/main.js" type="text/javascript"></script>   
     <script>
      function client_slider_two(){
        if ( $('.client_slider').length ){
            $('.client_slider').owlCarousel({
                loop:true,
                margin: 30,
                items: 6,
                nav:false,
                autoplay: true,
                smartSpeed: 1500,
                dots:false,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 2,
                    },
                    480: {
                        items: 3,
                    },
                    600: {
                        items: 4,
                    },
                    992: {
                        items: 6,
                    }
                }
            })
        }
    }
    client_slider_two();

    
    </script>   
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['ذكور', 4],
          ['اناث', 6],
        
        ]);

        // Set chart options
        var options = {'title':'',
                       'width':500,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script> 
     <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
  
        function drawChart() {
          var data = google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2004',  1000,      400],
            ['2005',  1170,      460],
            ['2006',  660,       1120],
            ['2007',  1030,      540]
          ]);
  
          var options = {
            title: 'Company Performance',
            curveType: 'function',
            legend: { position: 'bottom' }
          };
  
          var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  
          chart.draw(data, options);
        }
      </script> 


      <script type="text/javascript">
        google.charts.load('current', {'packages' : ['orgchart']});
        google.charts.setOnLoadCallback(function() { sendAndDraw('') });
    
        var dataSourceUrl = 'https://spreadsheets.google.com/tq?key=rCaVQNfFDMhOM6ENNYeYZ9Q&pub=1';
        var query;
    
        function sendAndDraw(queryString) {
          var container = document.getElementById('orgchart');
          var orgChart = new google.visualization.OrgChart(container);
          query && query.abort();
          query = new google.visualization.Query(dataSourceUrl + queryString);
          var queryWrapper = new QueryWrapper(query, orgChart, {'size': 'large'}, container);
          queryWrapper.sendAndDraw();
        }
        

/**
 * Constructs a new query wrapper with the given query, visualization,
 * visualization options, and error message container. The visualization
 * should support the draw(dataTable, options) method.
 * @constructor
 */
var QueryWrapper = function(query, visualization, visOptions, errorContainer) {

this.query = query;
this.visualization = visualization;
this.options = visOptions || {};
this.errorContainer = errorContainer;
this.currentDataTable = null;

if (!visualization || !('draw' in visualization) ||
    (typeof(visualization['draw']) != 'function')) {
  throw Error('Visualization must have a draw method.');
}
};


/** Draws the last returned data table, if no data table exists, does nothing.*/
QueryWrapper.prototype.draw = function() {
if (!this.currentDataTable) {
  return;
}
this.visualization.draw(this.currentDataTable, this.options);
};


/**
* Sends the query and upon its return draws the visualization.
* If the query is set to refresh then the visualization will be drawn upon
* each refresh.
*/
QueryWrapper.prototype.sendAndDraw = function() {
var query = this.query;
var self = this;
query.send(function(response) {self.handleResponse(response)});
};


/** Handles the query response returned by the data source. */
QueryWrapper.prototype.handleResponse = function(response) {
this.currentDataTable = null;
if (response.isError()) {
  this.handleErrorResponse(response);
} else {
  this.currentDataTable = response.getDataTable();
  this.draw();
}
};


/** Handles a query response error returned by the data source. */
QueryWrapper.prototype.handleErrorResponse = function(response) {
var message = response.getMessage();
var detailedMessage = response.getDetailedMessage();
if (this.errorContainer) {
  google.visualization.errors.addError(this.errorContainer,
      message, detailedMessage, {'showInTooltip': false});
} else {
  throw Error(message + ' ' + detailedMessage);
}
};


/** Aborts the sending and drawing. */
QueryWrapper.prototype.abort = function() {
this.query.abort();
};
    
      </script>
 </body>


</html>