Pie chart to show type of investments #122

rajadilipkolli · 2022-12-09T05:06:26Z

As an end user who is using this application, I would like to understand the type of investment made like, Equity, debt , Cash and further subcategory like ELSS, Large Cap, Small Cap, Mid cap in a pie chart

rajadilipkolli · 2024-04-09T05:20:39Z

@coderabbitai, Can you please generate sample code for the above issue.

coderabbitai · 2024-04-09T05:21:59Z

Tip

For best results, initiate chat on the files or code changes.

@rajadilipkolli, based on the issue description, you're looking for sample code to display investment types (Equity, Debt, Cash, etc.) and subcategories (ELSS, Large Cap, Small Cap, Mid Cap) in a pie chart. Here's a basic example using JavaScript and the Chart.js library to create such a pie chart. This example assumes you have the data for the different investment types and their subcategories.

<!DOCTYPE html>
<html>
<head>
    <title>Pie Chart: Investment Types</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div style="width: 600px; height: 600px">
        <canvas id="investmentPieChart"></canvas>
    </div>
    <script>
        const ctx = document.getElementById('investmentPieChart').getContext('2d');
        const investmentPieChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Equity - ELSS', 'Equity - Large Cap', 'Equity - Small Cap', 'Equity - Mid Cap', 'Debt', 'Cash'],
                datasets: [{
                    label: 'Investment Types',
                    data: [12, 19, 3, 5, 2, 3], // Example data
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Investment Types and Subcategories'
                    }
                }
            },
        });
    </script>
</body>
</html>

This code snippet creates a pie chart displaying the distribution of investment types and their subcategories. You'll need to replace the data array in the datasets with your actual data. The backgroundColor and borderColor arrays define the colors for each segment of the pie chart. You can adjust these colors to match your preferences.

Please ensure you have Chart.js included in your project for this code to work. You can include Chart.js by adding the <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> tag in your HTML file, as shown in the example.

Analysis chain

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Fetch the content of the GitHub issue using the GitHub CLI.
gh issue view 122 --repo rajadilipkolli/mfscreener --json title,body

Length of output: 336

rajadilipkolli · 2024-04-09T05:23:35Z

@coderabbitai, how to achieve the same in spring boot project using java.

coderabbitai · 2024-04-09T05:24:10Z

Tip

For best results, initiate chat on the files or code changes.

To achieve the functionality of displaying investment types and subcategories in a pie chart within a Spring Boot project using Java, you can follow this approach:

Backend (Spring Boot): Create a REST controller that serves the pie chart data in JSON format. Here's a simplified example:

// Import statements
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
import java.util.Map;

@RestController
public class InvestmentChartController {

    @GetMapping("/api/investmentChartData")
    public Map<String, Object> getInvestmentChartData() {
        return Map.of(
                "labels", List.of("Equity - ELSS", "Equity - Large Cap", "Equity - Small Cap", "Equity - Mid Cap", "Debt", "Cash"),
                "data", List.of(12, 19, 3, 5, 2, 3)
        );
    }
}

This controller returns a JSON object with labels and data for the pie chart. You'll need to replace the static data with dynamic data fetched from your application's data source.

Frontend: Use a JavaScript charting library (like Chart.js, as in the initial example) to fetch this data and render the pie chart. Here's how you might do it:

<!DOCTYPE html>
<html>
<head>
    <title>Investment Types Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div style="width: 600px; height: 600px">
        <canvas id="investmentPieChart"></canvas>
    </div>
    <script>
        fetch('/api/investmentChartData')
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('investmentPieChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: 'Investment Types',
                            data: data.data,
                            backgroundColor: [
                                // Define your colors here
                            ],
                            borderColor: [
                                // Define your border colors here
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: 'Investment Types and Subcategories'
                            }
                        }
                    },
                });
            });
    </script>
</body>
</html>

This HTML page fetches the chart data from your Spring Boot application and renders the pie chart using Chart.js. You'll need to adjust the fetch URL if your application context path or the controller mapping is different.

This approach allows you to leverage Java for backend data processing and management, while still using powerful JavaScript libraries on the frontend for rendering charts and other visualizations.

rajadilipkolli self-assigned this Dec 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pie chart to show type of investments #122

Pie chart to show type of investments #122

rajadilipkolli commented Dec 9, 2022 •

edited

Loading

rajadilipkolli commented Apr 9, 2024

coderabbitai bot commented Apr 9, 2024

rajadilipkolli commented Apr 9, 2024

coderabbitai bot commented Apr 9, 2024

Pie chart to show type of investments #122

Pie chart to show type of investments #122

Comments

rajadilipkolli commented Dec 9, 2022 • edited Loading

rajadilipkolli commented Apr 9, 2024

coderabbitai bot commented Apr 9, 2024

rajadilipkolli commented Apr 9, 2024

coderabbitai bot commented Apr 9, 2024

rajadilipkolli commented Dec 9, 2022 •

edited

Loading