var config = {
type: 'radar',
data: {
labels: ["Confiança", "Atividade", "Juros", "Condições de financiamento", "Concessões reais", "Atratividade do Financiamento Imobiliário", "Emprego", "Massa salarial", "Atratividade do Investimento Imobiliário", "Insumos", "Lançamentos", "Preço dos imóveis"],
datasets: [{
borderColor: 'rgba(79,129,189,1)',
backgroundColor: "rgba(220,220,220,0.2)",
pointBackgroundColor: "rgba(79,129,189,1)",
data: [NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]
}],
},
options: {
title: {
display: false,
text: "Radar Imobiliário",
fontSize: 20
},
legend:{
display: false
},
elements: {
line: {
tension: 0.0,
},
point: {
radius:6,
},
},
scale: {
ticks: {
display: false
}
},
animation: {
duration: 50
},
responsive: true,
}
};
window.onload = function () {
window.myRadar = new Chart.Radar(document.getElementById("GraficoRadar"), config);
};
* {
margin:0;
padding:0;
}
body {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align:center;
}
.logo {
max-height:200px;
max-width:350px;
width: auto;
height: auto;
}
#menu_download {
margin-top: 5%;
margin-bottom: 3%;
}
.menu_download ul {
padding:0px;
margin:0px;
list-style:none;
}
.menu_download ul li {
display: inline;
}
/*Cores*/
.color_nota_global {
color:rgb(70,130,180);
}
.color_ambiente_setor {
color: #942825;
}
.color_demanda {
color: #6F8E30;
}
.color_ambiente_macro {
color: #7fb9c5;
}
.color_credito_imobiliario {
color: #C36518;
}
.ambiente_setor {
background-color:rgb(254,125,125);
}
.demanda {
background-color:rgb(206,234,176);
}
.ambiente_macro {
background-color:rgb(77,154,170);
}
.credito_imobiliario {
background-color:rgb(255,224,130);
}
.nota_global {
background-color:white;
}
.central_nota {
background-color:rgb(70,130,180);
color:white;
}
/*Fim cores*/
.gauge_block {
width: 250px;
margin-left:auto;
margin-right: auto;
padding: 10px;
text-align: center;
font-size: 150%;
}
.display_nota_global {
width:100%;
}
.nota_global .teste {
position:relative;
float:left;
width:35%;
}
.preview {
width: 100%;
text-align:center;
font-size: 200%;
margin-left:auto;
margin-right:auto;
}
.preview_global {
margin-left: 15%;
}
#ambiente_setor, #demanda, #ambiente_macro, #credito_imobiliario {
display:none;
}
#preview-ambiente_setor, #preview-demanda, #preview-ambiente_macro, #preview-credito_imobiliario{
display:none;
}
.ambiente_setor, .demanda, .ambiente_macro, .credito_imobiliario{
display:none;
}
/*
Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.
*/
@media (min-width: 769px) and (max-width:1179px) {
body {
zoom:1;
}
.preview_global {
margin-left: 1%;
}
.col-md-4 {
width:100%;
}
.col-md-2 {
width:100%;
}
.col-md-7 {
width:100%;
margin-top:5%;
margin-bottom:5%;
}
}
@media (min-width: 1366px) and (max-width: 1649px) {
body{
zoom:1;
width: 80%;
margin-left:auto;
margin-left: auto;
}
.col-md-2 {
width:10%;
margin-top:5%;
margin-bottom:5%;
}
.col-md-7 {
width:80%;
margin-top:5%;
margin-bottom:5%;
}
#ambiente_setor, #demanda, #ambiente_macro, #credito_imobiliario {
display:inline;
width:200px;
}
#preview-ambiente_setor, #preview-demanda, #preview-ambiente_macro, #preview-credito_imobiliario{
display:block;
}
.ambiente_setor, .demanda, .ambiente_macro, .credito_imobiliario{
display:block;
width:200px;
}
.preview_global {
margin-left:98px;
}
}
/*Dispositivos com largura mínima de 1650 pixels. Por exemplo TVs.*/
@media (min-width: 1650px) {
body{
zoom:1;
width: 80%;
margin-left:auto;
margin-left: auto;
}
.col-md-2 {
width:20%;
margin-top:5%;
margin-bottom:5%;
}
.col-md-7 {
width:60%;
margin-top:5%;
margin-bottom:5%;
}
#ambiente_setor, #demanda, #ambiente_macro, #credito_imobiliario {
display:inline;
width:100%;
}
#preview-ambiente_setor, #preview-demanda, #preview-ambiente_macro, #preview-credito_imobiliario{
display:block;
}
.ambiente_setor, .demanda, .ambiente_macro, .credito_imobiliario{
display:block;
width:100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script><!DOCTYPEhtmllang="pt-br">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Radar Imobiliário - Gráfico</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="css/estilo_handheld.css" type="text/css">
</head>
<body>
<form id="form1" runat="server">
<header>
<div class="container">
<div class="row">
<div class="col-md-6" >
<div class="row navbar-right" >
<label class="seletor">Selecione o período:</label>
<asp:DropDownList ID="selecaoMes" title="Selecione um mês" runat="server">
<asp:ListItem Value="">Selecione um mês</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
</div>
<hr class="seletor">
</header>
<section id="conteudo">
<div class="container-fluid">
<div class="row nota_global">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="teste">
<div class="gauge_block central_nota">Nota global</div>
</div>
<div class="teste preview preview_global color_nota_global" id="preview-nota_global"></div>
</div>
</div>
<div class="row graficos">
<div class="col-md-7 ">
<canvas id="GraficoRadar"></canvas>
</div>
</div>
</div>
</section>
</form>
</body>
</html>
The data is uploaded correctly as I just said I can not make this canvas resize for small screens.