Dash_2.0_Publicação

<html>

<head>
  <title>Dashboard | Siscoserv</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.css" />

.tooltip {
		    top: 100px;
		    left: 100px;
		    -moz-border-radius: 5px;
		    border-radius: 5px;
		    border: 2px solid #000;
		    background: #fff;
		    opacity: .9;
		    color: black;
		    padding: 10px;
		    width: 375px;
		    font-size: 1.6em;
		    line-height: 28pt;
		    /*font-weight: lighter;*/
		    /*visibility: visible;*/
		}
		
		table.table {
			display: table;
			width: 100%;
		}
		
		table.table thead,
		table.table tbody {
			float: left;
			width: 100%;
		}
		
		table.table tbody {
			overflow: auto;
			height: 350px;
		}
		
		table.table tr {
			width: 100%;
			display: table;
			text-align: left;
		}
		
		table.table th,
		table.table td {
			width: 20%;
		}
		
		.filter-count,
		.total-count,
		.number-display,
		#dateHeader {
			color: #3182bd;
			font-weight: bold;
			font-size: 24px;
		}
		
		/*
		 * Full-page application style
		 */
		
		body.application,
		.keen-dashboard {
		  background: #f2f2f2;
		  padding: 20px 20px 0px;
		}
		
		body.application > .container-fluid,
		.keen-dashboard > .container-fluid {
		  margin: 0px 0px 32px;
		  margin: 0px 0px 2rem;
		  padding-left: 0px;
		  padding-right: 0px;
		}
		
		body.application div[class^="col-"],
		.keen-dashboard div[class^="col-"] {
		  padding-left: 5px;
		  padding-right: 5px;
		}
		
		body.application div[class^="col-"] div[class^="col-"],
		.keen-dashboard div[class^="col-"] div[class^="col-"] {
		  padding-left: 15px;
		  padding-right: 15px;
		}
		
		body.application hr,
		.keen-dashboard hr {
		  border-color: #d7d7d7;
		  margin: 10px 0px;
		}
		
		body.application .navbar-inverse,
		.keen-dashboard .navbar-inverse {
		  /*background-color: #3d4a57;*/
		  border-color: #333;
		}
		
		body.application .navbar-inverse .navbar-nav > li > a,
		body.application .navbar .navbar-brand,
		.keen-dashboard .navbar-inverse .navbar-nav > li > a,
		.keen-dashboard .navbar .navbar-brand {
		  color: #fbfbfb;
		  text-decoration: none;
		}
		
		body.application .main-nav > li > a:hover,
		.keen-dashboard .main-nav > li > a:hover {
		  border-bottom: 2px solid transparent;
		  -webkit-transition: border 300ms ease;
		  -o-transition: border 300ms ease;
		  transition: border 300ms ease;
		  border-bottom-color: white;
		}
		
		body.application .return-link,
		body.application .return-link:focus,
		body.application .return-link:hover,
		.keen-dashboard .return-link,
		.keen-dashboard .return-link:focus,
		.keen-dashboard .return-link:hover {
		  text-decoration: none;
		}
		
		
		.chart-wrapper {
		  background: #fff;
		  border: 1px solid #e2e2e2;
		  border-radius: 3px;
		  margin-bottom: 10px;
		}
		.chart-wrapper .chart-title {
		  border-bottom: 1px solid #d7d7d7;
		  color: #666;
		  font-size: 14px;
		  font-weight: 200;
		  padding: 7px 10px 4px;
		}
		
		.chart-wrapper .chart-stage {
		  overflow: hidden;
		  padding: 5px 10px;
		  position: relative;
		}
		
		.chart-wrapper .chart-notes {
		  background: #fbfbfb;
		  border-top: 1px solid #e2e2e2;
		  color: #808080;
		  font-size: 12px;
		  padding: 8px 10px 5px;
		}
		.navbar-inverse {
			background-color: #3182bd;
		}
		
		.dc-chart .selected path {
			stroke-width: 1.0;
            
            
		}
		
		.col-sm-2,
		.col-sm-3,
		.col-sm-4,
		.col-sm-6,
		.col-sm-8,
		.col-sm-9,
		.col-sm-12 {
			/*border: solid;*/
		}
    .dc-chart g.row text {
    fill: black;
    font-size: 12px;
    cursor: pointer;    
        }
   
    .x.axis path {
    stroke-width: 1.5;
   }    
    
    .dc-chart g.axis x{
        fill: yellow;
        
    }
        
   text.shadow {
  stroke: #fff;
  stroke-width: 2.5px;
  opacity: 0.9;
}

path { 
    stroke: steelblue;
    
    
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.grid .tick {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}
.grid path {
          stroke-width: 0;
}

.area {
    fill: lightsteelblue;
      stroke-width: 0;
}

</style>
    
    
    
    
    
    
<body class="application">

<div class="navbar navbar-inverse" role="navigation">
	
    <div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
				<a class="navbar-brand" href="../">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</a>
				
            <a class="navbar-brand" href="./">Siscoserv BI-Sexi</a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-left">
					<li><a href="https://www.mdic.gov.br/index.php/comercio-servicos/estatisticas-do-comercio-exterior-de-servicos">Estatísticas</a></li>
					<li><a href="https://www.mdic.gov.br/">Ministério da Indústria, Comércio Exterior e Serviços</a></li>
				</ul>    
                
			</div>
		</div>
     </div>
  
    <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#panel_1">Painel Dinâmico</a></li>
    <li><a data-toggle="tab" href="#company">Empresas</a></li>
    
      
      
        
      
  </ul>

<div class="tab-content">
    
    <div id="panel_1" class="tab-pane fade in active">
   <div class="container-fluid">
		
		<div class="row" style="padding-top:50px;padding-bottom:10px">
			
			
			<div class="col-sm-3" >
				<div class="tool radius">
					<h5 class="text-uppercase">Total (USD)</h5>
					<div class="dc-chart" id="totalizador"></div>
					
				</div>
			</div>
			<div class="col-sm-5">
				<div class="tool radius">
					<h5 class="text-uppercase">Seleção</h5>
					<div class="dc-chart" id="data-count">
						<span class="filter-count"></span> registros selecionados de
						<span class="total-count"></span> registros
						<span>
							<a href='javascript:dc.filterAll();dc.redrawAll();'><font class="text-uppercase" color="#3182bd">Reset All</font></a>
						</span>
					</div>
					
				</div>
			</div>
            
            <div class="col-sm-3">
				<div class="tool radius">
					<h5 class="text-uppercase">Ano Base</h5>
					<select class="form-control" id="anobase"></select>
				</div>
			</div>
		</div>

<div class="row">
			
            
			<div id="largura_1" class="col-sm-3">
				
				<div class="chart-wrapper">
					<div class="chart-title">
						<span>Módulo</span>
					</div>
					
					<div class="chart-stage">
                        <div class="alert alert-info alert-dismissable">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                            <strong>Info !</strong> Selecione um Módulo! </div>
						
                        <div id="chart-ring-status" class="dc-chart">
							<div>Selecionado: <span class="filter"></span>
								<a class="reset" href="javascript:statusRingChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
							</div>
						</div>
						
					</div>
					
					<div class="chart-notes"></div>
					
				</div>
				
			</div>
            
            
			<div class="col-sm-5">
				<div class="chart-wrapper">
					<div class="chart-title">
						<span>Principais Parceiros Comerciais</span>
					</div>
					<div class="chart-stage">
                        <div class="alert alert-info alert-dismissable">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                            <strong>Info !</strong> Selecione um País! </div>
						
						<div id="chart-country-bar" class="dc-chart">
							<div>Selecionado: <span class="filter"></span>
								<a class="reset" href="javascript:CountryBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
							</div>
						</div>
						
					</div>
					<div class="chart-notes"></div>
				
				</div>
			</div>
            
            
            
            
            
            
			
			
            			
            <div class="col-sm-4">
				<div class="chart-wrapper">
					<div class="chart-title">
						<span>Principais Unidades da Federação que Comercializaram Serviços</span>
					</div>
					<div class="chart-stage">
                        
						<div id="UFBarChart" class="dc-chart">
							<div>Selecionado: <span class="filter"></span>
								<a class="reset" href="javascript:ufBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
							</div>
						</div>
						
					</div>
					<div class="chart-notes"></div>
				
				</div>
			</div>
       
		
       
       
       
       </div>
		
       
        
		
		<div class="row">
			
            <div class="col-sm-8">
				
				<div class="chart-wrapper">
					<div class="chart-title">
                        <span><strong>Capítulo</strong> Para especificar as informações relativas a um capítulo basta selecioná-lo no gráfico.</span>
					</div>
					
					<div class="chart-stage">
                        
						<div id="chart-bolha-capítulo" class="dc-chart">
							<div >Selecionado: <span class="filter" ></span>
								<a class="reset" href="javascript:chapterBubble.filterAll();dc.redrawAll();" style="display:none;">reset</a>
							</div>
						</div>
						
					</div>
					
					<div class="chart-notes"></div>
					
				</div>
				
			</div>
            
        <div id="temp" class="col-sm-4">
				<div class="chart-wrapper">
					<div class="chart-title">
						<span>Serviços</span>
					</div>
					<div class="chart-stage">
                        <div class="alert alert-info alert-dismissable">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                            <strong>Info !</strong> Apresentação dos Serviços em nível de Subitem.
                          </div>

<div id="subitem-row-chart" class="dc-chart">
							<div>Selecionado: <span class="filter"></span>
								<a class="reset" href="javascript:servRowChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
							</div>
						</div>
						
					</div>
					<div class="chart-notes"></div>
				
				</div>
			</div>
            
			
			
			
			
		</div>
		
        <div class="row">
            
            
        
        </div>
       
       
		
		<div class="row">
			<div class="col-sm-12">
				<div class="chart-wrapper">
                    
					<div class="chart-title">Tabela Resumo</div>
                     
					<div class="chart-stage">
						<table class="table table-striped table-hover" id="data-table"></table>
					</div>
                    <button type="button" class="btn btn-primary btn-block" id="download3" ><strong>Download</strong></button>
					<div class="chart-notes"></div>
                    
				</div>
			</div>
		</div>

</div>        
        
    </div>
      
       
      
      
      
    <div id="company" class="tab-pane fade">
        <div id="GroupedBarChart"  role="main">
        </div>
     </div>    
      
      
      
        
        
  </div>

</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	
	<script type="text/javascript" src="https://d3js.org/d3-queue.v3.min.js" charset="utf-8"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.js"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
    
	
	<script type="text/javascript">
		
		  
      
		 fiscalYear = 2016; // default fiscal year in the selection drop down
		
		// dc.js chart types
		var summation = dc.numberDisplay("#totalizador"),
		    CountryBarChart = dc.barChart("#chart-country-bar"),
		    chapterBubble = dc.bubbleChart("#chart-bolha-capítulo"),    
		    statusRingChart = dc.pieChart('#chart-ring-status'),
		    ufBarChart = dc.barChart("#UFBarChart"),
		    dataCount = dc.dataCount('#data-count'),
            servRowChart=dc.rowChart("#subitem-row-chart"),
		    dataTable = dc.dataTable('#data-table');
		
		// dimensions for the charts
		var height = 250,
		    width = height * 7/4;
		
        // tick label and tooltip formats
		
         f = d3.format("0.2s");

// group dimensions
		     var all = ndx.groupAll(),
		        uf_capítulo_1 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_1) { return d.total; } else { return 0; }}),
		        uf_capítulo_2 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_2) { return d.total; } else { return 0; }}),
		        uf_capítulo_3 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_3) { return d.total; } else { return 0; }}),
		        uf_capítulo_4 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_4) { return d.total; } else { return 0; }}),
		        uf_capítulo_5 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_5) { return d.total; } else { return 0; }}),
		        uf_capítulo_6 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_6) { return d.total; } else { return 0; }}),
		        uf_capítulo_7 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_7) { return d.total; } else { return 0; }}),
                uf_capítulo_8 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_8) { return d.total; } else { return 0; }}),
                uf_capítulo_9 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_9) { return d.total; } else { return 0; }}),
                uf_capítulo_10 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_10) { return d.total; } else { return 0; }}),
		         uf_capítulo_11 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_11) { return d.total; } else { return 0; }}),
                uf_capítulo_12 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_12) { return d.total; } else { return 0; }}),
                uf_capítulo_13 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_13) { return d.total; } else { return 0; }}),
                uf_capítulo_14 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_14) { return d.total; } else { return 0; }}),
                uf_capítulo_15 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_15) { return d.total; } else { return 0; }}),
                uf_capítulo_17 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_17) { return d.total; } else { return 0; }}),
                uf_capítulo_18 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_18) { return d.total; } else { return 0; }}), 
                uf_capítulo_19 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_19) { return d.total; } else { return 0; }}), 
                uf_capítulo_20 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_20) { return d.total; } else { return 0; }}), 
                uf_capítulo_21 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_21) { return d.total; } else { return 0; }}), 
                uf_capítulo_22 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_22) { return d.total; } else { return 0; }}), 
                uf_capítulo_23 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_23) { return d.total; } else { return 0; }}), 
                uf_capítulo_24 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_24) { return d.total; } else { return 0; }}), 
                uf_capítulo_25 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_25) { return d.total; } else { return 0; }}), 
                uf_capítulo_26 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_26) { return d.total; } else { return 0; }}), 
                uf_capítulo_27 = estadoDim.group().reduceSum(function(d) { if (d.capitulo == cap_27) { return d.total; } else { return 0; }}),
                amountByProgram = capituloDim.group().reduce(
		                function (p, v) {
		                    p.amount += +v.total;
		                    p.count += 1;
		                    return p;
		                },
		                function (p, v) {
		                    p.amount -= +v.total;
		                    p.count -= 1;
		                    return p;
		                },
		                function () {
		                    return {amount: 0, count: 0}; 
		                }),
                capítulo_1 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_1) { return d.total; } else { return 0; }}),
		        capítulo_2 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_2) { return d.total; } else { return 0; }}),
		        capítulo_3 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_3) { return d.total; } else { return 0; }}),
		        capítulo_4 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_4) { return d.total; } else { return 0; }}),
		        capítulo_5 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_5) { return d.total; } else { return 0; }}),
		        capítulo_6 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_6) { return d.total; } else { return 0; }}),
		        capítulo_7 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_7) { return d.total; } else { return 0; }}),
                capítulo_8 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_8) { return d.total; } else { return 0; }}),                
                capítulo_9 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_9) { return d.total; } else { return 0; }}),
		        capítulo_10 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_10) { return d.total; } else { return 0; }}),
                capítulo_11 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_11) { return d.total; } else { return 0; }}),
                capítulo_12 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_12) { return d.total; } else { return 0; }}),
                capítulo_13 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_13) { return d.total; } else { return 0; }}),
                capítulo_14 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_14) { return d.total; } else { return 0; }}),
                capítulo_15 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_15) { return d.total; } else { return 0; }}),
                capítulo_17 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_17) { return d.total; } else { return 0; }}),
                capítulo_18 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_18) { return d.total; } else { return 0; }}),
                capítulo_19 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_19) { return d.total; } else { return 0; }}),
                capítulo_20 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_20) { return d.total; } else { return 0; }}),
                capítulo_21 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_21) { return d.total; } else { return 0; }}),
                capítulo_22 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_22) { return d.total; } else { return 0; }}),
                capítulo_23 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_23) { return d.total; } else { return 0; }}),
                capítulo_24 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_24) { return d.total; } else { return 0; }}),
                capítulo_25 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_25) { return d.total; } else { return 0; }}),
                capítulo_26 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_26) { return d.total; } else { return 0; }}),
                capítulo_27 = paisDim.group().reduceSum(function(d) { if (d.capitulo == cap_27) { return d.total; } else { return 0; }}),
		        amountByStatus = moduloDim.group().reduceSum(function(d) { return d.total; }),
		        totalAmount = ndx.groupAll().reduceSum(function(d) { return d.total; }); 
            
		
             
		    var anobase = anoBaseDim.group().top(Infinity).map(function(d) { return d.key; }).sort(function(a, b) { return a - b; });
            
            
		    var programs = capituloDim.group().top(Infinity).map(function(d) { return d.key; });
		    var EstadoRange = estadoDim.group().top(Infinity).map(function(d) { return d.key; });
		    var paises = paisDim.group().top(Infinity).map(function(d) { return d.key; });
		    
		    var r_domain = d3.extent(capituloDim.group().top(Infinity).map(function(d) { return d.value; }));
            
            
		        // max = d3.max(capituloDim.group().top(Infinity).map(function(d) { return d.value; }));
		
		    var paises_domain = d3.extent(paisDim.group().top(Infinity).map(function(d) { return d.value; }));
		
		    
            
            
            
            // append option values to fiscal year select input
		    
            selector.selectAll("option")
		        .data(anobase)
		        .enter()
		        .append("option")
		        .attr("value", function(d) {
		            return d;
		        })
		        .text(function(d) {
		            return d;
		        });
		
        
		    // set default fiscal year
		    // define on change event
		    selector.property("value", fiscalYear).on("change", function() { anoBaseDim.filter(this.value); dc.redrawAll(); });
		        
       
            
            
            
		    // charts
		    summation
				.formatNumber(dFormat)
				.valueAccessor(function(d){ return d; })
				.group(totalAmount)
				.formatNumber(function(d) { return "USD " + d3.format(",.f")(d); });		
		     
       
       
               function remove_empty_bins(source_group) {
            return {
                all:function () {
                    return source_group.all().filter(function(d) {
                        return d.value >= 0.001;
                    });
                }
            };
        }
            
            
            
            chapterBubble
		        .width(width *2.85)
		        .height(height*1.94)
		        .dimension(capituloDim)
		        .group(amountByProgram)
		        .keyAccessor(function(p) {
		            return p.value.amount;
		        })
		        .valueAccessor(function(p) {
		            return p.value.count;
		        })
		        .radiusValueAccessor(function(p) {
		            return p.value.count;
		        })
		        .x(d3.scale.linear().domain([0, 10000]))
		        .r(d3.scale.linear().domain(r_domain))
		        .minRadiusWithLabel(30)
		        .elasticY(true)
		        .yAxisPadding(100)
		        .elasticX(true)
		        .xAxisPadding(400)
		        .margins({
		            top: 10,
		            right: 50,
		            bottom: 50,
		            left: 50
		        })
		        .maxBubbleRelativeSize(0.07)
		        .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
		        .renderHorizontalGridLines(true)
		        .renderVerticalGridLines(true)
		        .renderLabel(true)
		        .renderTitle(false)
		        .xAxisLabel("Total (USD)")
                .yAxisLabel("Num.Vendedores/Adquirentes")
		        .transitionDuration(2000)
		        .xAxis().tickFormat (function (d) { return sFormat(d).replace('G', 'B'); })
            
		        ;
		
           
           
            val = document.getElementById('temp').offsetWidth;
           console.log("val:"+ val);
            
		    statusRingChart
		        .width(width)
		        .height(height * 1.25)
		        .radius(height/2)
		        .dimension(moduloDim)
		        .group(amountByStatus)
                .ordinalColors(["#F6CC0A","#2E8B57"])
		        .legend(dc.legend().x(width/2.5).y(height/2).itemHeight(18).gap(6))
		        .renderLabel(false)
		        .innerRadius(85)
		        .transitionDuration(500)
		        ;
		
                 
       
		        
		
		    
            
              
             CountryBarChart
		        .width(width * 3)
		        .height(height*1.25)
                .ordering(function(d) { return -d.value; })
                .dimension(paisDim)
		        .group(capítulo_1, cap_1)
                .stack(capítulo_2, cap_2)
		        .stack(capítulo_3, cap_3)
                .stack(capítulo_4, cap_4)
                .stack(capítulo_5, cap_5)
                .stack(capítulo_6, cap_6)
		        .stack(capítulo_7, cap_7)
                .stack(capítulo_8, cap_8)
		        .stack(capítulo_9, cap_9)
                .stack(capítulo_10, cap_10)
                .stack(capítulo_11, cap_11)
                .stack(capítulo_12, cap_12)
                .stack(capítulo_13, cap_13)
                .stack(capítulo_14, cap_14)
                .stack(capítulo_15, cap_15)
                .stack(capítulo_17, cap_17)
                .stack(capítulo_18, cap_18)
                .stack(capítulo_19, cap_19)
                .stack(capítulo_20, cap_20)
                .stack(capítulo_21, cap_21)
                .stack(capítulo_23, cap_23)
                .stack(capítulo_24, cap_24)
                .stack(capítulo_25, cap_25)
                .stack(capítulo_26, cap_26)
                .stack(capítulo_27, cap_27)
                .x(d3.scale.ordinal().domain(paises))
		        .y(d3.scale.linear().domain(paises_domain))
		        .elasticX(true)
		        .xUnits(dc.units.ordinal)
                .renderlet(function (chart) {
                chart.selectAll("g.x text")
                .attr('transform', "rotate(-15)");
            })
		        .barPadding(0.15)
		        //.legend(dc.legend().x(width * 1.8 - 130).y(25).itemHeight(18).gap(6))
		        .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
		        .margins({
		            top: 25,
		            right: 135,
		            bottom: 35,
		            left: 50
		        })
		        .renderLabel(false)
		        .renderTitle(false)
		        .renderHorizontalGridLines(true)
		        .elasticY(true)
		        .yAxisLabel("Total (USD)")
                .transitionDuration(2000)
		        .yAxis().tickFormat(function (d) { return sFormat(d).replace('G', 'B'); })        
		        ;
		         
		        CountryBarChart
		            .on("preRedraw", function(chart){
		                
		                //Remove old values (if found)
		                // chart.selectAll('.barLabel').remove();
		                
		                })
		            .on('renderlet', function(chart) {
		              
                    chart.selectAll('.barLabel').text(function(d) {
		                    console.log(currFormat(d.y0));
		                    return currFormat(d.y0)
                        ; 
		                });
		            })
		        ;
      
           
		       
            
            ufBarChart
		        .width(width*2.2 )
		        .height(height*1.5)
		        .dimension(estadoDim)
                .ordering(function(d) { return -d.value; })
                //.rowsCap(15)
		        .group(uf_capítulo_1, cap_1)
		        .stack(uf_capítulo_2, cap_2)
		        .stack(uf_capítulo_3, cap_3)
		        .stack(uf_capítulo_4, cap_4)
		        .stack(uf_capítulo_5, cap_5)
		        .stack(uf_capítulo_6,cap_6)
		        .stack(uf_capítulo_7, cap_7)
                .stack(uf_capítulo_8,cap_8)
                .stack(uf_capítulo_9,cap_9)
                .stack(uf_capítulo_10,cap_10)
                .stack(uf_capítulo_11,cap_11)
                .stack(uf_capítulo_12,cap_12)
                .stack(uf_capítulo_13,cap_13)
                .stack(uf_capítulo_14,cap_14)
                .stack(uf_capítulo_15,cap_15)
                .stack(uf_capítulo_17,cap_17)
                .stack(uf_capítulo_18,cap_18)
                .stack(uf_capítulo_19,cap_19)
                .stack(uf_capítulo_20,cap_20)
                .stack(uf_capítulo_21,cap_21)
                .stack(uf_capítulo_22,cap_22)
                .stack(uf_capítulo_23,cap_23)
                .stack(uf_capítulo_24,cap_24)
                .stack(uf_capítulo_25,cap_25)
                .stack(uf_capítulo_26,cap_26)
                .stack(uf_capítulo_27,cap_27)
                .x(d3.scale.ordinal().domain(EstadoRange))
		        .elasticX(true)
		        .xUnits(dc.units.ordinal)
            .renderlet(function (chart) {
                chart.selectAll("g.x text")
                .attr('transform', "rotate(-15)");
            })
                .xAxisLabel(false)
                .barPadding(0.315)
		        //.legend(dc.legend().x(width * 1.8 - 130).y(25).itemHeight(18).gap(6))
		        .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
		        .margins({
		            top: 25,
		            right: 135,
		            bottom: 35,
		            left: 50
		        })
                .renderLabel(false)
		        .renderTitle(true)
                .renderHorizontalGridLines(true)
		        .elasticY(true)
		        .yAxisLabel("Total (USD)")
                .transitionDuration(2000)
		        .yAxis().tickFormat(function (d) { return sFormat(d).replace('G', 'B'); })
		        ;
              
            
           
        
            
         servRowChart
            .dimension(subitemDim) //y-axis
            .group(valorPerServiço) // x-axis
            .width(width*3)
            .height(height*2.8)
            .ordering(function(d) { return -d.value; })
            .rowsCap(15) 
            .elasticX(true)
            .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
		    .controlsUseVisibility(true)
            .transitionDuration(2000)
            .xAxis().tickFormat (function (d) { return sFormat(d).replace('G', 'B'); })
            ;
            
         
         
		    dataCount
		        .dimension(ndx)
		        .group(all);
		
		    dataTable
		        .dimension(capituloDim)
		        .group(function(d) {
		            return d;
		        })
		        .columns([{
		                label: 'Capítulo',
		                format: function(d) {
		                    return d.capitulo;
		                }
		            },{
		                label: 'Módulo',
		                format: function(d) {
		                    return d.modulo;
		                }
		            }, {
		                label: 'UF',
		                format: function(d) {
		                    return d.estado;
		                }
		            }, {
		                label: 'País',
		                format: function(d) {
		                    return d.pais;
		                }
		            }, {
		                label: 'Total',
		                format: function(d) {
		                    return currFormat(d.total);
		                }
		            },{
		                label: 'Subitem',
		                format: function(d) {
		                    return d.subitem;
		                }
		            },
		        ])
		        .size(1500)
		        .on('renderlet', function() {
		            dataTable.select('tr.dc-table-group').remove(); // remove unneccesary row dc.js adds beneath the header)
		        });
		
          anoBaseDim.filter(fiscalYear);
		   dc.renderAll();
           
        
		
		    
		    // Change the date header to reflect the date and time of the data
		    d3.select('#dateHeader').text(moment().format('LLLL'));
            
            
		        
            
		    // format bar charts' x-axis and rotate labels 45 degrees
		    // d3.selectAll('#chart-country-bar g.x.axis text').attr({"transform":"rotate(45)","y":9,"x":0,"dy":".35em"}).style({"text-anchor":"start","cursor":"pointer"});
		    // d3.selectAll('#UFBarChart g.x.axis text').attr({"transform":"rotate(45)","y":9,"x":0,"dy":".35em"}).style({"text-anchor":"start","cursor":"pointer"});
		
		    // // define mouseover and mouseout events
		      
            d3.selectAll("#chart-country-bar g rect").on("mouseover", showCountryDetail).on("mouseout", hideDetail);
		    d3.selectAll("#UFBarChart g rect").on("mouseover", showUFDetail).on("mouseout", hideDetail);
		    d3.selectAll('#chart-bolha-capítulo g circle').on("mouseover", showProgramDetail).on("mouseout", hideDetail); // using jQuery Starts With Selector [name^=”value”] also works with D3; https://api.jquery.com/attribute-starts-with-selector/
		    d3.selectAll("#chart-ring-status g path").on("mouseover", showRingDetail).on("mouseout", hideDetail); 
		
            
         
            
		    // // Show tooltip on hover
		    function showRingDetail() {
		
		        // show tooltip with information from the __data__ property of the element
		        var d = this.__data__;
		        var status = d.data.key;
		        var amount = d.data.value;
		        
		        var content = "<b>Módulo: </b>" + status + "<br/>" +
		            "<b>Valor: </b>" + currFormat(amount) + "<br/>";
		
		        return tooltip.style({
		                "visibility": "visible",
		                "top": (event.pageY - 10) + "px",
		                "left": (event.pageX +10) + "px"
		            })
		            .html(content);
		    }
		
		    // // Show tooltip on hover
		    function showCountryDetail() {
		
		        // show tooltip with information from the __data__ property of the element
		        var d = this.__data__;
		        var capitulo = d.layer;
		        var amount = d.data.value;
		        var country = d.data.key;
		        
		        var content = "<b>Capítulo: </b>" + capitulo + "<br/>" +
		            "<b>País: </b>" + country + "<br/>" +
		            "<b>Total: </b>" + currFormat(amount) + "<br/>";
		
		        return tooltip.style({
		                "visibility": "visible",
		                "top": (event.pageY - 10) + "px",
		                "left": (event.pageX + 30) + "px"
		            })
		            .html(content);
		    }
		
		    // // Show tooltip on hover
		    function showUFDetail() {
		
		        // show tooltip with information from the __data__ property of the element
		        var d = this.__data__;
		        var program = d.layer;
		        var amount = d.data.value;
		        var estado = d.data.key;
		
		        var content = "<b>Capítulo: </b>" + program + "<br/>" +
		            "<b>UF: </b>" + estado + "<br/>" +
		            "<b>Total: </b>" + currFormat(amount) + "<br/>";
		
		        return tooltip.style({
		                "visibility": "visible",
		                "top": (event.pageY - 10) + "px",
		                "left": (event.pageX +10) + "px"
		            })
		            .html(content);
		    }
		
		    // // Show tooltip on hover
		    function showProgramDetail() {
		
		        // show tooltip with information from the __data__ property of the element
		        var d = this.__data__;
		        var program = d.key;
		        var count = d.value.count;
		        var amount = d.value.amount;
		        
		        var content = "<b>Capítulo: </b>" + program + "<br/>" +
		            "<b>Total: </b>" + currFormat(amount) + "<br/>" +
		            "<b>Contador: </b>" + count + "<br/>";
		
		        return tooltip.style({
		                "visibility": "visible",
		                "top": (event.pageY - 10) + "px",
		                "left": (event.pageX -385) + "px"
		            })
		            .html(content);
		    }
		
		    // // Hide tooltip on hover
	  function hideDetail() {
		
		        // hide tooltip
		        return tooltip.style("visibility", "hidden");
		    }
    
            
            
   
            
            
		
		
		}
        
           
             
        // End Func createViz()
        
       // }
        
      //================================================================
           // RETIRAR
           //================================================================
           
                
              
    function Func_GroupedBarChart(){
    
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
    var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
    
    var x1 = d3.scale.ordinal();
    
    var y = d3.scale.linear()
    .range([height, 0]);
    
    var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
    
    var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");
    
    
    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));
    
    
    var svg = d3.select("#GroupedBarChart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    d3.csv("data_groupedbarchart.csv",function(error,data){
    
    var ageNames=d3.keys(data[0]).filter(function(key){return key !=="State"})
    
    data.forEach(function(d) {
      d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]};});
    });
    
    x0.domain(data.map(function(d) { return d.State; }));
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
    
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    
    
    
    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Nº Empresas");
    
    var state = svg.selectAll(".state")
    .data(data)
  .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });
    
    state.selectAll("rect")
    .data(function(d) { return d.ages; })
  .enter().append("rect")
     .attr("width", x1.rangeBand())
     .attr("x", function(d) { return x1(d.name); })
     .attr("y", function(d) { return y(d.value); })
     .attr("height", function(d) { return height - y(d.value); })
     .style("fill", function(d) { return color(d.name); });
    
    var legend = svg.selectAll(".legend")
    .data(ageNames.slice().reverse())
  .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; });
    
    
    legend.append("rect")
    .attr("x", width)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);
    
    
    legend.append("text")
    .attr("x", width )
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });
    
    
    }); //end d3.csv
    
    
    }// end function GroupedBarChart */
            
    var change = false;
    var indicador=0;
        
     
        
    function customXAxis(g) {
  g.call(xAxis);
  g.select(".domain").remove();
}
        
        
        
 $(document).ready(function() {		    getData();		});

