Products

[svetoslav_borislavov]

Hi,

I did not understand you correctly. You asked for an example of using DateTime on the X-axis and you are giving one.

If you want to set the value to be based on hours you can use the ‘baseUnit’ property as shown in the following example.

Here there are values for every hour. The base unit is hours and the interval is one hour as set in the ‘unitInterval’ property.

https://codepen.io/svetoslavb04/pen/ExEEbvO

 

Please explain what you need, so I can help you as much as possible.

 

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

I have worked out the problem.

Here is the demo: https://stackblitz.com/edit/github-q2hxsx-tsz5e9?file=src/app/app.component.ts

 

If you need further help, let me know!

 

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[svetoslav_borislavov]

Hi,

I have reproduced your situation by the given code and I saw that you are accessing the row id incorrectly.
To get the row id you can access it from ‘formatObject.row.id’. You are trying to access it from formatObject.row.data
formatObject.row.data contains the datafields with their values and $ object with id and index.

 

I suggest following the given example and accessing the row id —> formatObject.row.id

 

Here is an example of logging the row id in the console on checkbox click: stackblitz

 

I will wait for the result!

 

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[svetoslav_borislavov]

Hi,

As a workaround, you can declare a variable which will store the input element of the label.
In the handler of the editDialogOpen event, you will initialize the variable with the reference of the label input element and in the ItemChanging event you can access the value of the input element. This can be done for any element.

Here is an example: https://codepen.io/svetoslavb04/pen/rNdwxOd

 

If you need any help, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[svetoslav_borislavov]

Hi,

Can you explain what are you trying to achieve?
You can edit the event object in the itemChanging event.
This event is triggered when an Event is GOING to be updated/inserted/removed. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.
event.detail.type contains the type of the operation. You can use this to check if it is ‘inserting’.
event.detail.item contains the event object that you can manipulate.

 

Please explain your situation so we can help you!

 

Please have a look at this demo to see how to hide any datafield in the modal: codepen
Basically, the event object from the editDialogOpen event contains all the editors in ‘event.detail.editors’.
From there you can get any editor you want and apply a class ‘smart-hidden’: ‘notificationsEditor.classList.add(‘smart-hidden’);’

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[svetoslav_borislavov]

Hi,

Happy to hear that! Should you have any questions, do not hesitate to contact us!

 

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

The seriesGroups is an array you should access its elements with the brackets  ‘seriesGroups[2]’ for example.
This goes for the seriesGroups[2].bands too.

The most important thing is that after each property or data change you must call the refresh() method. ‘chart.refresh();’

 

Look at this demo in each you can update the bands after clicking on a button: https://codepen.io/svetoslavb04/pen/rNdmBoW

 

If you need further help, do not hesitate to contact us!

 

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[svetoslav_borislavov]

Hi,

 

To display them vertically you should display them as a block or wrap them in an element that is displayed as a block.
Here is a simple demo showing them in a vertical direction: https://codepen.io/svetoslavb04/pen/rNdmBjV

 

If you need further assistance, do not hesitate to contact us!

 

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

To display them vertically you should display them as a block or wrap them in an element that is displayed as block.
Here is a simple demo showing them in a vertical direction: https://codepen.io/svetoslavb04/pen/rNdmBjV

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[svetoslav_borislavov]

Hi,

Here you are: https://www.htmlelements.com/docs/chart-axes/. This is the documentation for the axes.
This is the API: https://www.htmlelements.com/docs/chart-api/.

You can edit your labels with the xAxis.labels object or valueAxis.labels object.

To modify the values on the Y axis you can again use the valueAxis.labels.formatFunction.

 

A xAxis specific property is the baseUnit:
baseUnit – the base unit when used with ‘date’ axis. Values can be ‘year’, ‘month’, ‘day’, ‘hour’, ‘minute’, ‘second’ or ‘millisecond’.

 

To remove the legend you can set showLegend  property to false.

 

In this demo, the formatFunction of the xAxis label is changed every second: https://codepen.io/svetoslavb04/pen/MWVbdyy

 

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

To do that you have the opportunity to append the dropdown to any element you want with the drop-down-append-to attribute, which accepts a CSS selector.
Have a look at the following example: codepen.
In it, the dropdown is appended to the body, you can also change the position of the dropdown with the drop-down-position attribute.
Here is a link for ComboBox`s API: https://www.htmlelements.com/docs/combobox-api

You can also change these properties programmatically:

const combobox = document.querySelector('smart-combo-box');

combobox.dropDownAppendTo('body'); //the value should be CSS selector

combobox.dropDownPosition = 'bottom'; //possible values are:
//'auto', 'top', 'bottom', 'overlay-top', 'overlay-center', 'overlay-bottom', 'center-bottom', 'center-top'

If you have any additional questions, do not hesitate to ask!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

The format function accepts the value.  You can modify it as you want and then return it.

Here is an example of formatting the date in the area Range Line Demo to hh:mm
https://codepen.io/svetoslavb04/pen/oNqBRXe

formatFunction: (value) => {

const hours = value.getHours().toString().padStart(2, 0);

const minutes = value.getMinutes().toString().padStart(2, 0);

return hours + ':' + minutes;

}

Should you need any further assistance, please do not hesitate to contact us.

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

To format the x-axis label`s values you can use the formatFunction. Here is an example for setting the value to hh:mm :

formatFunction: function (value) {

const hours = value.getHours().toString().padStart(2,0);

const minutes= value.getMinutes().toString().padStart(2,0);

return hours + ':' + minutes;
}

You can centre the x-axis centred on the hour with the baseUnit set to ‘hour’.
The gap between the hours can be set with the unitInterval set to 1. This will make the gap to be one hour.

To set the starting point to be yesterday`s hour you can create a date variable and set it to the minValue:

const yesterday = new Date();
yesterday.setDate(yesterday.getDate() -  1);

you can set the minValue to yesterday

If you need further assistance, do not hesitate to ask!

Best Regards:
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

You can change the parameters directly. Here is a demo in which the colour scheme is being updated every second:

https://codepen.io/svetoslavb04/pen/MWVbdyy

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[svetoslav_borislavov]

Hi,

The error is probably coming from some interaction with another window element.
A possible solution is on the button click to select all windows and filter the needed by its id.

In the following example, there are two windows but I am filtering the one I do need:
https://codepen.io/svetoslavb04/pen/YzaNgrm

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts