How to show data coming from the bank in a Highcharts chart in ASP NET MVC

Question

How to show data coming from the bank in a Highcharts chart in ASP NET MVC

Navigation

#1 by (1 votes)

0

Good afternoon,

I'm trying to show information coming from the bank on a Highchart Chart, but despite being able to integrate it into the project, I can not pass the values of information coming from the bank to the chart. If someone has already worked or has any idea how to do it, I would appreciate the help.

Follow the controller code that will generate the reports:

namespace DinheiroControlado.Controllers
{
public class RelatorioController : Controller
{

    private DinheiroControladoBD db2 = new DinheiroControladoBD();
    public ActionResult Index()
    {
        var cookie = DinheiroControlado.Repositorios.RepositoriosUsuarios.VerificaSeOUsuarioEstaLogado();
        //retorna Categoria agrupado e valor destas categorias SUM() para mostrar no gráfico
        var dados = (from d in db2.Movimentacoes
                     join c in db2.Categorias on d.IDCategoria equals c.IDCategoria
                     where d.IDUsuario == cookie.IDUsuario
                     group d by c.Descricao into g
                     select new ItemGrafico { Categoria = g.Key, Valor = g.Sum(d => d.Valor) }).Take(5);



        DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
            .InitChart(new Chart { PlotShadow = false })
            .SetTitle(new Title { Text = "Relatório Mensal" })
            .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
            .SetPlotOptions(new PlotOptions
            {
                Pie = new PlotOptionsPie
                {
                    AllowPointSelect = true,
                    Cursor = Cursors.Pointer,
                    DataLabels = new PlotOptionsPieDataLabels
                    {
                        Color = ColorTranslator.FromHtml("#000000"),
                        ConnectorColor = ColorTranslator.FromHtml("#000000"),
                        Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                    }
                }
            })
            .SetSeries(new Series
            {
                Type = ChartTypes.Pie,
                Name = "Browser share",
                Data = new Data(new object[]
                {
                    new object[] { "Firefox", 45.0 },
                    new object[] { "IE", 26.8 },
                    new object[] { "Chrome",12.8},
                    new object[] { "Safari", 8.5 },
                    new object[] { "Opera", 6.2 },
                    new object[] { "Others", 0.7 }
                })
            });

        return View(chart);
    }


}

}

asp.net-mvc highcharts

asked by anonymous 22.08.2015 / 22:03

1 answer

Open Modal bootstrap from code-behind Checkbox Conflicting with Paging

score 1 · Accepted Answer

Well, since I did not find an exit for this problem, I decided to create a vector to receive the information of the graph and then doing several Ifs checks to know the amount of information that will appear on the graph, follow the code if someone has the same problem and still did not know how to solve.

if (contador == 1)
        {
            DotNet.Highcharts.Highcharts chart3 = new DotNet.Highcharts.Highcharts("chart3")
            .InitChart(new Chart { PlotShadow = false })
            .SetTitle(new Title { Text = "Demonstrativo das Despesas - Periodo de " + ini + " a " + fim + "." })
            .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
            .SetPlotOptions(new PlotOptions
            {
                Pie = new PlotOptionsPie
                {
                    AllowPointSelect = true,
                    Cursor = Cursors.Pointer,
                    DataLabels = new PlotOptionsPieDataLabels
                    {
                        Color = ColorTranslator.FromHtml("#000000"),
                        ConnectorColor = ColorTranslator.FromHtml("#000000"),
                        Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                    }
                }
            })
            .SetSeries(new Series
            {
                Type = ChartTypes.Pie,
                Name = "Browser share",
                Data = new Data(new object[]
                {
                    new object[] { chartValuesC[0], chartValuesV[0]}
                })
            });

            return View(chart3);
        }
        else if (contador == 2)
        {
            DotNet.Highcharts.Highcharts chart3 = new DotNet.Highcharts.Highcharts("chart3")
            .InitChart(new Chart { PlotShadow = false })
            .SetTitle(new Title { Text = "Demonstrativo das Despesas - Periodo de " + ini + " a " + fim + "." })
            .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
            .SetPlotOptions(new PlotOptions
            {
                Pie = new PlotOptionsPie
                {
                    AllowPointSelect = true,
                    Cursor = Cursors.Pointer,
                    DataLabels = new PlotOptionsPieDataLabels
                    {
                        Color = ColorTranslator.FromHtml("#000000"),
                        ConnectorColor = ColorTranslator.FromHtml("#000000"),
                        Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                    }
                }
            })
            .SetSeries(new Series
            {
                Type = ChartTypes.Pie,
                Name = "Browser share",
                Data = new Data(new object[]
                {
                    new object[] { chartValuesC[0], chartValuesV[0]},
                    new object[] { chartValuesC[1], chartValuesV[1]}
                })
            });

            return View(chart3);
        }
        else if (contador == 3)
        {
            DotNet.Highcharts.Highcharts chart3 = new DotNet.Highcharts.Highcharts("chart3")
            .InitChart(new Chart { PlotShadow = false })
            .SetTitle(new Title { Text = "Demonstrativo das Despesas - Periodo de " + ini + " a " + fim + "." })
            .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
            .SetPlotOptions(new PlotOptions
            {
                Pie = new PlotOptionsPie
                {
                    AllowPointSelect = true,
                    Cursor = Cursors.Pointer,
                    DataLabels = new PlotOptionsPieDataLabels
                    {
                        Color = ColorTranslator.FromHtml("#000000"),
                        ConnectorColor = ColorTranslator.FromHtml("#000000"),
                        Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                    }
                }
            })
            .SetSeries(new Series
            {
                Type = ChartTypes.Pie,
                Name = "Browser share",
                Data = new Data(new object[]
                {
                    new object[] { chartValuesC[0], chartValuesV[0]},
                    new object[] { chartValuesC[1], chartValuesV[1]},
                    new object[] { chartValuesC[2], chartValuesV[2]}
                })
            });

            return View(chart3);
        }
        else if (contador == 4)
        {
            DotNet.Highcharts.Highcharts chart3 = new DotNet.Highcharts.Highcharts("chart3")
            .InitChart(new Chart { PlotShadow = false })
            .SetTitle(new Title { Text = "Demonstrativo das Despesas - Periodo de " + ini + " a " + fim + "." })
            .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
            .SetPlotOptions(new PlotOptions
            {
                Pie = new PlotOptionsPie
                {
                    AllowPointSelect = true,
                    Cursor = Cursors.Pointer,
                    DataLabels = new PlotOptionsPieDataLabels
                    {
                        Color = ColorTranslator.FromHtml("#000000"),
                        ConnectorColor = ColorTranslator.FromHtml("#000000"),
                        Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                    }
                }
            })
            .SetSeries(new Series
            {
                Type = ChartTypes.Pie,
                Name = "Browser share",
                Data = new Data(new object[]
                {
                    new object[] { chartValuesC[0], chartValuesV[0]},
                    new object[] { chartValuesC[1], chartValuesV[1]},
                    new object[] { chartValuesC[2], chartValuesV[2]},
                    new object[] { chartValuesC[3], chartValuesV[3]}
                })
            });

            return View(chart3);
        }
        else if (contador >= 5)
        {
            DotNet.Highcharts.Highcharts chart3 = new DotNet.Highcharts.Highcharts("chart3")
            .InitChart(new Chart { PlotShadow = false })
            .SetTitle(new Title { Text = "Demonstrativo das Despesas - Periodo de " + ini + " a " + fim + "." })
            .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
            .SetPlotOptions(new PlotOptions
            {
                Pie = new PlotOptionsPie
                {
                    AllowPointSelect = true,
                    Cursor = Cursors.Pointer,
                    DataLabels = new PlotOptionsPieDataLabels
                    {
                        Color = ColorTranslator.FromHtml("#000000"),
                        ConnectorColor = ColorTranslator.FromHtml("#000000"),
                        Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                    }
                }
            })
            .SetSeries(new Series
            {
                Type = ChartTypes.Pie,
                Name = "Browser share",
                Data = new Data(new object[]
                {
                    new object[] { chartValuesC[0], chartValuesV[0]},
                    new object[] { chartValuesC[1], chartValuesV[1]},
                    new object[] { chartValuesC[2], chartValuesV[2]},
                    new object[] { chartValuesC[3], chartValuesV[3]},
                    new object[] { chartValuesC[4], chartValuesV[4]}
                })
            });

            return View(chart3);
        }
         else 
        {

            TempData["1"] = "Demostrativo mensal de Despesas sem dados para o período selecionado!";
            return View();
        }