Question

-3

Can not pass date to nivo line chart

rated 0 times [ 1] [ 4] / answers: 1 / hits: 6805 / 4 Years ago, fri, april 24, 2020, 12:00:00

I am using a nivo line chart and want to use the x-Axis as a timeline, down to a minute.
Unfortunatelly I can not render that chart because it fails to read the date properly. For example this is part of my data:

{ x: 2020-04-24T13:07:44.000+0000, y: 0.8063946735624102 }

this is the data the chart gets, generated with the following code:

let cpuEntry = {

             x: data[i].created,

             y: data[i].system_cpu

         };

When I try to open the chart I get this error message:

Uncaught TypeError: v.getTime is not a function

After a bit of research I found out, the chart needs a Date obejct. I wrapped it like this:

x: new Date(data[i].created),

which gives me a result like this:

Fri Apr 24 2020 15:07:44 GMT+0200

and this error:

Uncaught Error: Objects are not valid as a React child (found: Fri Apr 24 2020 15:25:00 GMT+0200). If you meant to render a collection of children, use an array instead.

This is part of my configuration in the ResponsiveLine:

                    xScale={{

                    format: 'native',

                    type: 'time'

                }}

I have read something about trying to use toString() but thats just a circle of the same errors. I hope someone can help me. If needed I will provide further information.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sidneyh

Add To Favorites

Follow

Total Points: 118

Total Questions: 108

Total Answers: 105

Location: Mali

Member since Fri, Jun 18, 2021

3 Years ago

sidneyh questions

1 Next.js, redirect to 404 page inside getServerSideProps

Tue, Jun 7, 22, 00:00, 2 Years ago

1 How to generate a UUID in NextJs?

Wed, Apr 13, 22, 00:00, 2 Years ago

1 Can electronjs be used for websites

Wed, Aug 12, 20, 00:00, 4 Years ago

1 How to change scroll speed to be smooth?

Wed, Jun 3, 20, 00:00, 4 Years ago

1 Axios - get url with parameters without actually making request

Fri, Mar 20, 20, 00:00, 4 Years ago

View All

answered 4 Years ago hugo · Accepted Answer

You should to specify xScale format as

xScale={{ format: "%Y-%m-%dT%H:%M:%S.%L%Z", type: "time" }}

And xFormat (as an example)

xFormat="time:%Y-%m-%dT%H:%M:%S.%L%Z"

Or (if you want just time)

xFormat="time:%H:%M:%S.%L"

Also based on your time intervals you can set axisBottom settings as follow:

axisBottom={{

          tickValues: "every 1 second",

          tickSize: 5,

          tickPadding: 5,

          tickRotation: 0,

          format: "%S.%L",

          legend: "Time",

          legendOffset: 36,

          legendPosition: "middle"

        }}

Here is a complete working example: https://codesandbox.io/s/react-hooks-counter-demo-dbr34?file=/src/index.js

And for time formats refer to https://github.com/d3/d3-time-format