Change Axis Labels, Range, Intervals, horizontal areas via JS

[salasidis]

Are there examples in the demos (did not find any) of what the best way to modify the chart parameters for on the fly created charts. I have a list of sensors, each with their own  values, ranges, alarm ranges etc.

 

I would like to modify the chart to fit the data for each chart.

I would like to add a color horizontal area that will signify the normal range.

Thanks

[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/

[salasidis]

Thanks.

 

In the AP{I I see the addColorScheme option, but I don’t see any options for (what I need in my case)

 

Edit X axis Label and units

Edit Y axis Label and units

Modify horizontal color band – just the values on the Y axis, not color etc

My series are called X and Y (to minimize the transmission bytes required in JSON), Y will be the vertical axis, I only plan to have one series at a time, so I don’t need the legend.

 

Is there a place all these are documented, or am I just missing it myself on the API html page.

 

Thanks again

[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, 3 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.

[salasidis]

Thanks – got that working

 

How about for elements that are arrays – for example horizontal bands

 

I can get them working via the main initialization, but not sure how to access them individually

I tried

chart.seriesGroups(0).bands(0).minValue = 0;
chart.seriesGroups(0).bands(0).maxValue = 100;
chart.seriesGroups(0).bands(0).color = ‘light gray’;

 

but that did not work.

 

[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/

[salasidis]

Thanks – I had tried both square and round brackets just in case one or the other worked. It was the chart.refresh() that I was missing.

[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, 3 months ago by svetoslav_borislavov.

[Author]

Posts