Chart panning with a fixed zoom

[AP]

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

 

[Daniel]

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

[AP]

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.

 

[Daniel]

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