How to show data coming in the database on a Highcharts chart in ASP NET MVC

Question

Good afternoon,

I’m trying to show information coming from the bank in a Highchart chart, but even though I can integrate it into the project, I can’t pass the values of the information coming from the bank to the chart. If anyone has ever worked or has any idea how to do it would appreciate the help.

Follow controller code that will generate 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);
    }


}

}

Answer 1

Well, since I couldn’t find a way out of this problem, I decided to create a vector to receive the information from the chart and then do several Ifs checks to know the amount of information that will appear on the chart, follow the code in case 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();
        }