locked
Pie Chart RRS feed

  • Question

  • User-1104215994 posted

    Hello,

    I have an Asp.net Core web application. I would like to implement a dashboard page where there is a pie chart. There will be a start and an end date in order to query some results from the database. And it will be much better if there is a way to click on the pie chart and display the related result set. Any way that you can help me to implement such a dashboard?

    Best Regards.

    Wednesday, November 13, 2019 12:01 PM

Answers

All replies

  • User475983607 posted

    Chart.js is a popular library. https://www.chartjs.org/.  Your dashboard requirement is not existent. I recommend doing a Google search for a dashboard layout/template that meets your unknown requirements.

    Wednesday, November 13, 2019 12:29 PM
  • User711641945 posted

    Hi cenk1536,

    There will be a start and an end date in order to query some results from the database.

    Where did you want to show the date in pie chart?Could you share a picture to show what you want to implement?The date is normally used in Line chart or Bar chart and so on.

    As mgebhard said,you could use Chart.js.The sample about pie chart:

    https://www.chartjs.org/docs/latest/charts/doughnut.html

    Also,d3.js is a good library.You could refer to:

    https://www.d3-graph-gallery.com/graph/pie_basic.html

    Best Regards,

    Rena

    Thursday, November 14, 2019 9:40 AM
  • User-1104215994 posted

    At the top of the page, there will be the date pickers and a submit button. When a user selects dates and clicks submit, the pie chart will be displayed. Maybe two pie charts side by side.

    Thursday, November 14, 2019 12:33 PM
  • User475983607 posted

    At the top of the page, there will be the date pickers and a submit button. When a user selects dates and clicks submit, the pie chart will be displayed. Maybe two pie charts side by side.

    Share the code, the chart library you are using, expected results, and actual results.  Also include any error messages.

    Thursday, November 14, 2019 2:20 PM
  • User-1104215994 posted

    There is no error but no chart displayed either. In firefox web developer's console, It says type error: item is null. (acquireContext, construct, Chart)

    @{
        ViewData["Title"] = "PieChart";
    }
    
    <h2>PieChart</h2>
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width"/>
        <title>Pie Charts</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
        <script>
    
           
            new Chart(document.getElementById("pie-chart"), {
                type: 'pie',
                data: {
                    labels: [@ViewBag.Status_List],
                    datasets: [{
                        label: "Reconciliation",
                        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                        data: [@ViewBag.Count_List]
                    }]
                },
                options: {
                    title: {
                        display: true,
                        text: 'Reconciliation'
                    },
                    responsive: true,
                    maintainAspectRatio: true
                }
            });
    
    
        </script>
    </head>
    <body>
    <div style="text-align: center">
        <canvas id="pie-chart" width="800" height="450"></canvas>
    </div>
    <div style="text-align: center">
        
    </div>
    </body>
    
    </html>
    

    Friday, November 15, 2019 5:27 AM
  • User-1104215994 posted

    Canvas had to be before the java script. :)

    Friday, November 15, 2019 5:33 AM
  • User-1104215994 posted

    When I try to send strings (UNCERTAIN, CONFIRM, CANCEL) to the labels, I am getting UNCERTAIN is not defined on the firefox console.

    Here is the firefox debugger:

    <script>
    
           
        new Chart(document.getElementById("pie-chart"), {
            type: 'pie',
            data: {
                labels: [UNCERTAIN,CONFIRM,CANCEL],
                datasets: [{
                    label: "Reconciliation",
                    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                    data: [135,3,2]
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Reconciliation'
                },
                responsive: true,
                maintainAspectRatio: true
            }
        });
    
    
    </script>

    Here is my controller action:

    public IActionResult PieChart()
            {
                try
                {
                   
                    var result = _context.GameBanks
                        .GroupBy(p => p.Status)
                        .Select(g => new
                        {
                            Count = g.Count(),
                            Status = g.Key
                        }).ToList();
    
                    var resultList = string.Empty;
                    var nameList = string.Empty;
    
                    foreach (var element in result)
                    {
                        resultList = resultList + element.Count + ",";
                        //nameList = nameList + element.Status + ",";
    
                        switch (Convert.ToInt32(element.Status))
                        {
                            case 0:
                                
                                nameList = nameList + "UNCERTAIN" + ",";
                                break;
                            case 1:
                                
                                nameList = nameList + "CONFIRM" + ",";
                                break;
                            case 2:
                                
                                nameList = nameList + "CANCEL" + ",";
                                break;
    
                        }
    
    
                    }
    
                  
                    ViewBag.Count_List = resultList.TrimEnd(',').Trim();
                    ViewBag.Status_List = nameList.TrimEnd(',').Trim();
    
    
                    return View();
                }
                catch (Exception)
                {
                    throw;
                }
            }

    Friday, November 15, 2019 6:11 AM
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 15, 2019 6:36 AM