Estoy tratando de graficar un mes de datos que se ve así,
0: {created: 1601820360, magic: -0.1, magnitude: 0.1, createdDay: "2020-10-05"} 1: {created: 1601820365, magic: -0.8, magnitude: 0.8, createdDay: "2020-10-05"} 2: {created: 1601900938, magic: -0.2, magnitude: 0.2, createdDay: "2020-10-05"} 3: {created: 1601900956, magic: -0.2, magnitude: 0.2, createdDay: "2020-10-05"} 4: {created: 1601900971, magic: 0.2, magnitude: 0.2, createdDay: "2020-10-05"}
Actualmente el gráfico se ve así,
Hay 3000 puntos de datos ish en esta matriz, y estoy buscando que se agreguen por tiempo, digamos 15 minutos u horas, en lugar de marcas de tiempo individuales, durante la fecha en que se encuentra.
¿Cómo puedo obtener este tipo de salida? ¿Es solo que los datos en sí deben promediarse a lo largo del tiempo?
Intentando volver a formatear los datos entrantes para que sean más utilizables para el gráfico. Quiero hacer que los datos ingresen y se promedien en, digamos, intervalos de 15 minutos, pero estoy realmente confundido acerca de cómo lograr esto.
Esta es la primera parte del código que solo toma los datos y los ordena adecuadamente para obtener el gráfico de líneas de arriba,
export default function generateLineGraphPointsSentiment( sentimentData ) { if (sentimentData !=null) { const DataInput = []; Object.keys(sentimentData).map(function (key, item) { var sentimentCurrent = sentimentData[key]; sentimentCurrent.map(function (k, num) { let dateCreated = new Date(k.created * 1000); DataInput.push({ created: dateCreated, sentiment: k.sentiment, magnitude: k.magnitude, }); }); }); return DataInput } else { return 0 } }
El promedio de los datos en sí es algo así, pero no estoy seguro de cómo hacerlo funcionar durante varios días,
function generateSentimentPoints(Sentiments) { let nOfEntries = Array(24).fill(1); Sentiments.forEach((item) => { const createdHour = new Date(item.created * 1000).getHours(); values[createdHour] = values[createdHour] + item.sentiment; nOfEntries[createdHour] += 1; });
Apreciar una mejor manera de lograr este resultado
Intenta reemplazar tu pieza con,
<AreaChart width={500} height={400} data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }} > <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="createdDay" /> <YAxis /> <Tooltip /> <Area type="monotone" dataKey="magnitude" stroke="#8884d8" fill="#8884d8" /> </AreaChart>
Tres variables deben ser correctas,
data
, usaste Data
, no sé si eso es un error tipográfico