Hide/Show addtional Y Axis in Javascript

[Rick]

I have  page which  displays chart correctly, when the user selects a radio button triggers a postback and gets more data from the server correctly. I get 2 lines appear on the chart.

 

In order to spend this up I tried moving all this client side, so return all the series data to the page. I worked out some JavaScript to hide or show the series data. Additionally I hide the additional Y Axis and attempted to show these in the java script but setting:

chart._plotArea.axes[axesIndex].options.visible = true

Has no effect.

I have attached to images one showing all the Y Axis on page load. The other hidden and I selected a radio button the series appears but does not show the Y Axis.

 

The javascript function is below.

[Rick]

function flightProfileShowSeries(id, parameterName, defaultParameterName) {
    try {
        debugger;
        var charts = document.getElementsByClassName("GSNRadGraph");
        if (charts != null) {
            var chart = $find(charts[0].id)._chartObject;
            if (chart != null) {
                // Show and hide the relavent series
                for (var seriesIndex = 0; seriesIndex < chart.options.series.length; seriesIndex++) {
                    var name = chart.options.series[seriesIndex].name;
                    if ((name.indexOf(defaultParameterName) > -1) == false) {
                        if (name.indexOf(parameterName) > -1) {
                            chart.options.series[seriesIndex].visible = true;
                        }
                        else {
                            chart.options.series[seriesIndex].visible = false;
                        }
                    }
                }

                // Show or hide the relavant Y Axis
                for (var axesIndex = 0; axesIndex < chart._plotArea.axes.length; axesIndex++) {
                    try {
                        var axisName = chart._plotArea.axes[axesIndex].options.title.text;
                        if (axisName != null) {
                            if (axisName.indexOf(parameterName) > -1) {
                                chart._plotArea.axes[axesIndex].options.visible = true;
                            }
                            else {
                                chart._plotArea.axes[axesIndex].options.visible = false;
                            }
                        }
                    }
                    catch (e) {
                    }
                }


                // Redraw
                chart.redraw();
                chart.refresh();
            }
        }
    }
    catch (e) {
    }
}

[Ianko]

Hello Rick,

Here you are a simple example showing how to show/hide an additional Y axis by using client-side code:

<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500">
    <PlotArea>
        <Series>
            <telerik:LineSeries>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="15" />
                    <telerik:CategorySeriesItem Y="23" />
                </SeriesItems>
            </telerik:LineSeries>
        </Series>
        <XAxis>
            <AxisCrossingPoints>
                <telerik:AxisCrossingPoint Value="0" />
                <telerik:AxisCrossingPoint Value="0" />
            </AxisCrossingPoints>
        </XAxis>
        <AdditionalYAxes>
            <telerik:AxisY Name="AdditionalAxis">
            </telerik:AxisY>
        </AdditionalYAxes>
    </PlotArea>
</telerik:RadHtmlChart>

<a href="#" onclick="showHideYaxis(true); return false;">show</a>
<a href="#" onclick="showHideYaxis(false); return false;">hide</a>

<script>
    function showHideYaxis(toShow) {
        var kendoChart = $find("LineChart").get_kendoWidget();
        kendoChart.options.valueAxis[1].visible = toShow;
        kendoChart.refresh();
    }
</script>

In a similar way you can add, remove or alter further the chart's rendering.

Regards,
Ianko
Telerik by Progress

[Rick]

Thank you that worked.

I have a slight oddity I still have space allocated to the Y Axis on the left, please see attached image.

[Ianko]

Hello Rick,

If you have more than one additional Y axis, this empty space might be reserved for one that it is invisible. If this is so, the only solution is to instead toggle the visibility of the Y axis to entirely add them and remove the programmatically. This, however, is slight;y more complex. But you should be able to achieve it in a similar way by removing and adding the additional Y axis in the options of the Kendo Widget: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.axisCrossingValue. 

Regards,
Ianko
Telerik by Progress

[Rick]

This sounds like a bug, if something is not visible it should not still allow space for it to be displayed. As its not visible.

As I am setting the chart up in code behind and using a DataTable I can't see it being possible to do add and remove the axis

[Ianko]

Hello Rick,

No, this is not a bug, but a normal behavior for SVG elements. You can consider it as if you working with a display: none rule. 

As for adding and removing the Y axis, yes, this is not an easy task to accomplish and I currently I cannot think of another alternative.  

Regards,
Ianko
Telerik by Progress