/*window.onresize = function(event) {
  var newWidth = document.getElementById('chart-country-bar');
  chart.width(newWidth)
    .transitionDuration(0);
  bubble.transitionDuration(0);
  dc.renderAll();
  chart.transitionDuration(750);
  bubble.transitionDuration(750);
};        */
        
        
        
      
        
var saveAs = saveAs || (function(view) {
	
        
        
        "use strict";
	// IE <10 is explicitly unsupported
	if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
		return;
	}
	var
		  doc = view.document
		  // only get URL when necessary in case Blob.js hasn't overridden it yet
		, get_URL = function() {
			return view.URL || view.webkitURL || view;
		}
		, save_link = doc.createElementNS("https://www.w3.org/1999/xhtml", "a")
		, can_use_save_link = "download" in save_link
		, click = function(node) {
			var event = new MouseEvent("click");
			node.dispatchEvent(event);
		}
		, is_safari = /constructor/i.test(view.HTMLElement) || view.safari
		, is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
		, throw_outside = function(ex) {
			(view.setImmediate || view.setTimeout)(function() {
				throw ex;
			}, 0);
		}
		, force_saveable_type = "application/octet-stream"
		// the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
		, arbitrary_revoke_timeout = 1000 * 40 // in ms
		, revoke = function(file) {
			var revoker = function() {
				if (typeof file === "string") { // file is an object URL
					get_URL().revokeObjectURL(file);
				} else { // file is a File
					file.remove();
				}
			};
			setTimeout(revoker, arbitrary_revoke_timeout);
		}
		, dispatch = function(filesaver, event_types, event) {
			event_types = [].concat(event_types);
			var i = event_types.length;
			while (i--) {
				var listener = filesaver["on" + event_types[i]];
				if (typeof listener === "function") {
					try {
						listener.call(filesaver, event || filesaver);
					} catch (ex) {
						throw_outside(ex);
					}
				}
			}
		}
		, auto_bom = function(blob) {
            
            
			// prepend BOM for UTF-8 XML and text/* types (including HTML)
			// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
			if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
				return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
			}
			return blob;
		}
		, FileSaver = function(blob, name, no_auto_bom) {
			if (!no_auto_bom) {
				blob = auto_bom(blob);
			}
			// First try a.download, then web filesystem, then object URLs
			var
				  filesaver = this
				, type = blob.type
				, force = type === force_saveable_type
				, object_url
				, dispatch_all = function() {
					dispatch(filesaver, "writestart progress write writeend".split(" "));
				}
				// on any filesys errors revert to saving with object URLs
				, fs_error = function() {
					if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
						// Safari doesn't allow downloading of blob urls
						var reader = new FileReader();
						reader.onloadend = function() {
							var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/,'data:attachment/file;');
							var popup = view.open(url,'_blank');
							if(!popup) view.location.href = url;
							url=undefined; // release reference before dispatching
							filesaver.readyState = filesaver.DONE;
							dispatch_all();
						};
						reader.readAsDataURL(blob);
						filesaver.readyState = filesaver.INIT;
						return;
					}
					// don't create more object URLs than needed
					if (!object_url) {
						object_url = get_URL().createObjectURL(blob);
					}
					if (force) {
						view.location.href = object_url;
					} else {
						var opened = view.open(object_url, "_blank");
						if (!opened) {
							// Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
							view.location.href = object_url;
						}
					}
					filesaver.readyState = filesaver.DONE;
					dispatch_all();
					revoke(object_url);
				}
			;
			filesaver.readyState = filesaver.INIT;

