Popular Graphics with List - Java Script

Question

Hello!

I am developing an academic system and I need a chart with the wrong questions by subject of each student. I have a list with Themes (which would be the x axis) and qtdErradas (which would be the y axis of the graph). My problem is in popular this chart with a list. I am developing in Asp.NET and the code of the chart is in JS. Follow below 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>

Answer 1

Hello, I had some difficulties in connection to popular a graph with data too. I did not use ajax but Jquery receiving 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)

Ready, so the receiving Function as parameter (response) will receive the data that turned from the route. Receiving this data will store in the variable as an array and so and only play on the chart

Answer 2

Hello, Dude, first tip: Don’t 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 populate 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 graph:

    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
            });
        });
     };