Chart panning with a fixed zoom

4 posts, 1 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 10 Nov 2015 Link to this post

    I have a chart which has too many values to fit comfortably on the screen all at once.

     I have made it pannable and zoomable as per the demo example.  This works, but the chart initially still opens with all the columns squashed onto the screen.

    How can I set a fixed zoom level (which the user can't change) to enable panning of the chart?

    Also, will a scrollbar or other visual indicator that a chart can be panned be added soon? Currently it's not very user friendly, and requires an application to find a way to tell users how to scroll the chart. Alternatively, can panning be activated by JavaScript, so some left / right buttons can be added?

    The chart code is:-

    @(Html.Kendo().Chart<Dashboard.Models.BarChartDataItem>(Model)
                .Name((string)ViewBag.ChartName)
                 .Title((string)ViewBag.ChartTitle)
                 .Theme("bootstrap")
                //.RenderAs(RenderingMode.Canvas)              
     
                .Legend(legend => legend
                    .Position(ChartLegendPosition.Top)
                    .Visible(false)
                )
         
                .Series(series =>
                {
                    series.Column(model => model.BarValue).Name("Actual").Labels(l=>l.Template("#=dataItem.ExtraValue#").Visible(true));
                })
                .ChartArea(area => area
                    .Height(350)
                    .Background("transparent")
                    )
                .CategoryAxis(axis => axis
     
     
                    .Categories(model => model.AxisValue)
                    .Labels(labels => labels.Rotation(-90))
                    .MajorGridLines(lines => lines.Visible(false))
                     .Title((string)ViewBag.Xaxis)
     
                )
                .Pannable(p=>p.Lock(ChartAxisLock.Y))
                 .Zoomable(zoomable => zoomable
                .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
                .Selection(selection => selection.Lock(ChartAxisLock.Y))
            )
     
                .ValueAxis(axis => axis.Numeric()
                    .Labels(labels => labels.Format("{0:N2}"))
                    .Title((string)ViewBag.Yaxis)
     
     
                    .Line(line => line.Visible(false))
                )
                .Events(e=>e.SeriesClick("seriesClick"))
     
                .Tooltip(tooltip => tooltip
                    .Visible(true)
     
                    .Format("{0:N2}")
                )
     
    )

    Thanks

     

  2. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 12 Nov 2015 Link to this post

    Hello,

    If the user should not be able to zoom then you should remove the Zoomable configuration or disable zooming:
    .Zoomable(false)
    Fixed range(zoom level) can be set by setting the axis minimum and maximum value e.g.
    .CategoryAxis(axis => axis
        .Min(0)
        .Max(9)

    Adding a scrollbar is not planned. We are consider adding indicator that shows the range but it will be visible only during panning. 
    Panning the chart via code can be done by using the setOptions method to change the axis minimum and maximum values. The other option is to change the visible range via the dataSource as demonstrated in this demo.


    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 12 Nov 2015 in reply to Daniel Link to this post

    Thanks for the response.

    Is it possible to have more documentation around setting the chart options? Documentation is quite sparse, and this seems a key mechanism to changing / updating a chart.

     However, without a visual indicator that the chart can be zoomed and panning is possible, I don't really think the feature is much use, certainly for desktop users. I think it will either go unused, or cause confusion about where the data has gone.

     

  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 16 Nov 2015 Link to this post

    Hello again,

    Thank you for the feedback. We will consider adding some visual indicator for a future version.

    As for your question about the setOptions method - could you clarify what kind of additional documentation would you like to see? The method basically accepts an objects with the options that you wish to set. All available options are listed in the API reference documentation.

    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready