JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Charts & Data Viz › Change Axis Labels, Range, Intervals, horizontal areas via JS
- This topic has 7 replies, 2 voices, and was last updated 2 years, 4 months ago by svetoslav_borislavov.
-
AuthorPosts
-
July 17, 2022 at 12:51 am #103367salasidisParticipant
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
July 18, 2022 at 7:12 am #103372svetoslav_borislavovParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/July 18, 2022 at 11:14 pm #103400salasidisParticipantThanks.
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
July 19, 2022 at 7:12 am #103401svetoslav_borislavovParticipantHi,
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 BorislavovSmart 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.
July 19, 2022 at 3:00 pm #103411salasidisParticipantThanks – 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.
July 20, 2022 at 7:04 am #103415svetoslav_borislavovParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/July 20, 2022 at 3:27 pm #103417salasidisParticipantThanks – 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.
July 21, 2022 at 7:35 am #103418svetoslav_borislavovParticipantHi,
Happy to hear that! Should you have any questions, do not hesitate to contact us!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/- This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
-
AuthorPosts
- You must be logged in to reply to this topic.