LINQ SQL Method not Filling Highcharts

Question

My goal is to create a column highchart that shows the name of various salesman and how much they have sold. I wrote this code to return from my SQL Database the names and the sum of the sales for each salesman:

 [HttpPost]
    public JsonResult ChartVendedores()
    {
        //Retorna um JSON contendo o nome do vendedor e o valor por ele vendido, usando inner join pelo id do vendedor.
        try
        {
            var resultado = (from ve in db.tblVendedor
                             join vn in db.tblVenda on ve.vendedor_id equals vn.vendedor_id
                             group vn by new
                             {
                                 ve.vendedor_nome
                             }into g
                             select new {
                                 vendedor_nome = g.Key.vendedor_nome,
                                 venda_valor = g.Sum(x => x.venda_valor)
                             }).ToList();

            var jsonResult = new
            {
                Nomes = resultado.Select(x => x.vendedor_nome),
                Valores = resultado.Select(x => x.venda_valor)
            };

            return Json(resultado);
        }catch(Exception)
        {
            return null;
        }
    }

And this is where the chart is created, the method is called and it is suposed to fill the chart with the database's return data:

<script>
$(function () {
    $.ajax({
        url: '/Vendedores/ChartVendedores',
        type: 'post',
        async: false,
        sucess: function (data) {
            //Constrói o gráfico com os valores retornados pelo banco.
            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Venda dos Colaboradores'
                },
                xAxis: {
                    categories: [
                        data.Nomes
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Valor (R$)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Valores',
                    data: data.Valores
                }]
            });
        }
    })
})

What am I'm missing? As long as code goes, i don't think I wrote any wrong code in the method. Am I calling it wrong? Am I manipulating it wrong? I tried to remove my Ajax code, only leaving the chart itself as it is on the highchart.com and it worked, so the problem is not on my container div or in the chart code.

EDIT: As commented bellow, I looked at my console and I'm getting an warning about one of the imports that Highcharts needs. The waning follows is this one. After seeing this, I tried to remove the AJax and only using the highchart code. It worked! For some reason when the chart tries to use this:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

It does not find it when the chart code is contained inside sucess: function(data){}

Note: I'm importing everything at the beggining of the code, meanwhile the script containing the Ajax is written last.

try `return Json(resultado,JsonRequestBehavior.AllowGet);`. Refer to this post: https://stackoverflow.com/questions/8464677/why-is-jsonrequestbehavior-needed — Khanh TO, Jul 28 '17 at 13:10
@William, are you getting data in the frontend. can you make sure in your browser developer console, that the json result is returned. do you have any error in browser console? — alaa_sayegh, Jul 28 '17 at 13:18
@mjwills it doens't show anything. I tried to write console.log() inside the sucess function and inside the error function just showing some text. The code is not being reached, aparently. The console.log() only shows when I write it inside the — Pelicer, Jul 28 '17 at 14:13
I suspect it is because you misspelt `success`. See my answer. — mjwills, Jul 28 '17 at 23:33

score 1 · Accepted Answer · answered Jul 28 '17 at 23:29

$.ajax({
    url: '/Vendedores/ChartVendedores',
    type: 'post',
    async: false,
    sucess: function (data) {

should be changed to:

$.ajax({
    url: '/Vendedores/ChartVendedores',
    type: 'post',
    async: false,
    success: function (data) {

You have misspelt success.

alaa_sayegh · Answer 2 · 2017-07-28T13:37:00.507

0

look at this, you are using return(resultado), but your json object to be returned is jsonResult , so use this:

    var resultado = (from ve in db.tblVendedor
                         join vn in db.tblVenda on ve.vendedor_id equals vn.vendedor_id
                         group vn by new
                         {
                             ve.vendedor_nome
                         }into g
                         select new {
                             vendedor_nome = g.Key.vendedor_nome,
                             venda_valor = g.Sum(x => x.venda_valor)
                         }).ToList();

        var jsonResult = new
        {
            Nomes = resultado.Select(x => x.vendedor_nome),
            Valores = resultado.Select(x => x.venda_valor)
        };

        return Json(jsonResult);

Please test and let me know if it works :)

     for (var i in data) {
                       // Add some text to the new cells:
                                    cell1.innerHTML = data[i].Nomes ;
                                    cell2.innerHTML = data[i].Valores ;
                                }

edited Jul 28 '17 at 13:37

answered Jul 28 '17 at 13:23

alaa_sayegh

2,141
4
21
37

Thanks for the observation! You're right. But still doesn't populate the chart. – Pelicer Jul 28 '17 at 13:30
paste please your josn result from browser here, so I can check whats going wrong – alaa_sayegh Jul 28 '17 at 13:31
and make sure that you are iterating over the data, i guess your response is a json array, so you need to use a for loop to iterate over all results. like this, see my edited answer – alaa_sayegh Jul 28 '17 at 13:34
Thanks for the effort, alaa. But It appears that my neither my sucess or error functions are being reached... – Pelicer Jul 28 '17 at 14:17
i didn't understand what you meant? can you please tell me, what is the current issue?Could you please show the json result. You can find it in the browser developer console. this will help to find out the issue – alaa_sayegh Jul 28 '17 at 20:04

LINQ SQL Method not Filling Highcharts

2 Answers2