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
– Shyju, Commented Apr 13, 2016 at 14:06
Take a look at this replace the anonymous object with the data set you want to return. — Shyju
– Shyju, Commented Apr 13, 2016 at 14:13
public ActionResult GetFaturamentoIvel() { var retorno = new { FaturamentoIvelDAL.GroupByAcumuladoFaturamentoAnoIvel }; return Json(retorno, JsonRequestBehavior.AllowGet); } — Igor Lessa
– Igor Lessa, Commented Apr 13, 2016 at 14:21

error505 · Accepted Answer · 2016-04-14 07:20:28Z

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>

edited Apr 14, 2016 at 7:20

answered Apr 13, 2016 at 14:55

error505

1,2261 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

error505 Over a year ago

When constructing ChartJS your data should be response from $.get function.

Collectives™ on Stack Overflow

Using ChartJs with MVC 5 Razor

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related