Secondary Y-Axis Setting Ranges in Javascript

[Dean Gaddie]

Hello,
Thank you for the great tools you guys build.

I'm having a problem setting the range details for the secondary Y Axis on a chart, in Javascript.

Setup:
I have a chart which loads its series information via Ajax. The chart has 2 series, one on the primary Y axis, and one on the secondary Y axis. At intervals, new data is fetched, and added to the chart via Ajax. The series are displaying just fine, its just the min/max/interval on the secondary Y which is a problem.

In the MVC View:
@(Html.EJ().Chart("myChart")
//Rendering empty Chart without data
.Axes(axis =>
{
axis.Name("Name2")
.Orientation("vertical")
.OpposedPosition(true)
.Title(t => t = new AxesTitleBuilder(new Title { Text = "Name2" }))
.Add();
})
.Series(sr =>
{
sr
.Name("Name1")
.XName("Fetched")
.YName("Last")
.Tooltip(tooltip=>tooltip.Visible(true))
.Type(SeriesType.Line)
.Points(pt =>
{

}).Add();
})
.Series(sr =>
{
sr
.Name("Name2")
.XName("Fetched")
.YName("Last")
.Tooltip(tooltip => tooltip.Visible(true))
.Type(SeriesType.Line)
.YAxisName("Name2")
.Points(pt =>
{

}).Add();
})
.PrimaryXAxis(axis => axis.LabelRotation(90)
.Title(tl => tl.Text("Date"))
.ValueType(AxisValueType.Datetime)
.LabelFormat("yyyy/MM/dd HH:mm"))
.IsResponsive(true))

The new ranges (min, max and interval) are calculated based on the new data.

I set the range on the PrimaryYAxis, and it updates the chart like I expect. The code I used is:
$("#myChart").ejChart({
primaryYAxis: {
range: {
interval: (newMax - newMin) / 5,
min: newMin,
max: newMax
}
}
});

But I can't find a way to update the range on the secondary Y axis. I've tried various ways based on the following:
$("#myChart").ejChart({
secondaryYAxis: {
range: {
interval: (newMax - newMin) / 5,
min: newMin,
max: newMax
}
}
});

And then at the end of the updates:
$("#myChart").ejChart("redraw");

Using secondaryY, secondY, yAxis... nothing seems to update the ranges on the secondary Y.

Thank you for any help you can give!

Dean

Attachment: ChartExample_e2a2c6c4.zip

[Saravana Kumar Kanagavel]

Hi Dean, 

 

Thanks for contacting Syncfusion Support. 

 

We have analyzed your query and code . After analyzing the code, we have found that you have created the chart again with setting the range after chart rendered. So if you wish to change the range after chart has been rendered by button click or any event, then please find the code snippet below 

 

[JS] 

function updateRange() { 

        var chart = $("#myChart").ejChart("instance"); 

        chart.model.axes[0].setRange = true; 

        chart.model.axes[0].range.min = 40; 

        chart.model.axes[0].range.max = 140; 

        chart.redraw(); 

    } 

 

  

And we have prepared the sample for your reference and attached in the below location. 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/133538/ze/Sample-2020482684 

  

Please find the output for before update the range 

 

 

 

Please find the output for after update the range by button click event. 

 

 

 

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

 

[Dean Gaddie]

Hi,

Thank you very much! That worked great!

Dean

[Saravana Kumar Kanagavel]

Hi Dean, 

 

Thanks for your update. 

 

Please let us know if you need any other assistance on this. 

 

Regards, 

Saravana Kumar K.