Hide/Show addtional Y Axis in Javascript

7 posts, 0 answers
  1. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2013

    Posted 28 Jul Link to this post

    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.

  2. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2013

    Posted 28 Jul in reply to Rick Link to this post

    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) {
        }
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 02 Aug Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2013

    Posted 09 Aug in reply to Ianko Link to this post

    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.

  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 10 Aug Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Rick
    Rick avatar
    23 posts
    Member since:
    Jul 2013

    Posted 10 Aug in reply to Ianko Link to this post

    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

  8. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 10 Aug Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017