How to bind custom grid with chart's script

[Gokhan]

Hi I am trying to learn ASP.NET MVC and Kendo so i am a bit new to all stuff about scripting etc and i need your serious help.

I have two questions. I have a one chart with date functions which can be sortable by months, dates and years. I can get  all values from chart with clicking "by months, by years, by dates etc" and than everything is quite okay to this point.

What i want is, I need a simple grid near of my chart. When user click chart's script functions("by months, by years, by dates etc".) user can get a dynamic simple grid with chart's values. How can i do that?

My another question is how can i show, first 6 months of 2014 and last 6 months of 2014 with clicking script functions. How can i add them to ".configuration-horizontal" div.

Thanks for your help.

Mychart:

<td>

        <div align="center" id="MyChart">
            @(Html.Kendo().Chart(Model)
.Name("MyChartz")
    .Title(title => title
                                .Text("Aaaaa)")
                    .Position(ChartTitlePosition.Top))

   .Legend(legend => legend
        .Visible(true)
        .Position(ChartLegendPosition.Top))
.Series(series =>
{
    series
        .Column(model => model.aaa, categoryExpression: model => model.DateTime).Name("aaa Dosyalar")
        .Aggregate(ChartSeriesAggregate.Count);
    series
       .Column(model => model.bbb, categoryExpression: model => model.DateTime).Name("bbb Dosyalar")
       .Aggregate(ChartSeriesAggregate.Count);

})
.CategoryAxis(axis => axis
    .Date()
    .BaseUnit(ChartAxisBaseUnit.Months)
    .MajorGridLines(lines => lines.Visible(false))
)
      .Tooltip(tooltip => tooltip
    .Visible(true)
             .Template("#= series.name #: #= value #"))
            )

        </div>

    </td>

Script

<script type="text/javascript">
    $(".configuration-horizontal").bind("change", refresh);

    function refresh() {
        var chart = $("#chartMesleki258").data("kendoChart"),
        series = chart.options.series,
        categoryAxis = chart.options.categoryAxis,
        baseUnitInputs = $("input:radio[name=baseUnit]"),
        aggregateInputs = $("input:radio[name=aggregate]");

        for (var i = 0, length = series.length; i < length; i++) {
            series[i].aggregate = aggregateInputs.filter(":checked").val();

        }

        categoryAxis.baseUnit = baseUnitInputs.filter(":checked").val();

        chart.refresh();
    }
</script>

[Hristo Germanov]

Hi Gokhan,

1) Unfortunately you can't do this with MVC. You need to bind the chart and the grid with a shared DataSource with javascript. You can examine this example as a reference: http://demos.telerik.com/kendo-ui/datasource/shared-datasource

2) You need to filter the dataSource with the date range that you want. http://docs.telerik.com/kendo-ui/api/framework/datasource#methods-filter

I hope this helps.

Regards,
Hristo Germanov
Telerik

 

 

[Gokhan]

Thanks for your answer Hristo,

I get an idea what you tell me about. I'll try datasource binding.

But i have a still simple problem:

I have been playing javascript codes but i just want to show aggregate values inside my simple grid. I can show my categories names byt i cant see dynamic values of them.

 <div id="cc"></div>       $("#cc").html(series[1].name); 

or should i use
series[i].aggregate = aggregateInputs.filter(":checked").val();

??

how can i show values like $("#cc").html(series[1].values); ?

 thanks.

[Hristo Germanov]

Hi Gokhan,

There is not an easy solution. The chart save the aggregated values in _plotArea.series. If you don't want to aggregate the values manually you need to do something like this: http://trykendoui.telerik.com/@germanov/aXag/5
1) aggregate should be an function that will aggregate values for each categories.
2) hook up to the chart's dataBound and there you can bind the grid to the aggregated chart values.

I hope this helps.

Regards,
Hristo Germanov
Telerik