Changing min/max range on PrimaryYAxis - Redraw does not work
Hi,
we have a Angular SPA that visualizes data from IoT devices. For that we use the Syncfusion Chart control which might have multiple y-axis (for e.g. "Temperature", "Pressure", "Length",...)
Our customers want to print out charts with user-given y-axis min/max-range (not using the zoom control).
For example, a user want to have the chart with the "Pressure"-"y-axis" from 0.5 - 2 bar and the "Temperature"-"y-axis" from 20 °C to 30°C.
For that, we tried to change the min/max range but failed. How can we control the min/max range?
Attached is a example that runs on jsplayground.syncfusion.com which shows that the function runs yet the primaryYAxis.range.min property will not be redraw.
function SetYAxisMinTo10(){
var chart = $('#container').ejChart('instance');
chart.model.primaryYAxis.range.min = 10; //This doesn't work?
chart.model.primaryYAxis.labelFormat = "{value} set to min 10?" //This works
$('#container').ejChart('redraw');
}
Attachment: primaryYAxisMinMaxRedraw_fa06f12e.zip
SIGN IN To post a reply.
3 Replies
Hi Sebastian,
Thanks for contacting Syncfusion Support.
We have analyzed your query and modified the sample based on your requirement. And if you want to change the range min/max/interval, you need to setting the setRange property as true while redrawing the chart once.
Please find the code snippet below
|
[JS]
function SetYAxisMinTo5() {
var chart = $('#container').ejChart('instance');
chart.model.primaryYAxis.range.min = 5; //This doesn't work?
chart.model.primaryYAxis.setRange = true;
chart.model.primaryYAxis.labelFormat = "{value} set to min 5?"
$('#container').ejChart('redraw');
}
function SetYAxisMinTo10() {
var chart = $('#container').ejChart('instance');
chart.model.primaryYAxis.setRange = true;
chart.model.primaryYAxis.range.min = 10; //This doesn't work?
chart.model.primaryYAxis.labelFormat = "{value} set to min 10?"
$('#container').ejChart('redraw');
}
|
And you can find the modified the sample from the below link.
Sample Link : http://jsplayground.syncfusion.com/tqx2qvxq
Please find the output of the sample below
Please let us know if you have any concern.
Regards,
Saravana Kumar K.
Thank you! This helps.
My next question is: After setting the range.min/max to a certain value, how can I reset the primaryYAxis so that it is redrawn and looks like before?
I think I have to set the primaryYAxis.range.min/max to their default value which is null (I think). This works partly but the axis range is padded to the min and max values of the given values.
Attached, again, an example.
Initially, I have a padding that sets min to 0 and max to 16.
SetYAxisMinTo10MaxTo12()/SetYAxisMinTo2() successfully change the ranges.
UpdateChart() should reset to the initial values (based on given rangePadding) of 0(min) .. 16(max) but sets it to 2/15.
Attachment: RestoreDefaultPaddingAfterSettingRangeMinMaxToNull_361595cd.zip
SIGN IN To post a reply.
