This is a migrated thread and some comments may be shown as answers.

Date Range to limit chart data

5 Answers 216 Views
Charts
This is a migrated thread and some comments may be shown as answers.
William
Top achievements
Rank 1
William asked on 26 Sep 2013, 04:45 PM
Hi,

I'm trying to implement the date filter that you have on the music store:
http://docs.kendoui.com/tutorials/ASP.NET/Kendo%20Music%20Store/Music%20Store%20Web/kendo-music-store-web-management-charts

i.e.
When a user selects 'Day', it only bring in data for a day, 'Week' only brings back information for the week .etc...
But I also want to enter a custom Start Date and End Date....

The problem is that for our implementation we had decided to go the MVC route and I cannot find any information on how to do this via your MVC toolset.

My chart looks like:

@(Html.Kendo().Chart<KendoWithChart.Models.RatioTimeSeries>()
    .Name("chartActualHedgeRatioTimeSeries")
    .Title("Actual Hedge Ratio")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .ChartArea(chartArea => chartArea
        .Background("transparent")
    )
    .DataSource(ds => ds.Read(read => read.Action("GetRatioTimeSeriesData", "Home", new { ddlClient = @ViewBag.ClientName, dpkDate = @ViewBag.Date })))
    .Series(series =>
    {
        series.Area(model => model.Value1, model => model.Date).Name("Nuclear");
        series.Area(model => model.Value2, model => model.Date).Name("Hydro");
        series.Area(model => model.Value3, model => model.Date).Name("Wind");
    })
    .CategoryAxis(axis => axis
        .Date()
        .BaseUnit(ChartAxisBaseUnit.Days)
    )
    .ValueAxis(axis => axis.Numeric()
               .Labels(labels => labels.Format("{0:N0}"))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0:N0}")
    )
)

And it uses the controller from the demos.

What do I need to do to wire in the date filter? I want it to be seamless and to avoid any postbacks....

5 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 27 Sep 2013, 12:15 PM
Hello,

You can obtain a reference to the chart data source on the client and use the filter method.

var ds = $("#chartActualHedgeRatioTimeSeries").data("kendoChart").dataSource;
ds.filter({
    logic: "and",
    filters: [{
        field: "Date",
        operator: "gte",
        value: startDate
    }, {
        field: "Date",
        operator: "lte",
        value: endDate
    }]
});

I hope this helps.

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
William
Top achievements
Rank 1
answered on 27 Sep 2013, 01:04 PM
This looks like its implementing it via the JQuery.

I'm using the MVC helps and razor.

Is there an example of how to create the date filter via the MVC helpers?
0
T. Tsonev
Telerik team
answered on 30 Sep 2013, 11:06 AM
Hello,

I assumed that you want to filter the data source on the client side.
With a server-side configuration through the wrappers you'll need postbacks (or, at least, partial updates).

There's no problem with using the client-side API for widgets created with the MVC wrappers.

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
William
Top achievements
Rank 1
answered on 30 Sep 2013, 12:14 PM
Is there an example of how to do this with the MVC helpers and the best way/Kendo way to do this?
0
T. Tsonev
Telerik team
answered on 01 Oct 2013, 07:15 AM
Hello,

There's no specific advice I can provide beyond initializing the widgets and handling the respective change events.
The filtering itself is done through the widget instance, as in the previous example.

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
William
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
William
Top achievements
Rank 1
Share this question
or