Jump to content
pessantiago

Combo box

Recommended Posts

pessantiago

Boa tarde

estou com duvidas ja andei a pesquisar e nada

é ó seguinte tenho de fazer um grafico de barras em d3, com filtragem dos mesmos

exemplo de dados

data,codcurso,disciplina,inscritos,aprovados,reprovados

2009,a1,1,40,30,10

2009,a1,2,30,20,10

2009,a1,2,50,40,10

2010,a1,1,40,30,10

2011,a1,1,20,10,10

pretendo ter uma uma combobox para selecionar o ano,codcurso e discplina nesse curso e depois gerar um grafico de barras com inscritos,aprovados,reprovados.

Apresentar os anos todos de uma determinada disciplina

ajudas

Share this post


Link to post
Share on other sites
KTachyon

Esqueceste-te de dizer qual é a dúvida.


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Share this post


Link to post
Share on other sites
pessantiago

exato, como é que faço ao selecionar o ano 2009 aprensentar os cursos a1,a1 e ao selecionar os cursos apresentar as respetivas disciplinas

Share this post


Link to post
Share on other sites
KTachyon

Tens que tratar a informação com Javascript. Fazes um split linha a linha e colocas a informação em estruturas de dados adequadas:

var lines = data.split('\n');
var objects = [];

for (var i = 0; i < lines.length; i++) {
   var splittedLine = lines[i].split(',');

   objects.push({
       ano : splittedLine[0],
       codcurso : splittedLine[1],
       disciplina : splittedLine[2],
       inscritos : splittedLine[3],
       aprovados : splittedLine[4],
       reprovados : splittedLine[5],
   });
}

Para procurares:

var objects2009 = [];

for (var i = 0; i < objects.length; i++) {
   if (parseInt(objects[i].ano) === 2009) {
       objects2009.push(objects[i]);
   }
}

Alternativamente, se utilizares uma biblioteca como underscorejs ou lodash:

var lines = data.split('\n');
var objects = _.map(lines, function(line) {
   var splittedLine = line.split(',');

   return {
       ano : splittedLine[0],
       codcurso : splittedLine[1],
       disciplina : splittedLine[2],
       inscritos : splittedLine[3],
       aprovados : splittedLine[4],
       reprovados : splittedLine[5],
   };
});

E:

var objects2009 = _.filter(objects, function(object) {
   return parseInt(objects[i].ano) === 2009;
});


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Share this post


Link to post
Share on other sites
pessantiago

não é isto, prentendo é ter uma lista que se auto actualiza..as combo box isto é selects

é o codigo que tenho depois consoante a informção filtrada gera um grafico, mas para ja quero colocar a info nos selects

por exemplo varias disciplinas tem vários cursos(departamentos)

<!DOCTYPE html>
</html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.arc path {
stroke: #fff;
}
</style>
<head>
</head>
<body>
Selecionar Ano:
<select id="SelectAno" >
<option value="Todos">Todos</option>
</select>
Curso:
<select id="Curso">Todos</option>

</select>
Disciplinas:
<select id="Disciplinas" >
</select>
<script type="javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script>
var SelectAno;//para guardar a combo box dos anos
//inicializar combo boxs;
initSelectAnos();
function initSelectAnos(){
var data = [];
SelectAno = document.getElementById("SelectAno");
d3.csv("2009.csv", function(error,csv) {
for(var i=0;i<csv.length;i++){
var splittedLine = csv[i].split(',');
objects.push({AnoLectivo: splittedLine[0]});
}
})
};
</script>

</body>
</html>

Share this post


Link to post
Share on other sites
KTachyon

Eu só te expliquei aquilo que tu perguntaste, que é, como é que deves tratar os dados.

Basicamente, depois de tratares os dados, podes extrair os anos que tens disponíveis e colocas esses valores no select. Adicionas um bind ao evento "change" do select para apanhares a alteração de valores e mandares actualizar o d3.


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Share this post


Link to post
Share on other sites
KTachyon

Mas vais ter que começar a dominar, até porque o d3 implica Javascript.


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.