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

How to bind custom grid with chart's script

3 Answers 47 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Gokhan
Top achievements
Rank 1
Gokhan asked on 30 Jun 2014, 12:21 PM
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>


3 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 02 Jul 2014, 12:50 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gokhan
Top achievements
Rank 1
answered on 03 Jul 2014, 12:08 PM
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.







0
Hristo Germanov
Telerik team
answered on 07 Jul 2014, 12:53 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart
Asked by
Gokhan
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Gokhan
Top achievements
Rank 1
Share this question
or