Using ChartJs with MVC 5 Razor

Question

I would like to help, I'm trying to display the data of my query in a chart utlizando the ChartJs. How can I return the data in JSON?

FaturamentoIvel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BiDAL.Entity.Graficos
{
    public class FaturamentoIvel
    {
        public string Operacao { get; set; }
        public string AnoMes { get; set; }
        public float ValorNF { get; set; }
        public bool TradeMarketing { get; set; }
    }
}

FaturamentoIvelDAL.cs

using BiDAL.Entity.Graficos;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BiDAL.Persistence
{
    public class FaturamentoIvelDAL : Conexao
    {
        public List<FaturamentoIvel> FindAllFaturamentoIvel()
        {
            try
            {
                OpenConnection();
                Cmd = new SqlCommand("SELECT Operacao, AnoMes, TradeMarketing, SUM(ValorNF) AS ValorTotal FROM dbo.FatoFaturamentoIVEL WHERE TradeMarketing = 0 GROUP BY Operacao, AnoMes, TradeMarketing ORDER BY SUM(ValorNF) DESC", Con);

                Dr = Cmd.ExecuteReader();
                List<FaturamentoIvel> lista = new List<FaturamentoIvel>();

                while (Dr.Read())
                {
                    FaturamentoIvel ft = new FaturamentoIvel();
                    ft.Operacao = Convert.ToString(Dr["Operacao"]);
                    ft.AnoMes = Convert.ToString(Dr["AnoMes"]);
                    ft.ValorNF = Convert.ToSingle(Dr["ValorNF"]);

                    lista.Add(ft);
                }
                return lista;
            }
            catch (Exception ex)
            {
                throw new Exception("Erro ao listar Faturamento: " + ex.Message);
            }
        }


    }
}

My Controller AdminController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace BiFrontEnd.Controllers
{
    public class AdminController : Controller
    {
        // GET: Home
        public ActionResult Home()
        {
            return View();
        }


    }
}

My view

@{
    ViewBag.Title = "Home";
    Layout = "~/Views/Template/_Layout.cshtml";
}

<label>Gráfico Mês Atual</label>
<select id="ddlOperacao">
    <option>Venda</option>
    <option>Troca</option>
    <option>Bonificação</option>
    <option>Outras</option>
</select>
<button id="btnGerarGraficoMesAtual">Exibir</button>

**How can I return the data in JSON?** Use `Json` method in your action method to return json representation of your data. — Shyju, Apr 13 '16 at 14:06
Take a look at [this](http://stackoverflow.com/questions/10608198/asp-net-mvc3-returning-success-jsonresult/10608250#10608250) replace the anonymous object with the data set you want to return. — Shyju, Apr 13 '16 at 14:13
public ActionResult GetFaturamentoIvel() { var retorno = new { FaturamentoIvelDAL.GroupByAcumuladoFaturamentoAnoIvel }; return Json(retorno, JsonRequestBehavior.AllowGet); } — Igor Lessa, Apr 13 '16 at 14:21
He reports the following error: "Cannot assign method group to anonymous type property" — Igor Lessa, Apr 13 '16 at 14:27
i said replace the anonymous object with the data you want to pass. So execute your method which returns the data. store it in a variable and pass that variable to the Json method. — Shyju, Apr 13 '16 at 14:28

error505 · Accepted Answer · 2016-04-14T07:20:28.457

This is just example how it should work. Inside your controller make something similar like this.

public ActionResult Chart()
{
   var Value1 = db.MYTABLE.Where(i => i.Value1);
   var Value2 = db.MYTABLE.Where(i => i.Value2);          
   var dataForChart = new[]
   {  
      new 
      {
         label = "Your Label1", 
         value = Value1.Count()
      },
      new 
      {
         label = "Your Label2", 
         value = Value2.Count()
      }                
   };

   var result = Json(dataForChart, JsonRequestBehavior.AllowGet);
   return result;

 }

Your JavaScript should look like this:

$.get("/ControllerName/Chart", function (response) {            
  //Construct your ChartJS here.          
});

Place this in your View to call it:

<canvas id="Chart" width="400" height="400"></canvas>

When constructing ChartJS your data should be response from $.get function. — error505, Apr 14 '16 at 07:30

Using ChartJs with MVC 5 Razor

1 Answers1