Formatting Data for Line Charts

Demonstrate how to take raw data and format it appropriately for use in a line chart showing trends over time. Include examples of parsing dates and aggregating values.

const rawData = [
  { date: '2023-04-01', value: 10 },
  { date: '2023-04-02', value: 15 },
  { date: '2023-04-03', value: 20 },
  // Add more data points
];

This is the raw data array consisting of objects. Each object represents a data point on the line chart with a 'date' and a 'value'.

const parseDate = (dateString) => new Date(dateString);

This function takes a date string and returns a Date object. It's used to convert the string date from the raw data into a Date object for easier manipulation and formatting.

const formatDataForChart = (data) => {
  return data.map(dataPoint => ({
    x: parseDate(dataPoint.date).getTime(), // Convert date to timestamp for the chart
    y: dataPoint.value
  }));
};

This function takes the raw data array and maps over it to return a new array of objects formatted for the line chart. Each object has 'x' representing the timestamp of the date and 'y' representing the value. This format is commonly accepted by charting libraries like Chart.js.

const formattedData = formatDataForChart(rawData);

Here, the raw data is passed to the `formatDataForChart` function, resulting in `formattedData` which is ready to be used in a line chart to display trends over time.