DEV Community

Rajasekar Thangavel
Rajasekar Thangavel

Posted on

1

Angular Chart Visualization Task

Angular Chart Visualization Task

Task

Visualize data using charts in Angular.


Requirements

  1. Use a charting library like Chart.js or ngx-charts.
  2. Create a dashboard with the following charts:
    • Bar Chart: Visualize monthly sales data.
    • Pie Chart: Display product category distribution.
    • Line Chart: Show daily active users.
  3. Add interactivity:
    • Filter bar chart data by quarter (e.g., Q1, Q2, Q3, Q4).
    • Toggle pie chart view between percentages and absolute values.
    • Filter line chart data by a custom date range.

Sample Data

1. Monthly Sales Data (Bar Chart)

export const monthlySalesData = [
  { month: 'January', sales: 15000 },
  { month: 'February', sales: 20000 },
  { month: 'March', sales: 18000 },
  { month: 'April', sales: 22000 },
  { month: 'May', sales: 25000 },
  { month: 'June', sales: 24000 },
  { month: 'July', sales: 26000 },
  { month: 'August', sales: 28000 },
  { month: 'September', sales: 23000 },
  { month: 'October', sales: 27000 },
  { month: 'November', sales: 30000 },
  { month: 'December', sales: 32000 },
];

Enter fullscreen mode Exit fullscreen mode
export const productCategoryData = [
  { category: 'Electronics', percentage: 35 },
  { category: 'Fashion', percentage: 25 },
  { category: 'Home Appliances', percentage: 20 },
  { category: 'Books', percentage: 10 },
  { category: 'Other', percentage: 10 },
];
Enter fullscreen mode Exit fullscreen mode
export const dailyActiveUsers = [
  { date: '2024-12-01', users: 500 },
  { date: '2024-12-02', users: 550 },
  { date: '2024-12-03', users: 520 },
  { date: '2024-12-04', users: 600 },
  { date: '2024-12-05', users: 580 },
  { date: '2024-12-06', users: 610 },
  { date: '2024-12-07', users: 650 },
];
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs