Proposing New Component - Line chart - Areteans

[s-thutupalli]

Title: Line Graph

Description :

A line graph is a type of chart used to display data points in a continuous manner, often showing how a variable changes over time. It consists of a series of data points, each represented by a dot or a marker, connected by straight lines. Line graphs are particularly useful for visualising trends, patterns, and fluctuations in data across different periods or categories.

Key features of a line graph:

1. X-axis (horizontal) typically represents the time or independent variable.
2. Y-axis (vertical) represents the dependent variable or the quantity being measured.
3. Data points are plotted based on their corresponding X and Y values.
4. Lines connect the data points to illustrate the trend.

Dependency:

Used Recharts (https://recharts.org/en-US) library for FAB development. 

Configuration :

The title, chart width, chart height are custom made and can be changed as per need.

Also we have options of modifying the width type to % or px as needed.

The horizontal and vertical grid lines, opacity can be handled dynamically as well.

The X-axis label, gridlines, tick marks, auto append and auto prepend are custom configured and can be modified as need be. Same applies for Y-axis

Series is a dropdown where we can select how many lines we want to generate in the line graph,

The primary and secondary column keys have been configured, along with the column spacing.

The data source is created which has the data key (x-axis value)

The data which needs to be mapped has been configured here,
We can either import or directly add the values here.
Also the data model which has the key values, and their types are configured here.

Usage :

Line graphs are commonly used in areas like economics, science, and business to track changes over time, such as stock prices, weather data, or sales performance

Real-Time Scenarios:

Sales Performance

A retail company might analyze its monthly sales data to determine if sales are increasing during holiday seasons or decreasing due to external factors, helping with inventory planning.

Sports Performance

Coaches or analysts use line charts to evaluate athletes' performances, identify areas for improvement, and monitor progress throughout the season

Attached the component code and detailed description with images below.

LineChart.docx
lineCharts.zip

[ricmars]

same as pie chart component - Why build a Constellation DX component when this UX pattern can be achieved using a dashboard with promoted filters and an insight?

[s-thutupalli]

Hi Richard,

While using a dashboard with promoted filters and insights can indeed provide a solution for achieving a similar UX pattern, yet it can prove to be a bit complex at times.
Unlike insights which is created on report definition, the line graph created by us has a simple approach, it take in a parameterised data page and based on the parameter it simplifies the data page and shows the graph.
Along with this, there are customisable fields like axis lines, ticks, labels, grid lines which can be modified and changed as per the user's need.
Hence we tried to build a custom line graph component.

Thanks,
Sowjanya

[s-thutupalli]

Same applies for the bar graph as well.