<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="divGraficoBarraUnidade" style="width:100%; height:400px;"></div>
<script>
$(function () {
$(document).ready(function() {
var options = {
chart: {
renderTo: 'divGraficoBarraUnidade',
type: 'column'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: {},
drilldown: {
series: {}
}
};
function ajaxGraficoBarraUnidade() {
$.ajax({
type: "GET",
data: window.formData + '&strMundo=' + "<?php echo ($strMundo); ?>" + '&strGraph=Unidade',
dataType: "json",
url: "https://api.myjson.com/bins/42c59",
beforeSend: function () {
},
success: function (strRetorno) {
options.series = strRetorno.geos;
options.drilldown.series = strRetorno.unidades;
var chart = new Highcharts.Chart(options);
console.log('options', options)
},
error: function (txt) {
}
});
}
ajaxGraficoBarraUnidade();
});
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */
{"geos":[{"name": "Regionais","data": [{"name":"Geo CO","y":1.59,"drilldown":"Geo CO"},{"name":"Geo MG/ES","y":4.41,"drilldown":"Geo MG/ES"},{"name":"Geo NE","y":3.35,"drilldown":"Geo NE"},{"name":"Geo NO","y":1.96,"drilldown":"Geo NO"},{"name":"Geo PR/SPI","y":0.10,"drilldown":"Geo PR/SPI"},{"name":"Geo RJ","y":1.81,"drilldown":"Geo RJ"},{"name":"Geo RS/SC","y":0.75,"drilldown":"Geo RS/SC"},{"name":"Geo SPC","y":0.33,"drilldown":"Geo SPC"}]}], "unidades":[{"name":"Geo CO","id":"Geo CO","data": [["CDC Araguaina",1.30],["CDC Catalao",0.01],["CDC Formosa",4.70],["CDC Porto Velho",0.29],["CDC Rio Branco",0.00],["CDC Rio Verde",0.12],["CDC Rondonopolis",5.15],["CDC Tangara",0.51],["CDD Brasilia",0.06],["CDD Brasilia Int",2.67],["CDD Caceres",0.05],["CDD Campo Gde",0.00],["CDD Cuiaba Int",0.03],["CDD Goiania Int",0.00],["CDD Itumbiara",38.19],["CDD Manaus",0.43]]},{"name":"Geo MG/ES","id":"Geo MG/ES","data": [["CDD Alfenas",0.02],["CDD Cachoeiro",0.28],["CDD Ipatinga",0.03],["CDD João Monlevade DDC",0.00],["CDD Minas Int",0.77],["CDD Poços de Caldas",0.91],["CDD Pouso Alegre",0.17],["CDD Uberaba",0.08],["CDD Uberlandia",0.07],["CDD Vitoria",25.62],["CDL AS Minas",0.01],["CDL Santa Luzia",2.70]]},{"name":"Geo NE","id":"Geo NE","data": [["CDC Arapiraca",0.12],["CDC Lapa",0.32],["CDD Aracaju",0.05],["CDD Caruaru",8.05],["CDD F. de Santana",0.17],["CDD Guanambi",0.01],["CDD Ilheus",0.03],["CDD Maceio",0.06],["CDD Olinda",0.16],["CDD Rib. Pombal",0.04],["CDD Salvador",0.17],["CDD Vit. da Conquista",0.06],["CDL Cabo",1.33],["CDL Jequie",0.06]]},{"name":"Geo NO","id":"Geo NO","data": [["CDD Aracati",0.02],["CDD Balsas",0.08],["CDD Belem",0.02],["CDD Campina Grande",0.03],["CDD Fortaleza",0.03],["CDD Imperatriz",0.02],["CDD Joao Pessoa Int",5.86],["CDD Maranhao Int ",12.72],["CDD Natal Int",0.02],["CDD Sul Maranhão",0.03],["CDL Ceara",0.37]]},{"name":"Geo PR/SPI","id":"Geo PR/SPI","data": [["CDC Beltrao",0.00],["CDD Agudos Int",0.12],["CDD Araçatuba",0.07],["CDD Araraquara",0.02],["CDD Bebedouro",0.09],["CDD Curitiba",0.00],["CDD Jaú",3.19],["CDD Londrina",0.00],["CDD Mogi Mirim",0.04],["CDD Ponta Grossa",0.37],["CDD Presidente Prudente",0.05],["CDD Rib. Preto",0.04],["CDL Paranagua",0.02]]},{"name":"Geo RJ","id":"Geo RJ","data": [["CDD Campos",1.18],["CDD Jacarepagua",1.65],["CDD Niteroi",0.02],["CDD Nova Friburgo",0.01],["CDD Nova Iguacu",0.02],["CDD Petropolis",0.00],["CDD RJ Campo Gde Int",3.77],["CDD S. Cristovao",0.81],["CDL Itaperuna",0.14]]},{"name":"Geo RS/SC","id":"Geo RS/SC","data": [["CDD Blumenau",0.07],["CDD Camboriu",0.11],["CDD Caxias do Sul",0.07],["CDD Florianopolis",0.12],["CDD Pelotas",0.04],["CDD Porto Alegre",1.06],["CDD S. Cruz Sul",0.02],["CDD Santa Maria",0.45],["CDD Sapucaia Int",2.66]]},{"name":"Geo SPC","id":"Geo SPC","data": [["CDD Campinas",0.12],["CDD Diadema",0.72],["CDD Guarulhos",0.23],["CDD Jundiai",1.04],["CDD Litoral SP",0.05],["CDD Mooca",1.05],["CDD Norte",0.10],["CDD Oeste",0.04],["CDD Praia Grande",0.06],["CDD São José dos Campos",0.54],["CDD Sul SP",0.00],["CDD Taubaté",0.82],["CDD Votorantin",0.77]]}]}