if (can_use_save_link) {
				object_url = get_URL().createObjectURL(blob);
				setTimeout(function() {
					save_link.href = object_url;
					save_link.download = name;
					click(save_link);
					dispatch_all();
					revoke(object_url);
					filesaver.readyState = filesaver.DONE;
				});
				return;
			}

fs_error();
		}
		, FS_proto = FileSaver.prototype
		, saveAs = function(blob, name, no_auto_bom) {
			return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
		}
	;
	// IE 10+ (native saveAs)
	if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
		return function(blob, name, no_auto_bom) {
			name = name || blob.name || "download";

if (!no_auto_bom) {
				blob = auto_bom(blob);
			}
			return navigator.msSaveOrOpenBlob(blob, name);
		};
	}

FS_proto.abort = function(){};
	FS_proto.readyState = FS_proto.INIT = 0;
	FS_proto.WRITING = 1;
	FS_proto.DONE = 2;

FS_proto.error =
	FS_proto.onwritestart =
	FS_proto.onprogress =
	FS_proto.onwrite =
	FS_proto.onabort =
	FS_proto.onerror =
	FS_proto.onwriteend =
		null;
 
        
        
        
	return saveAs;
}(
	   typeof self !== "undefined" && self
	|| typeof window !== "undefined" && window
	|| this.content
));
// `self` is undefined in Firefox for Android content script context
// while `this` is nsIContentFrameMessageManager
// with an attribute `content` that corresponds to the window

if (typeof module !== "undefined" && module.exports) {
  module.exports.saveAs = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
  define("FileSaver.js", function() {
    return saveAs;
  });
}

d3.select('#download3')
    .on('click', function() {
         data = capituloDim.top(Infinity);
       /* if(d3.select('#download-type3 input:checked').node().value==='dataTable') {
            data = data.map(function(d) {
                var row = {};
                dataTable.columns().forEach(function(c) {
                    row[dataTable._doColumnHeaderFormat(c)] = dataTable._doColumnValueFormat(c, d);
                });
                return row;
            });
        } */
       blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
        saveAs(blob,'data.csv');
    });  
        
                    
     
    
      
        
        
	</script>    
    </body>

</html>

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

https://d3js.org/d3.v3.min.js

https://d3js.org/d3-queue.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js

https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js