Popular graphic with list - Java Script

Question

Popular graphic with list - Java Script

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Hello

I am developing an academic system and I need a chart with the wrong questions per student subject. I have a list with Themes (which would be the x axis) and qtdErradas (which would be the y axis of the chart). My problem is with this popular chart with a list. I am developing in Asp.NET and the code in the chart is in JS. Below is the graph js.

<script>
    window.onload = function () {

        // Donut Chart
        Morris.Donut({
            element: 'morris-donut-chart',
            data: [
            @foreach (var item in Model)
            {
                {
                    label: item.Tema,
                    value: item.QtdErradas
                },
            }
            ],
            resize: true
        });    
    };
</script>

javascript asp.net-mvc

asked by anonymous 25.10.2015 / 03:42

2 answers

Get image name in mysql for id Detect absence of light on Android camera

score 1 · Answer 1

Hello, I had some difficulties in grating a popular chart with data as well. I did not use ajax and yes Jquery getting a json return. I also use HighCharts.

the function was

var variavel_array = [];

$.getJSON('PASSO A ROTA', function(resposta){
  $.each(resposta, function(index){
    //Aqui vc deve criar um array para receber os valores dos campos retornados
    variavel_array[index] = resposta[index].pega_campo_json;
});
    //agr e so colocar a variavel_array no seu grafico.
});

On my route:

var dados = consulta do banco e pega a resposta e armazena na variavel
return Json(dados , JsonRequestBehavior.AllowGet)

Done, so the function that receives as parameter (response) will receive the data that will turn the route. Receiving this data will store in the variable as array and so it is only in the graph

score 0 · Answer 2

Hello, Dude, first tip: Do not mix your Model values with your JavaScript code.

What can be done in this case is to create a new Action that returns a Json with information needed to popular this chart:

public JsonResult GetMorrisData(){
//Aqui vai retornar a informação do seu array;
}

and then in JavaScript you request the information via XHR and populate the chart:

    window.onload = function () {
    //Usarei JQuery para facilitar:
    $.getJSON("/controller/getmorrisdata")
    .success(function(data){
     // Donut Chart
            Morris.Donut({
              element: 'morris-donut-chart',
              data: data, //Isto por as informações já serão retornadas no padrão de objeto corretamente
              resize: true
            });
        });
     };