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>

Answer 1

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>