How to bind custom grid with chart's script

4 posts, 0 answers
  1. Gokhan
    Gokhan avatar
    15 posts
    Member since:
    Jan 2014

    Posted 30 Jun 2014 Link to this post

    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>


  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 02 Jul 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Gokhan
    Gokhan avatar
    15 posts
    Member since:
    Jan 2014

    Posted 03 Jul 2014 Link to this post

    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.







  5. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 07 Jul 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready