Topic: LineChart with time as xAxis

sundance free asked 4 years ago


Hi,

I'd like to make a linechart versus time, but I have no success with xAxes: type: 'time' and similar settings. What is the advised solution? See trial snippet forked and modified.

Best regards,

István

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)


MDBootstrap staff answered 4 years ago


Hi sundance,

Using tick.source and min/max properties require you to generate labels tab before as they showed in this example so if you want to generate new data for your data set, you need to assign it also in labels tab if you want to use these properties.

The bounds property is used to set the display style and how you want to display it. It will change the priority of the display. It doesn't set min or max property. It bypasses that. This is explained in this section.

If you need additional help I am here for you.

Best Regards, Piotr


sundance free answered 4 years ago


Hi,

Finally I solved the problem using 'scatter' type, and a callback function for xAxes labelling. Almost all properties changeable (see snippet), except min and max on xAxis, even they are changeable on yAxes. I had no success with bounds, and tick.source as well, in general, using Time Cartesian Axis. Is it possible to 'activate' these properties?

Best regards,

István


sundance free answered 4 years ago


Hi Piotr,

Thank you for advise. The problem is that I have to create charts based on real time-series data, originated from measurements with random samling time. Data points are tagged with timestamps. I tried to create a simple example in my snippet.

If I know well, MDB solution is based on chart.js. According its documentation xAxis could be 'time', but I can not reach success with those settings. See chart.js axes/cartesian/time documentation.

Best regards, István


MDBootstrap staff answered 4 years ago


Hi sundance,

I created a simple solution to building custom charts.

https://mdbootstrap.com/snippets/jquery/pjoter-2-0/818662

You can modify this example to your needs.

If you need additional help please describe what exactly you want to achieve.

Best Regards, Piotr



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.7
  • Device: PC
  • Browser: Chrome
  • OS: Windows 7 Prof. 64-bit
  • Provided sample code: No
  • Provided link: Yes